angular custom directive for class binding

Question

My directive

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {

  @Input('highlight') isHighlighted = false;

  constructor() {}

  @HostBinding('class')
  get function () {
    return {
      'highlighted': this.isHighlighted,
      'bordered': this.isHighlighted
    }
  }
}

using directive as:

<course-card (courseSelected)="onCourseSelected($event)"
             [course]="course"
             [highlight]="highlight">

where highlight is BOOLEAN

classes are correctly applied in the DOM as: class="bordered highlighted".

highlighted class has effect but there is no effect for bordered class

style classes are defined as:

.highlighted{
    box-shadow: 2px 2px 2px red;
}

.bordered {
    border-top: 5px solid lightgreen;
}

I don't know why this is happening

Answer 1

Angular component by default would have display:inline for all component. Due to which the styles are not visible to screen change course component display type to block

course.component.css

:host { display: block; }

Working Example