Components

Components are the core concepts and basic building blocks in Angular. Components defines the rule how to render the certain area of webpage in the application. A component can have many child components inside. In an angular application there is always a root components which contains other components.

For example, a webpage can have menu component, blog post list component, blog article component, side pane component, header component, footer component etc.

Components are written as typescript classes. This class have some metadata defined which dictates how this component will be used by app.

In the generated project there is an 'app' component. It is the root component of this application. This app component will included all other component which we will make in future. This app component consist following files:

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

app.component.css contains css styles related to component and app.component.html file contains HTML markup of component. Lets take a look on each of these files:

app.component.css: As you can easily guess from filetype, this file contains style sheet definitions for app component. As app component is root component so styles defined in this file can be applied on other components too.

app.component.html: This file contains the HTML structure of root app component.

app.component.spec.ts: As file extension suggests, this file will contain typescript code. This file is used to write test cases for the component.

app.component.ts: This typescript file defines the business logic of the component.

app.module.ts: This file contains definition for app module.

Let's see how we can create a new component. For creating a new component Angular CLI gives a command. You can write following in command line and execute it:

ng generate component dashboard

Or

ng g component dashboard

This will generate a new component named dashboard.