Angular 7 Components With An Example

by
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 CLI Installation

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

It will looks as follows:
Angular CLI Home Page | Angular 7 Environment Setup
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:

Angular 7 Components With An Example | Project Architecture

Here you can see that there is a folder called app. which 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.

Angular 7 New Component using Angular CLI

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

If you’ll run the angular project using ng serve then, it will print the following output in the browser.

Angular 7 Demo | Angular 7 Components With An Example

Thanks for reading the article,
I hope you like this article!

Leave a Comment