Wednesday, 13 September 2017

Custom Directive - Angular 2

Building directives in Angular 2+ is not much different than building components. After all, components are just directives with a view attached. In fact, there are three kinds of directives in Angular: components, attribute directives and structural directives.

Types of Directives
Angular 2 categorizes directives into 3 parts:

  1. Directives with templates known as Components
  2. Directives that creates and destroys DOM elements known as Structural Directives
  3. Directives that manipulate DOM by changing behavior and appearance known as Attribute Directives

In this project i'm creating a directive that highlight any element with yellow colour on hover event.

Create Directive Folder inside src/app/ folder.
Add a custom directive inside Directive  folder

       cd Directive <Enter>
       ng g d highlight --spec false <Enter>


 It'll add a highlight.directive.ts file.
Open the file and replace the following code.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[Highlight], .Highlight'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }
  
  @HostListener('mouseover') onmouseover() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
  @HostListener('mouseleave') onmouseleave() {
    this.el.nativeElement.style.backgroundColor = null;
  }
 }

Now add a Component, in which you will use the above Highlight directive.

          ng g c Directory -is --flat --spec false <Enter>
[You can also see the command in the above image]

It'll add two file
    directory.component.ts
    directory.component.html

In directory.component.ts file you dont need to write anything. open the directory.component.html file. and add the below code.


1
2
<h2 class="Highlight">Custom Directive- Class Based</h2>
<h2 Highlight>Custom Directive- Attribute Based</h2>

Now you are done with the code for Custom Directive.
To run the page, bootstrap the DirectoryComponent in app.Module.ts file.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HighlightDirective } from './Directive/highlight.directive';
import { DirectoryComponent } from './Directive/directory.component';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
    DirectoryComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [DirectoryComponent]
})
export class AppModule { }

Add the selector of directive component in index.html file.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgDemo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!-- <app-root></app-root> -->
<app-directory></app-directory>
</body>
</html>

Now save your Project and run from integrated terminal.

ng serve <Enter>

See the Output. when you hover the mouse on h2 element it'll highlight in yellow colour.


Thanks and Regards
Suraj K. Mad.

0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (10) Web Service (1) XMl (1)