andrew554 andrew554 - 3 months ago 29
TypeScript Question

How to notify parent about change in child component?

I have a child component with this template:

<p *ngIf="user != null" >
Id: {{}}<br>
Name: {{user.firstName}} {{user.lastName}}<br>
Nick: {{user.nickname}}<br>
Gender: {{user.gender}}<br>
Birthday: {{user.birthday}}<br>
Last login: {{user.lastUpdateDate}}<br>
Registered: {{user.registrationDate}}<br>

I get user from server using http request, so when data is loaded, user is shown.

How can I notify parent component that data was loaded and shown?


You archieve it using EventEmitter in child component (this example works with click event, you can emitt the event whenever you want to).

  selector: 'child-component',
  template: `
    <button (click)="finish(true)">Finish</button>
export class ChildComponent {
  @Output() onFinished = new EventEmitter<boolean>();
  finished = false;

  finish(finished: bool) {
    this.finished = finished;

When you finish loading your http request, you just call the finished method and catch it in parent component

  selector: 'parent-component',
  template: `
    <p *ngIf="showChildRequestFinishedMessage">Finished!</p>
export class ParentComponent {
  showChildRequestFinishedMessage = false;
  onFinished(finished: boolean) {
    this.showChildRequestFinishedMessage = finished;

See Component Interaction article in docs for more info