If you want to create a own custom directive then you have to follow this steps. Here, i have created a directive with name fontcolor.directive.ts . its change the color and underline when some mouse event occurs. First, Generate a directive using Angular CLI using below coomand. ng generate fontcolor then you push below code. You can

Create a title service class name like title.service.ts and put below code. import { Injectable } from ‘@angular/core’; import ‘rxjs/add/operator/filter’; import ‘rxjs/add/operator/map’; import ‘rxjs/add/operator/mergeMap’; import { Router, NavigationEnd, ActivatedRoute } from ‘@angular/router’; import { Title } from ‘@angular/platform-browser’; const APP_TITLE = ‘My App’; const SEPARATOR = ‘ | ‘; @Injectable() export class TitleService { constructor(