*ngIf="condition"*ngFor="let item of items"@Directive({ selector: '[w3Highlight]' })<div w3Highlight></div>

Notes:

• Related: SeeTemplates,Data Binding,Conditional Rendering, andLists.

<p *ngIf="items.length > 0">We have {{ items.length }} items</p><li *ngFor="let item of items">{{ item }}</li>

Example

import { bootstrapApplication } from '@angular/platform-browser';import { Component } from '@angular/core';import { CommonModule } from '@angular/common';@Component({  selector: 'app-root',  standalone: true,  imports: [CommonModule],  template: `    <h3>Directives</h3>    <p *ngIf="items.length > 0">We have {{ items.length }} items</p>    <ul>      <li *ngFor="let item of items">{{ item }}</li>    </ul>    <button (click)="toggle()">Toggle Items</button>  `})export class App {  show = true;  get items() { return this.show ? ['Angular', 'Components', 'Directives'] : []; }  toggle() { this.show = !this.show; }}bootstrapApplication(App);

<app-root></app-root>

Run Example »

Notes:

• CommonModule required: ImportCommonModule when using built-in directives in standalone components.
• Star syntax is sugar:*ngIf/*ngFor expand to<ng-template>; the DOM nodes truly appear/disappear.
• Avoid heavy work in templates: Don't call expensive functions in*ngFor. Compute in the component instead. For long lists, seeLists and usetrackBy.
• One structural per host: Don't put two* directives on the same element. Wrap one in<ng-container> if needed.

<ng-container *ngIf="loggedIn; else loggedOut"></ng-container><ng-template #loggedOut>...</ng-template><ng-container *ngIf="hasAccess; then accessTpl; else noAccessTpl"></ng-container>

Example

import { bootstrapApplication } from '@angular/platform-browser';import { Component } from '@angular/core';import { CommonModule } from '@angular/common';@Component({  selector: 'app-root',  standalone: true,  imports: [CommonModule],  template: `    <h3>ngIf with else</h3>    <button (click)="loggedIn = !loggedIn">      {{ loggedIn ? 'Log out' : 'Log in' }}    </button>    <ng-container *ngIf="loggedIn; else loggedOut">      <p>Welcome back, {{ user }}!</p>    </ng-container>    <ng-template #loggedOut>      <p>Please log in to continue.</p>    </ng-template>    <hr>    <h4>ngIf then/else syntax</h4>    <button (click)="hasAccess = !hasAccess">      Toggle Access ({{ hasAccess ? 'granted' : 'denied' }})    </button>    <ng-container *ngIf="hasAccess; then accessTpl; else noAccessTpl"></ng-container>    <ng-template #accessTpl>      <p>Access granted.</p>    </ng-template>    <ng-template #noAccessTpl>      <p>Access denied.</p>    </ng-template>  `})export class App {  loggedIn = false;  user = 'Angular User';  hasAccess = true;}bootstrapApplication(App);

<app-root></app-root>

Run Example »

Notes:

• Template refs: The#ref you pass toelse/then references an<ng-template>. Remember this code won't exist in the DOM until rendered.
• Avoid extra DOM: Use<ng-container> to group structure without adding extra elements.

@Directive({ selector: '[w3Highlight]' })<div [w3Highlight]="'lightyellow'">Hover me</div>

Example

import { bootstrapApplication } from '@angular/platform-browser';import { Component, Directive, Input, HostBinding, HostListener } from '@angular/core';import { CommonModule } from '@angular/common';@Directive({  selector: '[w3Highlight]',  standalone: true})export class HighlightDirective {  @Input('w3Highlight') highlightColor = 'lightyellow';  @HostBinding('style.transition') transition = 'background-color 150ms ease-in-out';  @HostBinding('style.backgroundColor') bg = '';  @HostListener('mouseenter') onEnter() { this.bg = this.highlightColor; }  @HostListener('mouseleave') onLeave() { this.bg = ''; }}@Component({  selector: 'app-root',  standalone: true,  imports: [CommonModule, HighlightDirective],  styles: [`    .box { padding: 10px; border: 1px dashed #bbb; border-radius: 6px; }  `],  template: `    <h3>Attribute Directive (highlight)</h3>    <p>Hover the first box to see the effect:</p>    <div [w3Highlight]="'lightyellow'">I get highlighted on hover</div>    <div>I do not</div>  `})export class App {}bootstrapApplication(App);

<app-root></app-root>

Run Example »

Notes:

• Selector collisions: Use specific selectors for custom directives (e.g.,[w3Highlight]) to avoid clashing with other libraries.
• Performance: Keep host listeners light; avoid heavy synchronous work in@HostListener handlers.