Custom Directive – Custom input Directive

A directive is instructions or guidelines for rendering a template. A class decorated with @Directive to attached metadata is called a directive. There are three types of directive supported by Angular, namely

  1. Component Directive
  2. Structural Directive
  3. Attribute Directive

 

Directive extends the HTML language through directives to make page templates more dynamic and customization. Ionic by default we have lots of directives, eg ngFor, ngIf .. some Directives are an important concept for any Angular, directive modifies the behaviour of an existing component, We will create our own custom directives using this decorator that provide metadata about the directive. Angular 2 defines directives as components without views. In fact, a component is a directive with an associated template view.   The syntax for creating directive on the command line.

ionic g directive name-of-directive-here

In this example, we are learning

  1. Creating custom directive
  2. Attribute directive that prevents certain characters for being input in the username field.
  3. Showing DOM node saying – You are typing username while user typing his name in user input field.

Step 1: ionic start MyIonicDirective blank –v2
Step 2: Add the following code in home.html. In home.html we have two important concepts, first, we have an attribute called myIonicInput in an ion-input component of the name field. Second, we have myStyles object is used to toggle the visibility of the element.

<ion-header>
  <ion-navbar color="danger">
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <ion-list>
 
    <ion-item >
      <ion-input type="text" placeholder="Username" [(ngModel)]="username" [myIonicInput]="myStyles"></ion-input>
    </ion-item>
 
    <ion-item>
      <ion-input type="password" placeholder="Password"></ion-input>
    </ion-item>
 
  </ion-list>
  <p *ngIf="myStyles.showUsername" class="hint">
    You are typing username
  </p>
 
  <ion-fab bottom center>
    <button ion-fab>GO</button>
  </ion-fab>
</ion-content>

Step 3: Add the following code in home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private myStyles: Object = {showUsername: false};
 
  constructor(public navCtrl: NavController) {input
  }
}

Step 4: Now we are creating our own directive called ionic-input.ts in src/directives folder. To create custom directive we need to import both Directive and ElementRef component in order to manipulate the DOM. In our case, we have input that is mystyle. We should import input component. myIonicInput selector will query the DOM and will trigger actions on that DOM node based on the event. For event detection on DOM, will map event name to the class methods. For example, mouseenter() event will trigger a call to the
onMouseEnter() methods in the directive class. The ElementRef is pointing to the same DOM where you placed our attribute directive. You modify
the behavior on the keyboard using el.nativeElement.onkeypress so that no special character won’t accept as input.
Entering the special character will trigger e.preventDefault and nothing will happen. The @Input decorator is used to declare that you will bring a variable from the template. This is the reason we must have the square bracket in the [myIonicinput]=”myStyles”. myIonicinput is object variable of Home.ts.

import {Directive, ElementRef, Input} from '@angular/core';
 
@Directive({
  selector: '[myIonicInput]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class MyIonicInputDirective {
  @Input('myIonicInput') myStyles: any;
   
  constructor(private el: ElementRef) { 
    el.nativeElement.onkeypress = function(e) {
      console.log(e);
        
      if ('~!@#$%^&*()-='.includes(String.fromCharCode(e.keyCode))) {
        e.preventDefault();
        return;
      }
    }
  }
  onMouseEnter() { 
    this.myStyles.showUsername = true;
  }
   
  onMouseLeave(e) { 
    this.myStyles.showUsername = false; 
  }
}
}

Step 5 We need to import {MyIonicDirective} from ‘../directives/my-ionic-input’;
Add we have to add this directive reference in @NgModule declaration only.