bhylu.com

Advertisements

Angular Property Binding

Square brackets bind an expression to an element or component property. A property binding supplies the evaluated value rather than the literal text between quotation marks.

How it works

The Reserve button should become disabled while no tools are available. Binding disabled to a boolean makes that state explicit. A plain HTML disabled attribute has different presence semantics: disabled="false" still disables a native button. Pick the DOM property that actually controls the behavior instead of writing a string that only looks like a boolean.

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-property-binding',
  standalone: true,
  imports: [],
  template: `<button
      type="button"
      [disabled]="available() === 0"
      (click)="available.set(0)"
    >
      Reserve last tool
    </button>
    <p data-result>{{ available() }} available</p>`,
})
export class App {
  available = signal(1);
}

Expected result

1 available

The first click sets availability to zero and Angular disables the button. The browser test checks both the rendered count and the actual disabled property. This prevents another click in this local fixture; a real server must still enforce stock and ownership independently.

Advertisements