Post
Ask Question

Learn Navigation Between Components In Angular For Beginners - Part Four

Introduction 

 
In this article we are going to learn navigation between multiple components. Before reading this article I suggest you go through my previous articles to understand this concept easily. In this article I am going to create a new project as well as add three different components. In order to create a new project, navigate to the folder path like below.
 
F:\NavigationBetweenComponents\ and type ng new projectName.
 
Here as we are working on navigation between components. I have created a project with the name "NavigationBetweenComponents" like below.
  1. F:\NavigationBetweenComponents>ng new NavigationBetweenComponents
From the above path, we are in NavigationBetweenComponents folder of F: drive and with the above command ng new NavigationBetweenComponents, a new project will be created within the specified path. Now in order to create the Components we use the following commands like below.
  1. ng generate component componentName or  
  2. ng g c componentName  
As I mentioned above, I am going to create three different components in this project:  app1, app2 and app3 etc. To create these components we use the below commands
  1. ng generate component app1  
  2. ng generate component app2  
  3. ng generate component app3  
[OR]
  1. ng g c app1  
  2. ng g c app2  
  3. ng g c app3  
With the above commands three different components will be created within the src/app folder with the folders such as app1, app2 and app3.
 
Within the app1 folder the created files are:
  1. app1.component.html  
  2. app1.component.spec.ts  
  3. app1.component.css  
  4. app1.component.ts  
Within the app2 folder the created files are:
  1. app2.component.html  
  2. app2.component.spec.ts  
  3. app2.component.css  
  4. app2.component.ts   
And within the app3 folder the created files are:
  1. app3.component.html  
  2. app3.component.spec.ts  
  3. app3.component.css  
  4. app3.component.ts  
To understand this article I  have created a sample project with three different components and one main component, which is nthing but AppComponent. Now open the app.component.ts and place the below code.
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: '[app-root]',  
  5.   //selector: '.app-root',  
  6.   //selector: '[app-root]',  
  7.   templateUrl: './app.component.html',  
  8.   styleUrls: ['./app.component.css']  
  9. })  
  10. export class AppComponent {  
  11.   
  12.   EmployeeId = 1702356;  
  13.   FirstName = 'Khaja';  
  14.   LastName = 'Moizuddin';  
  15.   EmployeeName: string = this.FirstName + this.LastName;  
  16.   EmployeeDesignation = 'Software Engineer';  
  17.   DateOfJoining: Date = new Date('Mon Apr 22 2016 07:44:57');  
  18.   EmployeeAddress = 'Malakpet, Hyderabad';  
  19.   EmployeePhone = 8019804474;  
  20.   EmployeeAge = 29;  
  21.   Salary  = 20000;  
  22.   City = 'Hyderabad';  
  23.   CompanyName = 'Legato Health Technologies';  
  24. }  
Open the app.component.html and place the below code:
  1. <h2> Below Details is Displayed From - AppComponent</h2>  
  2. <hr />  
  3.   
  4. <table>  
  5.     <tr>  
  6.         <th>EmployeeId</th>  
  7.         <th>EmployeeName</th>  
  8.         <th>EmployeeDesignation</th>  
  9.         <th>DateOfJoining</th>  
  10.         <th>EmployeeAddress</th>  
  11.         <th>EmployeePhone</th>  
  12.         <th>EmployeeAge</th>  
  13.         <th>Salary</th>  
  14.         <th>City</th>  
  15.         <th>CompanyName</th>  
  16.     </tr>  
  17.   
  18.     <tr>  
  19.       <td>{{this.EmployeeId}} </td>  
  20.       <td>{{this.EmployeeName}}</td>  
  21.       <td>{{this.EmployeeDesignation}}</td>  
  22.       <td>{{this.DateOfJoining | date:'longDate'}}</td>  
  23.       <td>{{this.EmployeeAddress}}</td>  
  24.       <td>{{this.EmployeePhone}}</td>  
  25.       <td>{{this.EmployeeAge}}</td>  
  26.       <td>{{this.Salary | currency: 'USD': true}}</td>  
  27.       <td>{{this.City}}</td>  
  28.       <td>{{this.CompanyName}}</td>  
  29.     </tr>  
  30.     </table>  
  31. <app-app1></app-app1>  
  32. <!--<div class='app-app1'></div>  
  33. <div app-app1></div>-->  
Open the app.component.css and place the below code:
  1. table {  
  2.     font-family: arial, sans-serif;  
  3.     border-collapse: collapse;  
  4.     width: 100%;  
  5.   }  
  6.   
  7.    td, th {  
  8.     border: 3px solid #c220eb;  
  9.     text-align: left;  
  10.     padding: 3px;  
  11.   }  
Similarly open the app1.component.ts file and place the below code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-app1',  
  5.   //selector: '.app-app1',  
  6.  // selector: '[app-app1]',  
  7.   templateUrl: './app1.component.html',  
  8.   styleUrls: ['./app1.component.css']  
  9. })  
  10. export class App1Component implements OnInit {  
  11.   employeeList: any[] = [  
  12.     {  
  13.   EmployeeId : 103621,  
  14.   EmployeeName : 'Khaja Moizuddin',  
  15.   EmployeeDesignation : 'Software Engineer',  
  16.   DateOfJoining : new Date('Mon Apr 22 2016 10:30:57'),  
  17.   EmployeeAddress : 'Gacchibowli, Hyderabad',  
  18.   EmployeePhone : 8019804474,  
  19.   EmployeeAge : 29,  
  20.   Salary : 10000,  
  21.   City : 'Hyderabad',  
  22.   CompanyName : 'Legato'  
  23.  },  
  24.  {  
  25.    EmployeeId : 103622,  
  26.    EmployeeName : 'Pavan Kumar',  
  27.    EmployeeDesignation : 'S.Software Engineer',  
  28.    DateOfJoining : new Date('Tue Jul 19 2012 09:27:45'),  
  29.    EmployeeAddress : 'DLF City, Bangalore',  
  30.    EmployeePhone : 9030344566,  
  31.    EmployeeAge : 25,  
  32.    Salary : 15000,  
  33.    City : 'Bangalore',  
  34.    CompanyName : 'Infosys'  
  35.  }  
  36. ];  
  37.   constructor() { }  
  38.   
  39.   ngOnInit() {  
  40.   }  
  41.   
  42. }  
Open the app1.component.html and place the below code:
  1. <h2>Below Details is Displayed From - App1Component</h2>  
  2.     <hr>  
  3.     <table>  
  4.       <tr>  
  5.         <th>EmployeeId</th>  
  6.         <th>EmployeeName</th>  
  7.         <th>EmployeeDesignation</th>  
  8.         <th>DateOfJoining</th>  
  9.         <th>EmployeeAddress</th>  
  10.         <th>EmployeePhone</th>  
  11.         <th>EmployeeAge</th>  
  12.         <th>Salary</th>  
  13.         <th>City</th>  
  14.         <th>CompanyName</th>  
  15.       </tr>  
  16.   
  17.   
  18.       <tr *ngFor = 'let employee of employeeList'>  
  19.         <td>{{employee.EmployeeId}} </td>  
  20.         <td>{{employee.EmployeeName}}</td>  
  21.         <td>{{employee.EmployeeDesignation}}</td>  
  22.         <td>{{employee.DateOfJoining | date:'longDate'}}</td>  
  23.         <td>{{employee.EmployeeAddress}}</td>  
  24.         <td>{{employee.EmployeePhone}}</td>  
  25.         <td>{{employee.EmployeeAge}}</td>  
  26.         <td>{{employee.Salary | currency: 'USD': true}}</td>  
  27.         <td>{{employee.City}}</td>  
  28.         <td>{{employee.CompanyName}}</td>  
  29.       </tr>  
  30.     </table>  
  31.   
  32.     <app-app2></app-app2>  
  33.    <!--<div class='app-app2'></div>-->  
  34. <!--<div app-app2></div>-->  
Open the app1.component.css and place the below code:
  1. table {  
  2.     font-family: arial, sans-serif;  
  3.     border-collapse: collapse;  
  4.     width: 100%;  
  5.   }  
  6.     
  7.   td, th {  
  8.     border: 3px solid #2442ec;  
  9.     text-align: left;  
  10.     padding: 3px;  
  11.   }  
  12.     
