Learning Angular 8 - Lab Three - Component Communication And Directives

Introduction

 

This is the third article in the beginner’s series of learning Angular 8 for developers who have no prior experience and little knowledge of JavaScript /typescripts. Please go through my previous labs on Angular 8 to learn the  basics and setup.

1. Lab 1
2. Lab 2

In the previous articles, we have learned how communication within a component works from typescript code to HTML and vice versa using string interpolation, property and event binding, and two-way binding.

 

Agenda

 

Below is the agenda for this article.

• Components life cycle
• Life cycle hooks
• Component communication
  • @Input and @Output
  • Services
  • Local references
• Angular Directives:
  • Component Directives
  • Structural Directives
  • Attribute Directives
• Custom Directives

Component life cycle

 

A component has a lifecycle that is managed by an Angular framework. Its components are created and rendered and then checked for property changes. The framework destroys them before removing them from the DOM. Angular framework provides different life cycle hooks that run with certain functionality. It offers a way to write code on these hooks when they actually occur to achieve real-life cases.

 

Life cycle hooks

• ngOnchnages- It is called when a bound input property change.
• ngOnInit- It is called once the component is initialized.
• ngDocheck – it is called on every change detection runs
• ngAfterContentInit- it is called when external content is projected into the component’s view.
• ngAfterContentChecked- It is called whenever projected content has been checked
• ngAfterviewInit- It is called after component view/child view is initialized
• ngAfterViewChecked- it is called whenever view /child view is checked
• ngOnDestroy- Called just before Angular destroys the directive/component and is a very good place to clean up resources.

Ways to communicate between components

 

Now we have to learn using use cases in the real-life app, where these concepts are used to understand inter-component communication and also accessing variables and data outside of the component. Basically, data binding in the component from the outside.

 

Component communication

 

 

This is a very common use case when data communication needs to happen from parent component to child and vice versa.

1. @Input and @Output
2. Services
3. Local references

@Input and @Output parameters

 

@Input is used to pass data from parent to child component meaning the child will receive data using property defined in the child component.

 

Let see how to implement in an example:

 

Parent: - Course component Child: - Course list component

 

Think in a way you have a property that actually holds value from parent component.In course list component (child component) lets declare a variable

@Input() courseNameSelected : string =null;

In the course component HTML let’s get a paragraph element to display the value using string interpolation

<p>{{ courseNameSelected }}</p>

Coming to CourseCompoenent (parent component)

parentCourseName:string =null;

You can write any code to change value to this

ngOnInit() {
    this.parentCourseName="Angular 8 from parent using input!!!!" ;
  }

Course Component HTML

<div class="col-md-5">
    <app-course-list [courseNameSelected]="parentCourseName" ></app-course-list>
  </div>

@Output

 

@Output is used to pass data from the child to the parent component meaning parent will link a property child component and emit it through the event emitter. Parent component can call property and get data from the child.

 

Child: - Course list component Parent: - Course component

 

Course List Component

 

With the help of the Output parameter and EventEmitter class.

 

In the child component, let's define a property decorated with @Output which has a new instance of EventEmitter class of type string, there are which are a part of Angular core.

 

Also, a property that holds the data to be emitted from child.

@Output () courseNameChild=new EventEmitter<string>();
courseNameSelecedInChild:string=null;

There is a function which will be called at a button click from the child

ondatasentParent()
    {
       this.courseNameChild.emit(this.courseNameSelecedInChild);
    }
<button class="btn btn-success" (click)="ondatasentParent()">Send to Parent Compoent</button>

This is the HTML mark-up for this.

 

Parent component set up to receive the data emitted from the child.

 

A string property to receive the data emitted from child.

childCourseName:string=null;

a method to receive data from $event.

recievefromChild($event:string){
    this.childCourseName=$event;
  }

HTML mark-up

 

This is very important to understand that courseNameChild property is defined in child with @Output decorator which is hooked with a function which actually receives data with $event as a parameter. Here you can see all the previous implementation of property binding, event binding and string interpolation .

<div class="col-md-5">
      <app-course-list [courseNameSelected]="parentCourseName" (courseNameChild)="recievefromChild($event)"></app-course-list>
    </div>

<p>{{ childCourseName }}</p>

On a click of the button

 

The parent has received a string from the child and displays it.

 

 

Angular Services

 

