Angular Components is the main topic of this tutorial. So before diving into deep let’s understand 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.
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.
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.
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:-
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.
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 MyCustomComponent
Wait 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
Some times in our work, we need to cut a video in specific start &…
If you don't know about JavaScript filter() function then this tutorial is for you. In…
In this tutorial, we will learn how to install bower on windows 10. But, before…
JavaScript reduce() method tutorial is the topic, we are going to understand today. So what…
In this post, we will understand Angular HttpClient with example. When Angular version 4.3 launched,…
In this tutorial, we will know how to redirect domain according to a country IP…
This website uses cookies.