Similarly open the app2.component.ts and place the below code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-app2',  
  5.   templateUrl: './app2.component.html',  
  6.   styleUrls: ['./app2.component.css']  
  7. })  
  8. export class App2Component implements OnInit {  
  9.   employeeList: any[] = [  
  10.  {  
  11.    EmployeeId : 165893,  
  12.    EmployeeName : 'Vikas',  
  13.    EmployeeDesignation : 'S.Software Engineer',  
  14.    DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),  
  15.    EmployeeAddress : 'Electronic City, Bangalore',  
  16.    EmployeePhone : 9030344566,  
  17.    EmployeeAge : 23,  
  18.    Salary : 20000,  
  19.    City : 'Bangalore',  
  20.    CompanyName : 'TCS'  
  21.  },  
  22.  {  
  23.    EmployeeId : 1045896,  
  24.    EmployeeName : 'Vivek',  
  25.    EmployeeDesignation : 'Delivery Manager',  
  26.    DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),  
  27.    EmployeeAddress : 'Madhapur, Hyderabad',  
  28.    EmployeePhone : 9030344566,  
  29.    EmployeeAge : 23,  
  30.    Salary : 20000,  
  31.    City : 'Hyderabad',  
  32.    CompanyName : 'Microsoft'  
  33.  }  
  34. ];  
  35.   constructor() { }  
  36.   
  37.   ngOnInit() {  
  38.   }  
  39.   
  40. }  
Open the app2.component.html and place the below code:
  1. <h2>Below Details is Displayed From - App2Component</h2>  
  2.     <hr>  
  3.     <table>  
  4.       <tr>  
  5.         <th>EmployeeId</th>  
  6.         <th>EmployeeName</th>  
  7.         <th>EmployeeDesignation</th>  
  8.         <th>DateOfJoining</th>  
  9.         <th>EmployeeAddress</th>  
  10.         <th>EmployeePhone</th>  
  11.         <th>EmployeeAge</th>  
  12.         <th>Salary</th>  
  13.         <th>City</th>  
  14.         <th>CompanyName</th>  
  15.       </tr>  
  16.   
  17.   
  18.       <tr *ngFor = 'let employee of employeeList'>  
  19.         <td>{{employee.EmployeeId}} </td>  
  20.         <td>{{employee.EmployeeName}}</td>  
  21.         <td>{{employee.EmployeeDesignation}}</td>  
  22.         <td>{{employee.DateOfJoining | date:'longDate'}}</td>  
  23.         <td>{{employee.EmployeeAddress}}</td>  
  24.         <td>{{employee.EmployeePhone}}</td>  
  25.         <td>{{employee.EmployeeAge}}</td>  
  26.         <td>{{employee.Salary | currency: 'INR': true}}</td>  
  27.         <td>{{employee.City}}</td>  
  28.         <td>{{employee.CompanyName}}</td>  
  29.       </tr>  
  30.     </table>  
  31.     <app-app3></app-app3>  
  32.     <!--<div class='app-app3'></div>  
  33. <div app-app3></div>-->  
Open the app2.component.css and place the below code:
  1. table {  
  2.     font-family: arial, sans-serif;  
  3.     border-collapse: collapse;  
  4.     width: 100%;  
  5.   }  
  6.     
  7.   td, th {  
  8.     border: 3px solid #056659ce;  
  9.     text-align: left;  
  10.     padding: 3px;  
  11.   }  
  12.     
Similarly open the app3.component.ts and place the below code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-app3',  
  5.   templateUrl: './app3.component.html',  
  6.   styleUrls: ['./app3.component.css']  
  7. })  
  8. export class App3Component implements OnInit {  
  9.   
  10.   employeeList: any[] = [  
  11.     {  
  12.       EmployeeId : 165846,  
  13.       EmployeeName : 'Ramesh',  
  14.       EmployeeDesignation : 'S.Software Engineer',  
  15.       DateOfJoining : new Date('Wed Jul 20 2017 09:24:23'),  
  16.       EmployeeAddress : 'Banjara Hills, Bangalore',  
  17.       EmployeePhone : 8097984465,  
  18.       EmployeeAge : 27,  
  19.       Salary : 25000,  
  20.       City : 'Hyderabad',  
  21.       CompanyName : 'Accenture'  
  22.     },  
  23.     {  
  24.       EmployeeId : 1087564,  
  25.       EmployeeName : 'Ashish',  
  26.       EmployeeDesignation : 'Delivery Manager',  
  27.       DateOfJoining : new Date('Wed Aug 10 2012 11:02:23'),  
  28.       EmployeeAddress : 'Mehdipatnam, Hyderabad',  
  29.       EmployeePhone : 9030344566,  
  30.       EmployeeAge : 26,  
  31.       Salary : 20000,  
  32.       City : 'Hyderabad',  
  33.       CompanyName : 'Microsoft'  
  34.     }];  
  35.   
  36.   constructor() { }  
  37.   
  38.   ngOnInit() {  
  39.   }  
  40.   
  41. }  
