Angular 8 Session 6: Nested Components In Angular

Nested Components

A component with in another component called as Nested Component.

Nested defines a parent-child relationship.

Here, the one calls another component termed as Parent Component and the one being called as Child Component.

In this example we have one main component (app.component) and child component (employee.component) as shown in below diagram.

Creating of child component

Step 1: Here we are creating the child component “employee” using angular cli using the below command.

          ng g c Employee/employee-list

Step 2: Create an interface as model for employee i.e. ng g interface Model/IEmployee 

IEmployee.ts

} interface IEmployee {

    EmployeeId: number;

    EmployeeName: string;

    Gender: string;

    EmailId: string;

    Department: string;

}

Step 3: Generate and initialise an employee list in child component.

employee-list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-employee-list',

  templateUrl: './employee-list.component.html',

  styleUrls: ['./employee-list.component.css']

})

export class EmployeeListComponent implements OnInit {

  employeeList: IEmployee[];

  constructor() { }

  ngOnInit() {

    this.employeeList = [

      { EmployeeId: 10001, EmployeeName: "Radha Mohan", Department: "IT", EmailId: "radha.mohan@domain.com", Gender: "Male" },

      { EmployeeId: 10002, EmployeeName: "Himanshu Sekhar", Department: "Finance", EmailId: "himanshu.sekhar@domain.com", Gender: "Male" },

      { EmployeeId: 10002, EmployeeName: "Saanvi", Department: "HR", EmailId: "saanvi.rs@domain.com", Gender: "Female" }

    ];

  }

} 

Step 4: Design corresponding html to render employees.

employee-list.component.html

<div align="center" style="padding-top: 2em;">

    <table width="50%">

        <thead>

            <tr style="padding:10px;">

                <th>Employee Id</th>

                <th>Employee Name</th>

                <th>Gender</th>

                <th>Email Id</th>

                <th>Department</th>

            </tr>

        </thead>

        <tbody>

            <tr *ngFor="let emp of employeeList">

                <td>{{emp.EmployeeId}}</td>

                <td>{{emp.EmployeeName}}</td>

                <td>{{emp.Gender}}</td>

                <td>{{emp.EmailId}}</td>

                <td>{{emp.Department}}</td>

            </tr>

        </tbody>

     </table>

</div> 

Step 5: Register employee-list component in app.module.ts.

app.module.ts

import { EmployeeListComponent } from './Employee/employee-list/employee-list.component';

@NgModule({

  declarations: [

    AppComponent,

    EmployeeListComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent] 

}) 

Nesting child with parent component

Append the child selector in parent.

<div align="center">

    <h1>Welcome to {{myData}}Details Application</h1>

</div>

<div>

    <app-employee-list></app-employee-list>

</div>

Angular 8 Session 5: Template and TemplateUrl In Angular

Template & TemplateUrl

Both template & templateUrl used to render html content in an angular application.

In our last session, we used in-lined template. An in-line template can be used but its only recommended for a short content.

To add in-line template we are using a pair of backtick character (`).

@Component({

  selector: 'my-app',

  templateUrl: `

  <div align="center">

    <h1>Welcome to {{myData}} Application</h1>

  </div>

  `,

  styleUrls: ['./app.component.css']

})

Even we can use either a single quote or a double quote too to append an in-lined template in component, but when it is suppose to be for one line.

@Component({

  selector: 'my-app',

  template: '<div align="center"><h1>Welcome to {{myData}} Application</h1></div>',

  styleUrls: ['./app.component.css']

})

OR

@Component({

  selector: 'my-app',

  template: "<div><h1>Welcome to {{myData}} Application</h1></div>",

  styleUrls: ['./app.component.css']

})

When there is a multi-lined html expected we need to render it through backtick character only.

But it’s a recommendation and advantage to use templateUrl instead an in-lined template because of no IDE intellisense, formatting feature not supported, maintainability is difficult, losing readability, violating SoC etc...

The advantage of having a templateUrl is we can get benefited from all those are not supported by template discussed in last line.

@Component({

  selector: 'my-app',

  templateUrl: './app.component2.html',

  styleUrls: ['./app.component.css']

})

Angular 8 Session 4: Components In Angular

Components In Angular

In the world of Angular everything is a component. It is the logical block or building block of an Angular application.

A component must have the following things:

Template- This part is the UI/View part of an angular component contains direct HTML or a .html file to load the user interface. It has bindings, directives etc…

Class- It is just like any Object-Oriented Programming Language such as C#, Java etc… which contains objects, properties and methods. It meant to have supply data to view and vice versa and plays role of code behind. Usually we are using TypeScript to write a class.

Metadata- We use this block to add metadata to an angular application. A normal class converts to a component when it gets decorated with @Component({ }) decorator.

A component declaration can be done by invoking ‘@angular/core’ library.

A class is decorated with a decorator (@Component ({ })) which adds metadata to angular class.

An component has several properties. Some of common properties we need to run a component such as selector, template, templateUrl, providers etc… For complete list of properties browse the below url from angular official reference.

          https://angular.io/api/core/Component

app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  template: `

  <div align="center">

    <h1>{{"Welcome to "+myData+" Application"}}</h1>

  </div>

  `,

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular8Demo';

  myData = "Hello World";

}

Here selector becomes a directive that is responsible to load the html content provided by template or templateUrl i.e. <my-app> </my-app>A class is decorated with a decorator (@Component ({ })) which adds metadata to angular class.

template loads the in-lined html and templateUrl loads the html content from url given.

Class acts as code-behind file which supplies and accepts data to and from template/view.

export keyword is used to enable a component to be used by another component by importing it.

Angular 8 Session 3: Creating Hello World App

Creating Hello World App

Here, we are creating a Hello World App for the 1^st interaction with Angular.

Open a command prompt (node command prompt recommended), better to have in admin mode.

Create a new application.

ng new <<App Name>>       i.e. ng new Angular8Demo

To open the project in VS Code using command prompt.

Code . and hit enter

To compile and run the application.

ng  serve         // To compile / transpile the code

ng  serve --o   // To compile / transpile & run

     The default bootstrap component as per angular architecture is AppComponent.

app.component.ts

import { Component } from '@angular/core'; 

@Component({

  selector: 'app-root',

  templateUrl: './app.component2.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular8Demo';

  myData = "Hello World";

}

app.component.html

<div align="center">

    <h1>{{"Welcome to "+myData+" Application"}}</h1>

</div>