Services are nothing but a class with a reusable piece of code that serves a unique purpose and also decouples some business logic away from the component. It modularises the app code by separating out the responsibilities and keep component lean. Services use dependency injection to be utilized across the component by getting injected in the constructor. We will take a deeper look later in the course.

 

Basically, it will show another way to communicate between components.

 

Taking an example of logging functionality which is common to every component. Rather reparenting the logging code in every component, a logging service will be created which later can be injected in component

 

I have created a service named course.service.ts

import { Injectable } from '@angular/core';
import { Course} from './course.model';

@Injectable({providedIn:'root'})
export class CourseService
{
   courses: Course[]=[
       new Course('Angular 8 ', 'Learning Angular 8 !!!'),
       new Course('React Js', 'Learning react  !!!'),
       new Course('webapi Core 8 ', 'Learning asp.net core !!!'),
       new Course('Azure', 'Learning Azure  !!!'),
       new Course('Mongo DB', 'Learning MongoDB !!!')
];
    getCourses()
    {
        return this.courses.slice();
    }
}

This service is very simple example service which has method and it returns list of course with name and description in it.

 

Now we need to know how it can be used.

import { Component, OnInit , Input} from '@angular/core';
import {CourseService} from '../course.service';
import {Course} from '../course.model';

@Component({
  selector: 'app-course-list',
  templateUrl: './course-list.component.html',
  styleUrls: ['./course-list.component.css']
})
export class CourseListComponent implements OnInit {

  courses: Course[]=[];
  statusMessage:string = "No course found!!!!";
  result : number=10;
  isDisabled= false;
  isData=false;
  courseName="";

  constructor(private courseService:CourseService) {
    setTimeout(() => {
      this.isDisabled=true;
    }, 5000);
  }

  ngOnInit() {
      this.courses= this.courseService.getCourses();
      console.log(this.courses);
  }
constructor (private courseService:CourseService) { }

You can inject the service which is required in the component constructor by informing angular we need the service instance here in this component and once you have the service instance available you can call the require method to communicate using this service.

 

Providers for service: registrations

 

Service needs to be registered to at least one provider of any service you are going to use. Your register providers are in the metadata of the service

1. @Injectable() decorator- Register a provider with the root injector for your service by including provider metadata in the @Injectable()
   
   @Injectable({ providedIn: 'root', })
   
   Registering service at the root level, a single, shared instance of service is created and injects it into any class that asks for it.

2. @NgModule()– Register a provider with a specific NgModule, the same instance of a service is available to all components in that NgModule.
   
   @NgModule({providers: [ service1, service2], ... })

3. @Component()metadata- Register a provider at the component level, a new instance of the service with each new instance of that component.
   

   @Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
    providers: [ Service1]
   })

Cross Component Communication using Services

 

It will be very easy with services to communicate by using event emitter and services.

 

Let’s understand with a user case and demo.

 

There are two components course list and course where you want to send course name on click of button in course list component using services.

 

Let’s create a service course service which will help in commutation between these components.

 

Course Service

import { Injectable , EventEmitter} from '@angular/core';
import { Course} from './course.model';

@Injectable({providedIn:'root'})
export class CourseService
{
   courseSelected=new EventEmitter<Course>();

   courseNameSelected=new EventEmitter<string>();

   courses: Course[]=[
       new Course('Angular 8 ', 'Learning Angular 8 !!!'),
       new Course('React Js', 'Learning react  !!!'),
       new Course('webapi Core 8 ', 'Learning asp.net core !!!'),
       new Course('Azure', 'Learning Azure  !!!'),
       new Course('Mongo DB', 'Learning MongoDB !!!')
];
    getCourses()
    {
        return this.courses.slice();
    }
}

In course service, lets create a string property which holds new event emitter of type string.

courseNameService: string =null;
ngOnInit() {
  this.courses= this.courseService.getCourses();

  this.courseNameSelecedInChild="Angular 8 from child compoement !!!!";
  this.courseNameRef= "Angular 8 from child compoement with reference !!!!"
  this.courseNameService="Angular 8 from child compoement using service !!!!"
  }

ngOnInit() , I have assign a string which I want to send to a course component, which is the parent one.

ondatasentParent()
  {
     this.courseService.courseNameSelected.emit(this.courseNameService);
  }

On a button click using the course service you need to emit the course name.

 

Parent– Course Component which will receive course name sent from service.

namefromService:string='';

You need to subscribe to the event to get the value emitted from child component.