Open the app3.component.html and place the below code:
  1. <h2>Below Details is Displayed From - App3Component</h2>  
  2.     <hr>  
  3.     <table>  
  4.       <tr>  
  5.         <th>EmployeeId</th>  
  6.         <th>EmployeeName</th>  
  7.         <th>EmployeeDesignation</th>  
  8.         <th>DateOfJoining</th>  
  9.         <th>EmployeeAddress</th>  
  10.         <th>EmployeePhone</th>  
  11.         <th>EmployeeAge</th>  
  12.         <th>Salary</th>  
  13.         <th>City</th>  
  14.         <th>CompanyName</th>  
  15.       </tr>  
  16.   
  17.   
  18.       <tr *ngFor = 'let employee of employeeList'>  
  19.         <td>{{employee.EmployeeId}} </td>  
  20.         <td>{{employee.EmployeeName}}</td>  
  21.         <td>{{employee.EmployeeDesignation}}</td>  
  22.         <td>{{employee.DateOfJoining | date:'longDate'}}</td>  
  23.         <td>{{employee.EmployeeAddress}}</td>  
  24.         <td>{{employee.EmployeePhone}}</td>  
  25.         <td>{{employee.EmployeeAge}}</td>  
  26.         <td>{{employee.Salary | currency:'EUR':true}}</td>  
  27.         <td>{{employee.City}}</td>  
  28.         <td>{{employee.CompanyName}}</td>  
  29.       </tr>  
  30.     </table>  
Open the app3.component.css and place the below code:
  1. table {  
  2.     font-family: arial, sans-serif;  
  3.     border-collapse: collapse;  
  4.     width: 100%;  
  5.   }  
  6.     
  7.   td, th {  
  8.     border: 3px solid #eb3737;  
  9.     text-align: left;  
  10.     padding: 3px;  
  11.   }  
  12.     
Here in app.component.css, app1.component.css, app2.component.css and app3.component.css, we placed the css with four different colors in order to understand the rendering of HTML table or navigation among four different components.
 
In order to navigate from one component to another we use the selector with three different types like below.
  • Element Declaration using <app-root></app-root>
  • Class Declaration using <div class='app-root'></div>
  • Attribute Declaration using <div app-root></div>
If we are navigating from App.component to App1.component then in App.component.html we should use the selector of App1.component.ts like below.
  •  If we want to use as Element Declaration, then in App.component.html, we need to declare it as <app-app1></app-app1> and in the App1.component.ts, the selector should be, selector: 'app-app1'.
  •  If we want to use as Class Declaration, then in App.component.html, we need to declare it as <div class='app-app1'></div> and in the App1.component.ts, the selector should be, selector: 'app-app1'.
  • Similarly if we want to use as Attribute Declaration, then in App.component.html, we need to declare it as <div app-app1></div> and in the App1.component.ts, the selector should be, selector:'[app-app1]'.
In order to work with inline code, we need to place app.component.html, app.component.css code in app.component.ts code and comment the code in app.component.html and app.component.css files to check whether it's working perfectly or not.
 
Open the app.component.ts file and place the below code:
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: '[app-root]',  
  5.   //selector: '.app-root',  
  6.   //selector: '[app-root]',  
  7.   //templateUrl: './app.component.html',  
  8.   template:`  
  9.   <h2> Below Details is Displayed From - AppComponent</h2>  
  10. <hr />  
  11.   
  12. <table>  
  13.     <tr>  
  14.         <th>EmployeeId</th>  
  15.         <th>EmployeeName</th>  
  16.         <th>EmployeeDesignation</th>  
  17.         <th>DateOfJoining</th>  
  18.         <th>EmployeeAddress</th>  
  19.         <th>EmployeePhone</th>  
  20.         <th>EmployeeAge</th>  
  21.         <th>Salary</th>  
  22.         <th>City</th>  
  23.         <th>CompanyName</th>  
  24.     </tr>  
  25.   
  26.     <tr>  
  27.       <td>{{this.EmployeeId}} </td>  
  28.       <td>{{this.EmployeeName}}</td>  
  29.       <td>{{this.EmployeeDesignation}}</td>  
  30.       <td>{{this.DateOfJoining | date:'longDate'}}</td>  
  31.       <td>{{this.EmployeeAddress}}</td>  
  32.       <td>{{this.EmployeePhone}}</td>  
  33.       <td>{{this.EmployeeAge}}</td>  
  34.       <td>{{this.Salary | currency: 'USD': true}}</td>  
  35.       <td>{{this.City}}</td>  
  36.       <td>{{this.CompanyName}}</td>  
  37.     </tr>  
  38.     </table>  
  39. <app-app1></app-app1>  
  40. <!--<div class='app-app1'></div>  
  41. <div app-app1></div>-->  
  42.  `,  
  43.  styles: ['table { font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} td, th {border: 3px solid #c220eb;text-align: left;padding: 3px;}]']  
  44.   
  45.    
  46.  // styleUrls: ['./app.component.css']  
  47. })  
  48. export class AppComponent {  
  49.   
  50.   EmployeeId = 1702356;  
  51.   FirstName = 'Khaja';  
  52.   LastName = 'Moizuddin';  
  53.   EmployeeName: string = this.FirstName + this.LastName;  
  54.   EmployeeDesignation = 'Software Engineer';  
  55.   DateOfJoining: Date = new Date('Mon Apr 22 2016 07:44:57');  
  56.   EmployeeAddress = 'Malakpet, Hyderabad';  
  57.   EmployeePhone = 8019804474;  
  58.   EmployeeAge = 29;  
  59.   Salary  = 20000;  
  60.   City = 'Hyderabad';  
  61.   CompanyName = 'Legato Health Technologies';  
  62. }  
Open the app1.component.ts and place the below code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-app1',  
  5.   //selector: '.app-app1',  
  6.  // selector: '[app-app1]',  
  7.  // templateUrl: './app1.component.html',  
  8.  template: `  
  9.  <h2>Below Details is Displayed From - App1Component</h2>  
  10.     <hr>  
  11.     <table>  
  12.       <tr>  
  13.         <th>EmployeeId</th>  
  14.         <th>EmployeeName</th>  
  15.         <th>EmployeeDesignation</th>  
  16.         <th>DateOfJoining</th>  
  17.         <th>EmployeeAddress</th>  
  18.         <th>EmployeePhone</th>  
  19.         <th>EmployeeAge</th>  
  20.         <th>Salary</th>  
  21.         <th>City</th>  
  22.         <th>CompanyName</th>  
  23.       </tr>  
  24.   
  25.   
  26.       <tr *ngFor = 'let employee of employeeList'>  
  27.         <td>{{employee.EmployeeId}} </td>  
  28.         <td>{{employee.EmployeeName}}</td>  
  29.         <td>{{employee.EmployeeDesignation}}</td>  
  30.         <td>{{employee.DateOfJoining | date:'longDate'}}</td>  
  31.         <td>{{employee.EmployeeAddress}}</td>  
  32.         <td>{{employee.EmployeePhone}}</td>  
  33.         <td>{{employee.EmployeeAge}}</td>  
  34.         <td>{{employee.Salary | currency: 'USD': true}}</td>  
  35.         <td>{{employee.City}}</td>  
  36.         <td>{{employee.CompanyName}}</td>  
  37.       </tr>  
  38.     </table>  
  39.   
  40.     <app-app2></app-app2>  
  41.    <!--<div class='app-app2'></div>-->  
  42. <!--<div app-app2></div>-->  
  43.   
  44.  `,  
  45.  styles:['table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th { border: 3px solid #2442ec;text-align: left;padding: 3px;}']  
  46.   //styleUrls: ['./app1.component.css']  
  47. })  
  48. export class App1Component implements OnInit {  
  49.   employeeList: any[] = [  
  50.     {  
  51.   EmployeeId : 103621,  
  52.   EmployeeName : 'Khaja Moizuddin',  
  53.   EmployeeDesignation : 'Software Engineer',  
  54.   DateOfJoining : new Date('Mon Apr 22 2016 10:30:57'),  
  55.   EmployeeAddress : 'Gacchibowli, Hyderabad',  
  56.   EmployeePhone : 8019804474,  
  57.   EmployeeAge : 29,  
  58.   Salary : 10000,  
  59.   City : 'Hyderabad',  
  60.   CompanyName : 'Legato'  
  61.  },  
  62.  {  
  63.    EmployeeId : 103622,  
  64.    EmployeeName : 'Pavan Kumar',  
  65.    EmployeeDesignation : 'S.Software Engineer',  
  66.    DateOfJoining : new Date('Tue Jul 19 2012 09:27:45'),  
  67.    EmployeeAddress : 'DLF City, Bangalore',  
  68.    EmployeePhone : 9030344566,  
  69.    EmployeeAge : 25,  
  70.    Salary : 15000,  
  71.    City : 'Bangalore',  
  72.    CompanyName : 'Infosys'  
  73.  }  
  74. ];  
  75.   constructor() { }  
  76.   
  77.   ngOnInit() {  
  78.   }  
  79.   
  80. }  
