bhylu.com

Advertisements

Angular Attribute Binding

Attribute bindings are useful for values such as ARIA metadata that must be written as attributes. A null attribute binding removes the attribute rather than writing the string null.

How it works

An expandable desk note should expose the same state to assistive technology as it shows visually. The button uses aria-expanded and aria-controls, while the paragraph’s hidden property controls visibility. Angular can bind many ARIA attributes directly in current versions; attr. remains an explicit way to express an attribute contract. Keep the controlled element’s identifier stable and unique.

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.

Example

src/app.ts

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

@Component({
  selector: 'bh-attribute-binding',
  standalone: true,
  imports: [],
  template: `<button
      type="button"
      [attr.aria-expanded]="expanded()"
      aria-controls="desk-note"
      (click)="expanded.update(toggle)"
    >
      Desk note
    </button>
    <p id="desk-note" [hidden]="!expanded()">Return tools before closing.</p>
    <p data-result>{{ expanded() ? 'Note open' : 'Note closed' }}</p>`,
})
export class App {
  expanded = signal(false);
  toggle = (value: boolean) => !value;
}

Expected result

Note closed

Clicking the button updates both the visible state and aria-expanded. The review inspects the attribute value, not just the paragraph text. Accessibility metadata must describe working behavior; adding ARIA without implementing keyboard and visibility behavior does not make a custom control complete.

Advertisements