angular2 template - Angular 2 - Apply conditional style to a directive's child HTML element -

i trying apply class html element based on click event. works fine when setting class property child component's selector parent component's template seen following snippet parent component:

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

this appropriately set style when item clicked. however, want set inner html element's class in child component based on same sort of click event, here's desired target style child component:

template: `   <div class="this want apply style">       {{ item.val }}   </div> ` 

is there way supported? or considered bad practice , should design components avoid sort of conditional styling situation?

full code:

@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 want apply style">         {{ item.val }}     </div>   ` }) export class childcomponent {} 

add style child-component

@component({   selector: 'child-component',   inputs: ['item'],   template: `     <div class="this want apply style">         {{ item.val }}     </div>   `,   styles: [`     :host(.bordered) > div {     // if selector doesn't work use instead     // child-component.bordered > div {       border: 3px solid red;     }   `], }) export class childcomponent {}