Angular4 basic directive not working

Question

I am trying to change the background color of a div using a custom directive, but its not working, below is the code of my component generated using angular cli.

import {
  Component,
  Directive,
  Renderer,
  ElementRef,
  NgModule,
  OnInit } from '@angular/core';

@Directive({
  selector:"[ccCardHover]"
})
class CardHOverDirective {
  constructor(private el: ElementRef,
              private renderer: Renderer) {
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'blue');
  }
}
@Component({
  selector: 'app-custom-directive',
  template: `
  <div class="panel panel-default" ccCardHover>
    <p class="panel-body">Body text</p>
  </div>`
})
export class CustomDirectiveComponent implements OnInit {
  ngOnInit() {}
}

Any ideas why is not making the background of "panel panel-default" blue?

Answer 1

After a more careful review of my code, I noticed two things

1. Export the custom directive:

   export class CardHoverDirective { ..

2. Import and declare it in the app.module.ts