ngOnInit() {
    this.parentCourseName="Angular 8 from parent using input!!!!" ;
    this.courseService.courseNameSelected.subscribe(
      (name:string)=>{
            this.namefromService=name;
      });
  }

In simple words, we have created an event using EventEmitter and emitted the event with data from the button click in course list component which later subscribed in parent component using service instance and read the values emitted from child.

<p> {{ namefromService}}</p>

 

I have attached the source code with this article which you can download later and play with it.

 

Local Reference

 

Local references a way to communicate from HTML to component typescript code and also using @view child and afterViewinit lifecycle hook.

 

HTML code

<div class="row">
  <div class="col-xs-5">
      <input type="text" class="form-control" #courseName>
      <br>
      <button class="btn btn-primary" (click)="onAddCourse(courseName)"
          [disabled]="!isDisabled"
          >Add New Course</button>
  </div>
  <p>{{ name }}</p>

</div>

Type script code: Basically, courseName is of HTMLInputElement whose reference has been passed and name variable will hold this value and passed and displayed using string interpolation.

name:string="";
onAddCourse(courseName:HTMLInputElement)
  {
       this.name=courseName.value;
  }

There is another way also to achieve by Using @ViewChild

@ViewChild('courseName', { static:false}) courseName : ElementRef
  name:string="";
onAddCourse(courseName:HTMLInputElement)
  {
       this.name= this.courseName.nativeElement.value;
  }

But this is not the actually use case we are trying to achieve in here. Our goal was to do inter-component communication.

 

Child Component

 

Here courseNameRef is a string type which holds data which will be sent to parent.

courseNameRef: string = '';

 ngOnInit() {
     this.courseNameRef= "Angular 8 from child compoement with reference !!!!"
  }

Parent Component

import { Component, OnInit, ViewChild, ElementRef , AfterViewInit } from '@angular/core';
import { CourseListComponent} from './course-list/course-list.component'

@ViewChild(CourseListComponent , { static:false}) childReference;

 ngAfterViewInit()
  {
    this.nameRef= this.childReference.courseNameRef;
  }

HTML code

<p>{{ nameRef }}</p>

By doing these changes in the parent component we can achieve the communication.

 

Here you can see nameRef is being assigned with the child component’s courseNameRef. This will be available on ngAfterViewInit hook as the child component will be fully available on this hook only.

 

Angular Directives

 

Directives are the building blocks for any angular application. These are used for HTML DOM manipulation. HTML can be extended to achieve a more efficient HTML response.

It has been divided into three categories.

 

Component Directives

 

Components are directives with a template that instructs angular how to be processed, instantiated and used at runtime meaning selector of the component used instruct angular to inject HTML and typescript code to build output.

 

Structural Directives

 

Structural directives start with a * sign and look like a normal HTML attribute. These directives are used to manipulate and change the structure of the dom elements meaning it adds or removes elements from dom.

 

There are a lot more directive but below are most comply used one.

 

*ngIf

 

ngIf Directives is used to add or remove HTML Elements in dom where in expression should return a Boolean value.

<p *ngIf="condition"> condition is true and ngIf is true. </p>
<p *ngIf=”! condition">condition is false and ngIf is false.</p>

If the expression is false then the element is removed, otherwise element is inserted. It does not hide the DOM element rather removes the entire element along with its subtree from the DOM.

 

This directive can be used in different ways as per your use case. I will be demonstrating with a very simple user case of showing and hiding the HTML element with a message.

 

Behind the scene it is adding and removing the element.

<div class="row">
    <div class="col-xs-12">
        <div *ngIf="!isData">
            <p>{{ statusMessage }}</p>
        </div>

        <div *ngIf="isData">
                <p> {{ status Message }}</p>
            </div>
    </div>
</div>

*ngFor

*ngFor directive is used iterate in HTML element of HTML template once per each item. 

 

Here you can see the *ngFor="let student of students" basically it iterates through the list and provide data in each interaction to work with. This directive is very commonly used in real-world projects.

<div class="row">
    <div class="col-xs-7">
        <a *ngFor="let student of students"
             [ngClass]="{'highlight': student.Status==='Active'}"
            style="cursor: pointer;"
            [routerLink]="[index]"
            routerLinkActive="active"
            class="list-group-item clearfix"
          >
            <div class="pull-left" >
                <h4 class="list-group-item-heading">{{student.name}}</h4>
                <p class="list-group-item-text">{{student.Course}}</p>
            </div>
        </a>
    </div>
  </div>

