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

Question

I am trying to apply a class to an HTML element based on a click event. This works fine when setting the class property for the child component's selector from the parent component's template as seen by the following snippet from the parent component:

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

This will appropriately set the style when that item is clicked. However, I want to set an inner HTML element's class in the child component based on the same sort of click event, here's the desired target for the style for the child component:

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

Is there a way to do this that is easily supported? Or is this considered a bad practice and I should design my components to avoid this 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 is where I really want to apply the style">  
      {{ item.val }}
    </div>
  `
})
export class ChildComponent {}

Answer 1

Add a style to the child-component

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