Project 7: Restaurant Menu

Angular Engineer

Builds on these lessons

Component Task

Objective

Attribute directives change how an element looks or behaves without adding or removing it from the DOM. You can write your own with @Directive, injecting ElementRef to reach the host element directly.

You're building a restaurant menu.

Task: write a standalone HighlightDirective (selector [appHighlight]) that sets the host element's background to yellow, and a MenuItemComponent that applies it to a special dish's <li>.

component.ts

import { Component, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}

@Component({
  selector: 'app-menu-item',
  standalone: true,
  imports: [HighlightDirective],
  template: `<li appHighlight>{{ dishName }}</li>`
})
export class MenuItemComponent {
  dishName = "Chef's Special: Grilled Salmon";
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →