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
<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:
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.
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 article!
- Angular Percent Pipe Example
- Angular Decimal Pipe Example
- Angular Slice Pipe Example
- Angular Date Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- CSS Tricks for Uppercase and LowerCase and TitleCase
- Get Started With Ionic4
- How to use ngrx/store with Ionic 4