// lock-toggle.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-lock-toggle',
  standalone: true,
  template: `
    <button [disabled]="isLocked">Save</button>
    <button (click)="toggleLock()">{{ isLocked ? 'Unlock' : 'Lock' }}</button>
  `,
})
export class LockToggleComponent {
  isLocked = true;

  toggleLock() {
    this.isLocked = !this.isLocked;
  }
}

/*
  Notes:
  - [disabled]="isLocked" sets the Save button's real disabled DOM
    property directly from the boolean isLocked — not a string "true".
  - toggleLock() flips isLocked with a plain assignment; Angular's
    change detection re-renders the template automatically afterward,
    updating both the Save button's disabled state and the toggle
    button's own label.
*/