This tutorial on creating Angular 8 components is in continuation of our Angular 8 Tutorial Series and if you have not read the previous parts of the tutorial , it is recommended that you go through them first.
We started learning about Angular 8 components in the previous part of the tutorial , where we edited the app.component.ts
and the corresponding template file app.component.html
. In this part of the tutorial we'll learn how to create new components , what we're going to do is we'll create a separate Inventions component which helps us to manage the inventions in our InventionsHub
project and we'll be using the old app.component.ts
as a container which contains our newly created component. Enough of theory , let's get coding. Following is how you use@angular/cli
to create a new component in your Angular 8 app project.
ng g component inventions
inventions
in the app directory of our angular project. Note that g
in the above command is a short notation for generate
and it creates a new component for us. Following is how the output of terminal looks like when we execute the above command.
installing component
create src/app/inventions/inventions.component.css
create src/app/inventions/inventions.component.html
create src/app/inventions/inventions.component.spec.ts
create src/app/inventions/inventions.component.ts
update src/app/app.module.ts
Move the Inventions class and it's object initialization from app.component.ts
to inventions.component.ts
so that app.component.ts
simply acts as a container. Do the same in template file also , move the inventions related code from app.component.html to the newly created inventions.component.html
file.
After we make the above changes following is how our files look like:
// inventions/inventions.component.ts
import { Component, OnInit } from '@angular/core';
// add a new class
export class Invention {
name : String ;
inventor : String ;
year : String;
}
@Component({
selector: 'app-inventions',
templateUrl: './inventions.component.html',
styleUrls: ['./inventions.component.css']
})
export class InventionsComponent implements OnInit {
invention : Invention = {
name : ' C Programming Language ' ,
inventor : ' Dennis Ritchie ' ,
year : ' 1972 '
}
constructor() { }
ngOnInit() {
}
}
app.component.ts
to this file. One thing you might have observed in the above code is the method ngOnInit()
, we'll talk about it later in this part itself.
<!-- inventions.component.html -->
<!-- bind data using curly braces to the data in app.component.ts -->
<h2> {{ invention.name }} </h2>
<h3> {{ invention.inventor }} </h3>
<h3> {{ invention.year }} </h3>
app.component.ts
which acts as a parent component now onwards.
app.component.ts
no more contains inventions related code , instead it imports an InventionsComponent as shown in the following code snippet.
import { Component } from '@angular/core';
// import the InventionsComponent to show inventions
import { InventionsComponent } from './inventions/inventions.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'InventionsHub';
}
<!-- app.component.html -->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<h2> Greatest Inventions in History of Mankind </h2>
<hr>
http://localhost:4200
Well yeah , there's nothing fancy out there , you see what you saw in the previous part but the only difference this time is that you created a different component to show Inventions related information , right now it may not make much sense as to what value we gained out of creating a different component for Inventions , but as we progress in this tutorial series , things will be brighter.
The ngOnInit()
is a lifecycle callback method. A component has a lifecycle which is looked after by angular and there're several life cycle callbacks invoked at different intervals. To read more about component lifecycle and lifecycle callbacks, this link.
In this part of the tutorial , we added to our knowledge on angular components by the following means