Navigating Between Two Screens And Applying Directive For Dropdown

In this blog, I will be sharing how we can apply shared directives to components and implement HostBinding, HostListener, ElementRef, EventEmitter, and Output.

Introduction

 

Hi guys, I want to share how we can implement redirection from one screen to other screen in Angular 6 and explain creating and applying custom directives to a dropdown with an example.

If you are a developer looking for a chunk of code to implement in your project, then you are at the right place!!

So lets begin with the code!

 

Key points to learn:

• HostBinding
• HostListener
• ElementRef
• EventEmitter
• Output
• applying directive from shared file to components 

Step 1

 

Create the required components in the project. I have created below components with the help of the Angular CLI command.

ng g c employees
ng g c departments
ng g c employees
ng g c header

Step 2

 

Open the header.html component and paste the below code, we are applying the directive with the reference name appDropdown in the below code.

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
          <a href="#" class="navbar-brand">company Logo</a>
      </div>
      <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
              <li><a href="#" (click)="onSelect('Emp')">Employees</a></li>
              <li><a href="#" (click)="onSelect('Dept')">Department</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li class=dropdown appDropdown>
                  <a href="#" class="dropdown-toggle" role="button">More <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <li><a href="#">About Company</a></li>
                      <li><a href="#">Contact Us </a></li>
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</nav>

Step 3

 

Create a dropdown.directive.ts shared file to apply dropdown functionality. Open the dropdown.directive.ts file and paste the below code. We are using the selector appDropdown from the below code and adding it to dropdown in step 2. Make sure this file is added in module.ts because it is not created by the CLI command file. We are creating this file because we can apply this functionality in the multiple components dropdown which can reduce repeated code in the project.

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

@Directive({
    selector:'[appDropdown]'
})
export class DropdownDirective{
@HostBinding('class.open') isOpen=false;
@HostListener('document:click',['$event']) toggleOpen(event:Event){
    this.isOpen=this.elRef.nativeElement.contains(event.target)? !this.isOpen:false;
    //this.isOpen=!this.isOpen;
   }
   constructor(private elRef:ElementRef){

  }
}

Step 4

 

Open the header.ts file and paste the below code. We are implementing event emitter and @output.

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  @Output() featureSelected=new EventEmitter<string>();
  onSelect(feature: string){
      this.featureSelected.emit(feature)
  }
}

Step 5

 

Open app.Component.html file and paste the below code. featureSelected is importing from the header.html file

<app-header (featureSelected)="onNavigate($event)"></app-header>
<div class="container">
<div class="row">
    <div class="col-md-12">
        <app-employees *ngIf="loadFeature==='Emp'"></app-employees>
        <app-departments *ngIf="loadFeature!=='Emp'"></app-departments>
    </div>
  </div>
</div>

Step 6

 

Open the app.Component.ts file and paste the below code.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  loadFeature="Emp";
  onNavigate(feature: string){
    this.loadFeature=feature;
  }
}

Step 7

 

Add some text in department.html and employees.html files to check the output and run the code with the below command:

ng serve --port 4500

Below should be the output:

 

First screen

 

Second screen

 

 

Summary

 

In this blog, you have learned how to navigate from one screen to another screen and apply the shared directive functionality to the components.

 

Hope this code help you. Please share your suggestions and comments below. Thanks!