Input alias

💻 Tech

With Angular signals, instead of using the @Input decorater, you can directly use signals with input.

In the example below, test1 omponent defines an input signal of type string with default value and data alias. Without the alias, you will use the name of the signal as a prop. At first load, it will log the default value. Then, when the name changes with the value passed to the prop, effect can detect it since name is a signal dependency.

import { Component, effect, input } from "@angular/core";

@Component({
	selector: "app-test1",
	imports: [],
	templateUrl: "./test1.component.html",
	styleUrl: "./test1.component.css",
})
export class Test1Component {
	name = input<string>("default", {
		alias: "data",
	});

	constructor() {
		console.log("name", this.name());

		effect(() => {
			console.log("effect", this.name());
		});
	}
}

<app-test1 data="henlo" />