import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
sharedData: string = 'Hello from parent!';
}
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ data }}
`
})
export class ChildComponent {
@Input() data: string;
}
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Send Data
`
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = 'Hello from child!';
this.dataEvent.emit(data);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
{{ receivedData }}
`
})
export class ParentComponent {
receivedData: string;
receiveData(data: string) {
this.receivedData = data;
}
}
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
sharedData: string = 'Hello from service!';
}
import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';
@Component({
selector: 'app-component-a',
template: `
{{ dataService.sharedData }}
`
})
export class ComponentA {
constructor(public dataService: DataService) {}
}
import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';
@Component({
selector: 'app-component-b',
template: `
Update Data
`
})
export class ComponentB {
constructor(public dataService: DataService) {}
updateData() {
this.dataService.sharedData = 'New data!';
}
}