Custom directive is not working for angular 6: - angular6

Question

Changing backgound color of the paragraph tag using custom directive not working for angular 6 .
#CustomDirective
import { Directive,ElementRef,HostListener } from '#angular/core';
#Directive({
selector: '[appSteps]'
})
export class StepsDirective {
constructor(private elementref: ElementRef){ }
#HostListener('mouseenter')onmouseenter()
{
this.elementref.nativeElement.style.backgroundColor = 'yellow';
}
#HostListener('mouseleave')onmouseleave()
{
this.elementref.nativeElement.style.backgroundColor = 'null';
}
}
#ModuleCreated : Added my directive here and using this module in appmodule.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {StepsDirective} from '../steps.directive';
#NgModule({
imports: [
CommonModule
],
declarations: [StepsDirective]
})
export class StartModule { }
#AppComponent.html-Hosting my custom directive ontag
<p appSteps>My Hero Academia</p>
#app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { Signup_Component } from './signup/signup.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { StartModule } from './start/start.module'; *Module created
#NgModule({
declarations: [
AppComponent,
Signup_Component,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
StartModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

you should first export the module that you declare your directive in then import it any where you want to use
#NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }