WodenWang820118

// custom directive used like *ngIf
// the "*" instantiates an ng-template and inject it to DOM
// possible use case could be showing and hiding content depending on user roles
// ngx, the x is a convention explicitly saying the directive is the custom one
// [ngx-unless]

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({

WodenWang820118

// ng g directive directives/highlighted
// the directive separates CSS implementation out of component and
// allow complex CSS as an independent concern
// [highlighted.directive.ts]
import {
  Directive,
  EventEmitter,
  HostBinding,
  HostListener,

WodenWang820118

// supposed in the standalone courseCardComponent
// extract template and class Input() property only
template: `
    <ng-container *ngIf="course">
      <div class="course-card" [ngClass]="cardClasses()">
        <div class="course-title">
          {{ cardIndex + " " + course.description }}
        </div>