Another commonly used way to share data is by emitting data from Child to Parent. With this approach, it is easy to pass data by events such as button clicks. In the parent component, we have to create a method to receive the messages and in the child component, we declare a messageEvent variable with the @Output() decorator and set it equal to a new event emitter. After that, we can create a method to emit data and trigger it on a button click.
parent.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-parent",
template: "./parent.component.html",
styleUrls: ["./parent.component.css"]
})
export class ParentComponent {
constructor() {}
message: string;
receiveMessage($event) {
this.message = $event;
}
}
parent.component.html
<app-child (messageEvent)="receiveMessage($event)"></app-child>
<h1>
Message from Child : {{message}}
<h1></h1>
</h1>
child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hello Angular!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}
child.component.html
<button (click)="sendMessage()">Send Message</button>
What is the difference betwen @Input and @Output
@Input() is to pass data In to the component
class ChildComponent {
@Input() data;
}
@Component({
template: `<child [data]="parentData"></child>
})
class ParentComponent {
parentData;
}
In above ParentComponent (not shown above) is passing data to the child by the @Input() property. The [data] is the same name as the property in the child component.
@Output is to emit data (events) Out from a component
class ChildComponent {
@Output() dataChange = new EventEmitter();
click() {
dataChange.emit('new Value');
}
}
@Component({
template: `<child (dataChange)="onDataChange($event)"></child>
})
class ParentComponent {
onDataChange(event) {
console.log(event);
}
}
Here ChildComponent has an @Output that it emits events to. The parent is listening and passes a callback to the (dataChange). Now every time the child emits an event, the parent callback will be called passing the event.
3 common methods that we can use to share data between Angular components.
- Sharing Data via Input
- Sharing Data via Output and EventEmitter
- Sharing Data with a Service
Parent to Child via @Input() decorator.
When you declare a variable in the child component with the @Input() decorator, it allows that variable to be “received” from the parent component template.
parent.component.ts
import { Component } from "@angular/core"
@Component({
selector: "app-parent",
template: "parent.component.html",
styleUrls: ["./parent.component.css"],
})
export class ParentComponent {
Message = "Parent to Child"
constructor() {}
}
parent.component.html
See that the way a prop is passed from the parent.component.html is using the syntax
[prop]="prop"
To compare with React it would be like
<ChildComp firstName={firstName}>
<app-child [Message]="Message"></app-child>
child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: './child.component.html,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() Message: string;
constructor() { }
}
child.component.html
<h1>
Message from Parent : {{Message}}
<h1></h1>
</h1>