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
<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 declarations
array 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
ng serve
then, it will print the following output in the browser.
Thanks for reading the article.
I hope you like this Angular Component Example article.:)