This Angular project demonstrates modern component communication using the new Signals-based APIs:
- ✅
input()– Pass data from Parent to Child - ✅
output()– Send data from Child to Parent - ✅
model()– Enable two-way binding between Parent and Child
By completing this project, you will learn how to:
- Use
input()to receive reactive data in a child component - Use
output()to emit events to a parent component - Use
model()to implement two-way binding - Understand signal-based reactive state management in Angular
src/
└── app/
├── app.ts
├── app.config.ts
└── child/
└── child.ts
import { Component, signal } from '@angular/core';
import { Child } from './child.component';
@Component({
selector: 'app-root',
imports: [Child],
template: `<app-child [message]="parentMessage()" />`
})
export class AppComponent {
parentMessage = signal("Hello from the Parent Component!");
}import { Component, input } from '@angular/core';
@Component({
selector: 'app-child',
template:`<p>Message from Parent: {{message()}}</p>`
})
export class ChildComponent {
message = input<string>();
}✔ input() creates a read-only signal
✔ Access its value using message()
import { Component, output } from '@angular/core';
@Component({
selector: 'app-child',
template: `<button (click)="sendMessage()">Send Message to Parent</button>`
})
export class ChildComponent {
notifyParent = output<string>();
sendMessage() {
this.notifyParent.emit("Hello Parent! Message from Child.");
}
}<app-child
[message]="parentMessage()"
(notifyParent)="receiveMessage($event)"
/>childMessage = signal("");
receiveMessage(message: string) {
this.childMessage.set(message);
}✔ output() replaces @Output()
✔ Uses .emit() just like EventEmitter
Angular introduced model() to simplify two-way communication.
import { Component, model } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<input [value]="value()"
(input)="value.set(($event.target as HTMLInputElement).value)" />
`
})
export class ChildComponent {
value = model<string>();
}sharedValue = signal("Initial Value");<app-child [(value)]="sharedValue" />✔ model() automatically creates:
- An
input() - An
output() - Two-way binding support
✔ [(value)] works like ngModel but signal-based
- Standalone components
- Signals (
signal()) input()(signal-based input)output()(signal-based output)model()(two-way binding)- Reactive state updates
npm installng servehttp://localhost:4200/
- The child displays a message passed from the parent.
- Clicking the button in the child sends a message back to the parent.
- Editing the input field updates both parent and child instantly using
model()two-way binding.
- Angular
- TypeScript
- Signals API
- HTML & CSS
This project is designed to demonstrate modern Angular 21 component communication patterns using the Signals API, replacing traditional decorator-based patterns.
This project is for educational purposes.