Angular Template Aliases

How it works

A selected lending record can be shown without repeating a long access expression. The alias makes the value used by that branch clear and works with Angular’s template narrowing. Truthiness is still the condition: a numeric zero will not enter a truthy branch merely because it is a meaningful count. Use an explicit null comparison when zero or an empty string is a valid value to display.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

• package.json
• angular.json
• tsconfig.json
• tsconfig.app.json
• tsconfig.spec.json
• src/index.html
• src/styles.css
• src/app.ts
• src/app.config.ts
• src/main.ts
• src/app.spec.ts
• fixture-server.mjs

Example

import { Component } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'bh-template-aliases',
  standalone: true,
  imports: [],
  template: `@if (selected(); as tool) {
      <p data-result>{{ tool.name }} selected</p>
    } @else {
      <p data-result>No selection</p>
    }`,
})
export class App {
  selected = signal<{ name: string } | null>({ name: 'Clamp' });
}

Expected result

Clamp selected

The branch uses tool as a non-null selection. Current templates also support @let for local expressions that are not conditional branches. The supplied reference’s ngIf-as pattern is covered as a concept, but the active example uses modern @if rather than copying deprecated navigation or syntax as the recommended starting point.