W3Schools Tryit Editor

main.ts

index.html

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Attribute binding (attr.)</h3>
    <button [attr.aria-label]="label" (click)="toggle()">Toggle label</button>
    <table border="1" style="margin-top:8px">
      <tr><th>A</th><th>B</th><th>C</th></tr>
      <tr><td [attr.colspan]="wide ? 2 : 1">Row 1</td><td>Cell</td><td>Cell</td></tr>
    </table>
  `
})
export class App {
  wide = true;
  label = 'Toggle label';
  toggle(){ this.wide = !this.wide; this.label = this.wide ? 'Collapse' : 'Expand'; }
}

bootstrapApplication(App);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Angular Templates</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>