Signals-based input and output

With signals, you can declare input and output values for the child to receive values from the parent and for the child to send value sto the parent, respectively. One of the uses of this method is to ensure presentation components don’t mutate the values they receive; instead, they inform their parent components about such change, so the parent components can propage the changes downstream.

For example, below is App component. Initially, it has a value of 5. App Test component receives the value and sends back an output signal to App component of the new value. As a result, App component finally mutates the value, which App Test component displays.

App component

@Component({
	selector: "app-root",
	imports: [TestComponent],
	template: `
		<app-test [value]="value()" (valueIncremented)="onValueIncremented($event)"></app-test>
	`,
})
export class App {
	value = signal(5);

	onValueIncremented(newValue: number) {
		this.value.set(newValue);
	}
}

App Test component

@Component({
	selector: "app-test",
	templateUrl: "./test.component.html",
	styleUrl: "./test.component.css",
})
export class TestComponent {
	value = input<number>(0);
	valueIncremented = output<number>();

	onValueIncremented() {
		this.valueIncremented.emit(this.value() + 1);
	}
}

<h1>Received value from parent: {{ value() }}</h1>

<input type="button" value="Increment" (click)="onValueIncremented()" />