Custom Directive – Custom input Directive in Ionic 4

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 behavior of an existing component, We will create our own custom directives using this decorator that provide metadata about the directive. Angular defines directives as components without views. In fact, a component is a directive with an associated template view.   The syntax for creating a directive on the command line.

ionic g directive name-of-directive-here

In this example, we are learning

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

Step 1: ionic start MyIonicDirective blank
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.

    Ionic 4 Directive

<ion-content padding>
      <ion-input type="text" placeholder="Username" [(ngModel)]="username" [myIonicInput]="myStyles"></ion-input>

      <ion-input type="password" placeholder="Password"></ion-input>

  <p *ngIf="myStyles.showUsername" class="hint">
    You are typing username

Step 3: Add the following code in home.ts

import { Component, OnInit } from '@angular/core';
  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage implements OnInit {
  myStyles: Object = { showUsername: false };

  constructor() {

  ngOnInit() {


Step 4: Now we are creating our own directive called ionic-input.ts in src/directives folder.
ionic g directive ionic-input

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 an object variable of Home.ts. Add the following code in directives/ionic-input.ts file.

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

  selector: '[myIonicInput]',
  // tslint:disable-next-line:use-host-property-decorator
  host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()'}

export class MyIonicInputDirective {
  @Input('myIonicInput') myStyles: any;

  constructor(private el: ElementRef) {
    el.nativeElement.onkeypress = function(e) {
      if ('~!@#$%^&*()-='.includes(String.fromCharCode(e.keyCode))) {
  onMouseEnter() {
    this.myStyles.showUsername = true;

  onMouseLeave(e) {
    this.myStyles.showUsername = false;

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './';
import { MyIonicInputDirective } from '../directives/ionic-input';

  imports: [
        path: '',
        component: HomePage
  declarations: [HomePage, MyIonicInputDirective]
export class HomePageModule {}