CODEWITHSUNDEEP
javascriptangulartypescriptangular-event-emitterngonchanges
Amrmsmb
Amrmsmb

Reputation: 1

ngOnChange is not called when the parent updates the child

i want to know how ngOnChanges callback works. so i have added it to observe changes in a prpoperty annotated with Input decorator as follows:

@Input() postsToAddToList: Post[] = [];

now, when I compile the code i add some values that causes change in the property annotated with @Input, but that does not cause the the ngOnChanges callback to be called and executed. please see logs shown in the screen-shot posted below.

i want to see the logs in the ngOnChanges displayed in the browser. please let me know what prevents the ngOnChanges to be invoked and called correctly

app.component.ts:

import { Component } from '@angular/core';
import { Post } from './post-create/post-create.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'binding2';
  postsArray: Post[] = [];

  onReceiveSubmittedEvtEmitter(post: Post) {
    this.postsArray.push(post);
    console.log("onReceiveSubmittedEvtEmitter->: post.title: " + post.title);
    console.log("onReceiveSubmittedEvtEmitter->: post.content:" + post.content);
  }
}

app.component.html:

<app-post-create (onPostSubmittedEvtEmitter)="onReceiveSubmittedEvtEmitter($event)"></app-post-create>
<app-post-list [postsToAddToList]="postsArray"></app-post-list>

post-list.component.ts:

import { Component, Input,OnInit, OnChanges, SimpleChanges,Output, EventEmitter } from '@angular/core';
import { Post } from '../post-create/post-create.component';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {

  constructor() {}

  @Input() postsToAddToList: Post[] = [];
  ngOnInit(): void {}
  
  ngOnChanges(changes: SimpleChanges) {

    for (let changedProperty in changes) {
      if (changes.hasOwnProperty(changedProperty)) {
        
        console.log("ngOnChanges->: changedProperty: " + changedProperty);
        console.log("ngOnChanges->: changedProperty:" + changedProperty);

        switch(changedProperty) {
          case 'postsToAddToList':
            console.log("ngOnChanges->: changes[changedProperty].previousValue: " + changes[changedProperty].previousValue);
            console.log("ngOnChanges->: changes[changedProperty].currentValue):" + changes[changedProperty].currentValue);
            break;
        }
      }
    }
  }
}

post-list.component.html:

<!-- post-list.component.html -->
<h3>List</h3>

<ng-container *ngIf="postsToAddToList.length; else elseTemplate">

    <ul class="list-group">
        <li class="list-group-item" *ngFor="let post of postsToAddToList; let i = index">
            <h5>{{i+1}}) {{post.title}}</h5>
            <p>
                {{post.content}}
            </p>
        </li>
    </ul>

</ng-container>
<ng-template #elseTemplate>

    <div class="alert alert-danger" role="alert">
        No Post Found!
    </div>

</ng-template>

error screen-shot:

enter image description here

Upvotes: 1

Views: 825

Answers (1)

YogendraR
YogendraR

Reputation: 2376

As u are using push() in your parent component, ngOnChanges will not be invoked in the child component. Instead of using push() you can reassign value to postsToAddToList every time there is a change in it.

Upvotes: 1

Related Questions