Angulaire 2 - Appliquer le style conditionnel à une directive de l'enfant de l'élément HTML

Je suis en train d'appliquer une classe à un élément HTML basé sur un événement click. Cela fonctionne bien lors de la définition de la propriété de classe pour les enfants du composant sélecteur du composant parent du modèle comme on le voit par l'extrait suivant du composant parent:

[class.bordered]='isSelected(item)'

Ce sera réglé de manière appropriée le style lorsque cet élément est cliqué. Cependant, je tiens à mettre un à l'intérieur de l'élément HTML de la classe de l'enfant composant basé sur le même genre d'événement click, voici la cible souhaitée pour le style que pour le composant enfant:

template: `
  <div class="This is where I really want to apply the style">  
    {{ item.val }}
  </div>
`

Est-il un moyen de faire ce qui est facilement pris en charge? Ou est-ce considéré comme une mauvaise pratique et je doit la conception de ma composants afin d'éviter ce type de conditionnel style de situation?

Code complet:

@Component({
  selector: 'parent-component',
  directives: [ChildComponent],
  template: `
    <child-component
      *ngFor='#item of items'
      [item]='item'
      (click)='clicked(item)'
      [class.bordered]='isSelected(item)'>
    </child-component>
  `
})
export class ParentComponent {
  items: Item[];
  currentItem: item;

  constructor(private i: ItemService) {
    this.items = i.items;
  }

  clicked(item: Item): void {
    this.currentItem = item;
  }

  isSelected(item: Items): boolean {
    if (!item || !this.currentItem) {
      return false;
    }
    return item.val === this.currentItem.val;
  }
}


@Component({
  selector: 'child-component',
  inputs: ['item'],
  template: `
    <div class="This is where I really want to apply the style">  
      {{ item.val }}
    </div>
  `
})
export class ChildComponent {}