Generating directives and pipes

A class decorated with @Directive to attach metadata is called a directive. It is an instruction or guideline to render the template.

We have seen generating components and services. Now, let's generate directives and pipes using Angular CLI. We will start with creating a directive named book. Run the following command to generate the directive:

ng generate directive book

The outcome of executing the command is shown here:

Executing this command creates two files, namely, book.directive.spec.ts and book.directive.ts respectively. Here is the code snippet of book.directive.ts:

import { Directive } from '@angular/core';
 @Directive({
    selector: '[appBookish]' 
   }) 
  export class BookishDirective { 
      constructor() { } 
  } 

The code snippet of book.directive.spec.ts is shown here:

/* tslint:disable:no-unused-variable */ 
import { TestBed, async } from '@angular/core/testing';
import { BookDirective } from './book.directive'; 

describe('Directive: Book',...