How to Create Components in Angular 8

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                                    
							
						

Above command creates a new directory with the name 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
																	 
							
						

We've created our component along with it's template and style files , now let's do some refactoring. We want to move all the inventions related code from app.component.ts that we wrote in last part of the tutorial to the newly created component file. Let's do that.

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.component.ts: We created this component to deal with Inventions
  

  										
  // 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() {
  	}
  
  }												
  										
  									

  
  As you can see , there's nothing new here , we simply moved the Inventions class and object initialization from 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:Similarly , move the inventions related html from app.component.html to its very own inventions.component.html
  

  											
  <!-- 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>																					
  											
  										

  
  That's all we need to be able to show our inventions , but now we need a place to add this component to , we'll add this component to our app.component.ts which acts as a parent component now onwards.
• app.component.ts: Notice that 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: Similarly edit the template file app.component.html to add the selector for InventionsComponent as shown below.
  

  												
  <!-- app.component.html -->
  
  <div style="text-align:center">
  	<h1>
  		Welcome to {{title}}!!
  	</h1>
  
  </div>
  <h2> Greatest Inventions in History of Mankind </h2>
  <hr>
  															
  												
  											

  
  You must have observed the selector <app-inventions> which is where our inventions component is placed.

That's our newly created component has been added to the app.component.ts now run the app using following command and go to your browser at 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

1. We learned to create an Angular 8 component using @angular/cli command ng g
2. we added the component to the parent component

Hope you enjoying learning about the Angular 8 , in the next part we'll learn about another interesting aspect of Angular 8 i.e. 2 way data binding and how is it achieved.