Is there any way to attach a directive to a component in Angular2?

Question

I have a simple panel component:

<app-box></app-box>

And it has a template:

    <div class="box">
      <div class="box-header">
      <h3>Box Header</h3>
      <small>Subtitle of this box</small>
      </div>
    </div>

Is there anyway I can use a directive attached to it so I can manipulate the DOM like this:

<app-box subtitle="false"></app-box>

When subtitle is false I want to remove the small element.

Also, is this a wrong technique?

Answer 1

use inputs:

@Input() subtitle: boolean;

and in your html:

<small *ngIf="subtitle">...</small>