Structural directive starts with * like *ngIf , *ngFor , behind the scene angular transforms to something which can be used as angular binding so that it can be available to element as there is nothing called * in angular. It is there only to recognise the some structural directive and get this transformed to be used by elements.

 

Attribute Directives

 

Attribute directives are used to change the look and behavior of the DOM elements.

 

ngClass Directive

 

The ngClass directive is used to add or remove CSS classes to an HTML element. Basically, dynamical applying CSS to Dom element.

 

[ngClass]="{'highlight': student.Status==='Active'}"

 

Above you can see [ngClass] which actually sets a class highlight on the basis of student status.

<div class="row">
    <div class="col-xs-7">
        <a *ngFor="let student of students"
             [ngClass]="{'highlight': student.Status==='Active'}"
            style="cursor: pointer;"
            [routerLink]="[index]"
            routerLinkActive="active"
            class="list-group-item clearfix"
          >
            <div class="pull-left" >
                <h4 class="list-group-item-heading">{{student.name}}</h4>
                <p class="list-group-item-text">{{student.Course}}</p>
            </div>
        </a>
    </div>
  </div>

Student component

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

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {

  constructor() { }

  students: any[] = [
    {
      "name": "Abhishek Singh ",
      "Course": 'Angular 8',
      "Status" :"Active"
    },
    {
      "name": "David  Banner",
      "Course": 'React Js',
      "Status" :"Inactive"
    },
    {
      "name": "Rohan Kumar",
      "Course": 'React Js',
      "Status" :"Active"
    },
    {
      "name": "Priya Soni",
      "Course": 'Asp.net core ',
      "Status" :"Active"
    },
    {
      "name": "Rajeev Nigam",
      "Course": 'MongoDB',
      "Status" :"Inactive"
    }
  ];

  ngOnInit() {
  }

}

 

 

ngStyle Directive

 

The ngStyle directive help in modifying the style of an HTML element using the expression basically you can dynamically change the style of your HTML element.

[ngStyle]="{ 'color': 'white'}"

Working with the same example ngStyle can also be used to set style CSS to a Dom.

 

 

 

In this example, I have set up font color from div to white using ngStyle.

 

Dynamic values in the object literal that you assign to ngStyle can be JavaScript. Expressions which are evaluated and the result of that expression is used as the value of the CSS property. It need not be inline, you can use the function to evaluate the value or call an expression to assign the value whatever you feel comfortable doing this.

 

Function getColor() method is called as below.

 getColor(status:string) {
    switch (status) {
      case 'Active':
        return 'Red';
      case 'Inactive':
        return 'Black';
    }
  }

[ngStyle]="{'color': getColor(student.Status)}"

Creating your own directive

 

Header Highlighter directive

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

@Directive({
    selector:'[appheaderhighlighter]'
})
export class HeaderHighlighter implements OnInit
{
    constructor(private elmentref: ElementRef){}

    ngOnInit()
    {
        this.elmentref.nativeElement.style.backgroundColor='yellow';
    }
}

Applying custom attribute directive to the paragraph element, as shown below

<p appheaderhighlighter >Student List</p>

 

This is a custom directive to highlight the header, but this method doesn't have the best way to achieve the functionality. Here, you can see we have accessed the property directly which is not best practice as some of the user case where angular uses DOM before it actually loads it might cause some issues.

 

Let work together to improve our directive.

 

Renderer2

 

It extends this base class to implement custom rendering. Angular renders a template into DOM. custom rendering can be used to intercept rendering calls or to render to something other than DOM.

 

 

import { Directive, Renderer2 , OnInit, ElementRef} from '@angular/core';

@Directive({
    selector:'[apphighlighetrImproved]'
})
export class HeaderHighlighterImproved implements OnInit{
    constructor(private elmRef:ElementRef,private rederer:Renderer2){}

    ngOnInit()
    {
    this.rederer.setStyle(this.elmRef.nativeElement,'backgroundColor','gray');
    }
}

apphighlighetrImproved is attribute directive.

<p apphighlighetrImproved >Student List</p>

I have used the same as attribute to the paragraph element.

 

Here is the result.

 

 

I am attaching a source code with this article.

 

Steps to run:

1. Download the class-app zip.
2. Open in vs code editor.
3. Open the terminal in editor and run “npm install”
4. Run “ng serve”

Conclusion

 

The next article in the series will be deep dive in Angular routing.

 

Keep learning and keep smiling.

 

Resources and Useful Links

 

Thanks to the authors of the below links