Angular 7 Components With An Example

While building any angular application, components is a core concept of building an angular application.

We can define any angular application as a tree of components.

A component is nothing but a simple typescript class which contains a properties and methods which are required to bind the data with UI or Html template.

To create a component we can use Angular CLI. Angular CLI is a command line interface to create angular components, modules,services and etc. It also improves the productivity.

Angular Component Example :

Table of Contents

Angular CLI Installation

To install the Angular CLI you can follow the steps from the official website: https://cli.angular.io

To install the angular CLI, run the following command:

 

<br />npm install -g @angular/cli<br />

 

Create a new project

Once it is installed, you can create a new app by running the following commands:

 

<br />ng new my-new-app<br />cd my-new-app<br />ng serve<br />

 

Open VSCode

Once the project is installed, you can open it using VSCode and the project folder architecture will look as follows:

it contains the following files:

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

 

Here app.module.ts is called a root module. it will looks as follows:

<br />import { BrowserModule } from '@angular/platform-browser';<br />import { NgModule } from '@angular/core';<br /><br />import { AppComponent } from './app.component';<br /><br />@NgModule({<br />  declarations: [<br />    AppComponent<br />  ],<br />  imports: [<br />    BrowserModule<br />  ],<br />  providers: [],<br />  bootstrap: [AppComponent]<br />})<br />export class AppModule { }<br />

 

Here you can see that there is a declarationsarray which includes the AppComponent.

Whenever you’ll create a new component using Angular CLI, it will automatically add a new entry in declarations array.

the AppComponent which is created by default will always remain the parent and the new components created will form the child components.

app.component.ts is called a root component. it will looks as follows:

<br />import { Component } from '@angular/core';<br /><br />@Component({<br />  selector: 'app-root',<br />  templateUrl: './app.component.html',<br />  styleUrls: ['./app.component.css']<br />})<br />export class AppComponent {<br />  title = 'app';<br />}<br /><br />

Create New Component using Angular CLI

To create a new component using Angular CLI, you can run the following command:

<br />ng generate component test-cmp<br />

OR

<br />ng g c test-cmp<br />

When you’ll run the above code you’ll get the following output in the console.

The following 4 files are created inside the test-cmp folder −

test-cmp.component.css − CSS file for the new component

test-cmp.component.html − HTML file for the new component

test-cmp.component.spec.ts − this can be used for unit testing.

test-cmp.component.ts − component file where we can define methods, properties and etc.

and it has also updated root module file which is app.module.ts.

It has added a new component called TestCmpComponent inside the declarations array of root module file.

updated app.module.ts will look as follows:

<br />import { BrowserModule } from '@angular/platform-browser';<br />import { NgModule } from '@angular/core';<br /><br />import { AppComponent } from './app.component';<br />import { TestCmpComponent } from './test-cmp/test-cmp.component';<br /><br />@NgModule({<br />  declarations: [<br />    AppComponent,<br />    TestCmpComponent<br />  ],<br />  imports: [<br />    BrowserModule<br />  ],<br />  providers: [],<br />  bootstrap: [AppComponent]<br />})<br />export class AppModule { }<br />

Here in the above code, you can see that the TestCmpComponent is added inside the declarations array.

test-cmp.component.ts will looks as follows:

<br />import { Component, OnInit } from '@angular/core';<br /><br />@Component({<br />  selector: 'app-test-cmp',<br />  templateUrl: './test-cmp.component.html',<br />  styleUrls: ['./test-cmp.component.css']<br />})<br />export class TestCmpComponent implements OnInit {<br /><br />  constructor() { }<br /><br />  ngOnInit() {<br />  }<br /><br />}<br /><br />

Here in the above code, you can see that there is a @Component decorator is used. which accepts a object with the following properties:

selector:selector is name which is used in our view like html tag.
templateUrl: it is the url of the html template.
styleUrls: it is the url of the css file.

Now, if we want to display TestCmpComponent we can just use the following tag.

<app-test-cmp></app-test-cmp>

If you’ll add the above tag inside app.component.html as below:

<br /><!--The content below is only a placeholder and can be replaced.--><br /><app-test-cmp></app-test-cmp><br /><div style="text-align:center"><br />  <h1><br />    Welcome to {{ title }}!<br />  </h1><br /><br />  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="><br /></div><br /><br /><h2>Here are some links to help you start: </h2><br /><ul><br />  <li><br />    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2><br />  </li><br />  <li><br />    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2><br />  </li><br />  <li><br />    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2><br />  </li><br /></ul><br /><br />

Run Project

Thanks for reading the article.