Angular Components is the main topic of this tutorial. So before diving into deep let’s understand Angular Components.
What is Angular Components?
While creating a web or mobile application in Angular, whatever you do, It’s all related to Angular Components. Means, an Angular application is nothing but a collection of components with a root component. In other words you can understand, It’s like a tree of components.
A Component is responsible to control the architecture of a web application like header, footer, menu bar and sidebar. Every part of a web application is a seperate component.
A Component is consists of Typescript (It converts into Javascript code after compilation), HTML and CSS.
If you are familiar with the MVC design pattern (Model View Controller), Just simply understand that a component’s code represent the Controller and HTML and CSS represents the View.
Create an Angular Components
You can create an Angular Components manually or using Angular CLI. Let’s understand how we can create an Angular Components manually first, then w’ll move further to create using the Angular CLI.
@Component Decorator in Angular Components
We can create an Angular component in Angular using the decorator @Component() that can be imported from @angular/core. We just need to create a Typescript class, Import the @Component decorator and decorate the class with this decorator.
This decorator takes the information about the HTML and CSS file that is rendered while loading the current component.
Here is a simple example of creating an Angular Component for application navigation menu:-
import { Component } from '@angular/core';
@Component({
selector: "nav-bar",
template: "nav-bar.html"
})
class NavBarComponent {
constructor() {}
}When application load this component, It simply create a HTML selector “<nav-bar></nav-bar>“ and print the content into the selector, taken from the nav-bar.html file.
So, Where ever you want to show the menu Bar, You only need to keep the selector “<nav-bar></nav-bar>“ on that place.
After creating the component, It is necessary to tell the application about the newly created component. For this, we have to define in application module file that is app.module.ts.
Root Component in Angular Components
See the files list in screenshot below which is created when we create a new project via Angular CLI:-
You can see some files above in src/app folder. Here, three files is very important for us to understand:-
- app.component.ts: This is the main component file that contains all the logic used by this app component.
- app.component.html: This file has all the HTML code used by this app component to render the content.
- app.component.css: This file has all the CSS styles for this app component.
You can also see the app.module.ts file, It is the main module file that is used to define an Angular component.
Now let’s know about the root component of the angular applications:-
A root component is an Angular component that loads first when the application start. You can also change the root component according to your project need, But for now keep it as it is and understand how a root component load first.
Open the app.module.ts located in same directory ‘src/app’ and see the line 16, What do you find here ?
This tells the app to load the AppComponent first, then load the other Angular Components.
Now open the index.html file located in ‘src‘ folder.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyNewAngular6Project</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>What do you find in the body tag?
<app-root></app-root> is the main root selector that is defined in app.component.ts file. See the code below:-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Hello World';
}In @Component decorator you will find the root selector that is ‘app-root’
So, When an Angular application starts, Firstly It loads the root component and then it loads It’s other child components like a tree view.
Create an Angular Components using CLI
If you are a beginner always follow the manual method to create the Angular Components. So that you could understand the structure of Angular application.
When you are familiar with the system then you can use CLI method to create the Angular Components that is very easy and popular way to create components.
Just open the terminal, Navigate to your project directory and simply run:-
ng g component MyCustomComponentWait for a while and It will create all files of a component, Also it will include this component file in module declaration section of app.module.ts.
You can check the other options described here: – Generate Component
