A component is a TypeScript class with an HTML template and an optional set of CSS styles that control a part of the screen.
Components are the most important concept in Angular 6. An Angular 6 application is basically a tree of components with a root component (the famous AppComponent). The root component is the one contained in the bootstrap array in the main
One important aspect of components is re-usability. A component can be re-used throughout the application and even in other applications. Common and repeatable code that performs a certain task can be encapsulated into a re-usable component that can be called whenever we need the functionality it provides.
Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree. source
An Angular application is made of several components forming a tree structure with parent and child components.
A component is an independent block of a big system (web application) that communicates with the other building blocks (components) of the system using inputs and outputs. A component has associated view, data and behavior and may have parent and child components.
Components allow maximum re-usability, easy testing, maintenance and separation of concerns.
Let’s now see this practically. Head over to your Angular application project folder and open the
src/appfolder. You will find the following files:
app.component.css: the CSS file for the component
app.component.html: the HTML view for the component
app.component.spec.ts: the unit tests or spec file for the component
app.component.ts: the component code (data and behavior)
app.module.ts: the application main module
Except for the last file which contains the declaration of the application main (root) Module, all these files are used to create a component. It’s the AppComponent: The root component of our application. All other components we are going to create next will be direct or un-direct children of the root component.