Angular 2 ng-bootstrap ngbAlert error
<p>I had a self closing ng-bootstrap alert implemented as</p>

<pre><code>&lt;span *ngFor="let alert of alerts"&gt;
    &lt;template ngbAlert [dismissOnTimeout]="5000" [type]="alert.type"&gt;&lt;span [innerHTML]="alert.message"&gt;&lt;/span&gt;&lt;/template&gt;
&lt;/span&gt;
</code></pre>

<p>And it was working great. However, when I started a new project and copied this component as it is, it gives now</p>

<pre><code>    Promise rejection: Template parse errors:
Can't bind to 'dismissOnTimeout' since it isn't a known property of 'template'.
</code></pre>

<p>Here is my ts file if needed</p>

<pre><code>import { Input, Component } from '@angular/core';

@Component({
  selector: 'ngbd-alert-closeable',
  templateUrl: './client/app/html/components/alert-closeable.html',
  styleUrls: ['./client/app/css/components/alert-closeable.css']
})
export class NgbdAlertCloseable {

  @Input()
  public alerts: Array&lt;IAlert&gt; = [];

  public addSuccess(msg: string, alert: IAlert) {
    this.alerts.push({
      type: 'success',
      message: msg
    });
  }

  public addInfo(msg: string, alert: IAlert) {
    this.alerts.push({
      type: 'info',
      message: msg
    });
  }

  public addWarning(msg: string, alert: IAlert) {
    this.alerts.push({
      type: 'warning',
      message: msg
    });
  }

  public addDanger(msg: string, alert: IAlert) {
    this.alerts.push({
      type: 'danger',
      message: msg
    });
  }

}

interface IAlert {
  type: string;
  message: string;
}
</code></pre>

<p>What should be the problem here? It was working great previously. </p>