Signal as Input

Az input() az Angular 16-ban bevezetett új API, ami:

• @Input() helyett használható
• egy writable signal-t ad vissza → tehát a komponensben úgy dolgozol vele, mintha sima signal lenne
• a parentből továbbra is [pageTitle]-lal adod át az értéket

import { Component, ChangeDetectionStrategy, input } from '@angular/core';

@Component({
  selector: 'app-content-layout',
  templateUrl: './content-layout.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ContentLayoutComponent {
  // Signal Input
  public readonly pageTitle = input<string>(''); 
}

@if (pageTitle()) {
  <h1 class="text-2xl font-semibold">
    {{ pageTitle() }}
  </h1>
}

<app-content-layout [pageTitle]="'TOPIC_GROUP.TOP10_TITLE' | transloco">

Így tehát:

• Igen, a public readonly pageTitle = input<string>(''); egy signal input.
• A pageTitle() hívás ugyanúgy működik, mint bármelyik signal esetén.
• Az ESLint szabály (prefer-signals) pontosan ezért ajánlja.