Adding a Directive at runtime in Angular 2

Question

I would like to add some behaviour via a directive to an element when a class is present.
In my current test the selector is the class:"next". The h5 that have the class on bootstrap of the app is being processed by the directive, but the h5 to which I apply to class at runtime is not beeing process by the directive. Why ?

I have created a plunkr that illustrate my problem:
http://plnkr.co/edit/fpgZKNLQcRvaer0SyZzC?p=preview

import {Directive, HostBinding} from '@angular/core';
@Directive({
  selector: '.next'
})
export class NextDirective{
  @HostBinding() innerText = `I'm a directive!`
  constructor() {
    console.log('NextComponent');
  }
}

    <div>
      <h5 [ngClass]="{next:hasNext}">FOO</h5>
      <h5 class="next">BAR</h5>
      <button (click)="hasNext = !hasNext">Toggle</button> has next class: {{hasNext}}
    </div>