Open the app2.component.ts and place the below code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-app2',  
  5. template: `  
  6. <h2>Below Details is Displayed From - App2Component</h2>  
  7.     <hr>  
  8.     <table>  
  9.       <tr>  
  10.         <th>EmployeeId</th>  
  11.         <th>EmployeeName</th>  
  12.         <th>EmployeeDesignation</th>  
  13.         <th>DateOfJoining</th>  
  14.         <th>EmployeeAddress</th>  
  15.         <th>EmployeePhone</th>  
  16.         <th>EmployeeAge</th>  
  17.         <th>Salary</th>  
  18.         <th>City</th>  
  19.         <th>CompanyName</th>  
  20.       </tr>  
  21.   
  22.   
  23.       <tr *ngFor = 'let employee of employeeList'>  
  24.         <td>{{employee.EmployeeId}} </td>  
  25.         <td>{{employee.EmployeeName}}</td>  
  26.         <td>{{employee.EmployeeDesignation}}</td>  
  27.         <td>{{employee.DateOfJoining | date:'longDate'}}</td>  
  28.         <td>{{employee.EmployeeAddress}}</td>  
  29.         <td>{{employee.EmployeePhone}}</td>  
  30.         <td>{{employee.EmployeeAge}}</td>  
  31.         <td>{{employee.Salary | currency: 'INR': true}}</td>  
  32.         <td>{{employee.City}}</td>  
  33.         <td>{{employee.CompanyName}}</td>  
  34.       </tr>  
  35.     </table>  
  36.     <app-app3></app-app3>  
  37.     <!--<div class='app-app3'></div>  
  38. <div app-app3></div>-->  
  39.   
  40. `,  
  41.   styles:['table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th {border: 3px solid #056659ce;text-align: left;padding: 3px;}']  
  42.   //templateUrl: './app2.component.html',  
  43.   //styleUrls: ['./app2.component.css']  
  44. })  
  45. export class App2Component implements OnInit {  
  46.   employeeList: any[] = [  
  47.  {  
  48.    EmployeeId : 165893,  
  49.    EmployeeName : 'Vikas',  
  50.    EmployeeDesignation : 'S.Software Engineer',  
  51.    DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),  
  52.    EmployeeAddress : 'Electronic City, Bangalore',  
  53.    EmployeePhone : 9030344566,  
  54.    EmployeeAge : 23,  
  55.    Salary : 20000,  
  56.    City : 'Bangalore',  
  57.    CompanyName : 'TCS'  
  58.  },  
  59.  {  
  60.    EmployeeId : 1045896,  
  61.    EmployeeName : 'Vivek',  
  62.    EmployeeDesignation : 'Delivery Manager',  
  63.    DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),  
  64.    EmployeeAddress : 'Madhapur, Hyderabad',  
  65.    EmployeePhone : 9030344566,  
  66.    EmployeeAge : 23,  
  67.    Salary : 20000,  
  68.    City : 'Hyderabad',  
  69.    CompanyName : 'Microsoft'  
  70.  }  
  71. ];  
  72.   constructor() { }  
  73.   
  74.   ngOnInit() {  
  75.   }  
  76.   
  77. }  
And finally open the app3.component.ts and place the below code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-app3',  
  5.   template: `  
  6.   <h2>Below Details is Displayed From - App3Component</h2>  
  7.     <hr>  
  8.     <table>  
  9.       <tr>  
  10.         <th>EmployeeId</th>  
  11.         <th>EmployeeName</th>  
  12.         <th>EmployeeDesignation</th>  
  13.         <th>DateOfJoining</th>  
  14.         <th>EmployeeAddress</th>  
  15.         <th>EmployeePhone</th>  
  16.         <th>EmployeeAge</th>  
  17.         <th>Salary</th>  
  18.         <th>City</th>  
  19.         <th>CompanyName</th>  
  20.       </tr>  
  21.   
  22.   
  23.       <tr *ngFor = 'let employee of employeeList'>  
  24.         <td>{{employee.EmployeeId}} </td>  
  25.         <td>{{employee.EmployeeName}}</td>  
  26.         <td>{{employee.EmployeeDesignation}}</td>  
  27.         <td>{{employee.DateOfJoining | date:'longDate'}}</td>  
  28.         <td>{{employee.EmployeeAddress}}</td>  
  29.         <td>{{employee.EmployeePhone}}</td>  
  30.         <td>{{employee.EmployeeAge}}</td>  
  31.         <td>{{employee.Salary | currency:'EUR':true}}</td>  
  32.         <td>{{employee.City}}</td>  
  33.         <td>{{employee.CompanyName}}</td>  
  34.       </tr>  
  35.     </table>  
  36.   
  37.   `,  
  38.   styles:['table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th {border: 3px solid #eb3737;text-align: left;padding: 3px;}']  
  39.   //templateUrl: './app3.component.html',  
  40.   //styleUrls: ['./app3.component.css']  
  41. })  
  42. export class App3Component implements OnInit {  
  43.   
  44.   employeeList: any[] = [  
  45.     {  
  46.       EmployeeId : 165846,  
  47.       EmployeeName : 'Ramesh',  
  48.       EmployeeDesignation : 'S.Software Engineer',  
  49.       DateOfJoining : new Date('Wed Jul 20 2017 09:24:23'),  
  50.       EmployeeAddress : 'Banjara Hills, Bangalore',  
  51.       EmployeePhone : 8097984465,  
  52.       EmployeeAge : 27,  
  53.       Salary : 25000,  
  54.       City : 'Hyderabad',  
  55.       CompanyName : 'Accenture'  
  56.     },  
  57.     {  
  58.       EmployeeId : 1087564,  
  59.       EmployeeName : 'Ashish',  
  60.       EmployeeDesignation : 'Delivery Manager',  
  61.       DateOfJoining : new Date('Wed Aug 10 2012 11:02:23'),  
  62.       EmployeeAddress : 'Mehdipatnam, Hyderabad',  
  63.       EmployeePhone : 9030344566,  
  64.       EmployeeAge : 26,  
  65.       Salary : 20000,  
  66.       City : 'Hyderabad',  
  67.       CompanyName : 'Microsoft'  
  68.     }];  
  69.   
  70.   constructor() { }  
  71.   
  72.   ngOnInit() {  
  73.   }  
  74.   
  75. }  
In order to check the Output, navigate to the path where the project is created, like,  F:\NavigationBetweenComponents\NavigationBetweenComponents and execute
ng serve command. And now open the browser of your choice and navigate to http://localhost:4200/. We will get the same output for inline code as well as working with external component files.
 
The output is shown below.
 
 

Conclusion

 
In this article, we learned how to navigate from one component to another component by using three different declarations; i.e., Element Declaration, Class Declaration & Attribute Declaration.
 
In my next article, I will be working on different pipes which are available in Angular.
 
Thanks & I hope this article helps you. 


Similar Articles