How to reload or refresh only child component in Angular 8

I have two components, One parent and Other Child.

HTML Part

<div> <div> <div> <!-- Some HTML Code of Parent component over here --> </div> <div> <child-component></child-component> </div> </div> <button (click)="reloadOnlyChild($event)">Reload Child</button> </div> 

Now, On click of this button, I want the only child to get reload, or refresh.

TS Part

reloadOnlyChild(event){ // I want to reload the child from here. } 

I searched on the Internet, I am getting for Vue or React, But not for Angular.

5 Answers

Best way to update a child component is: ngOnChanges()

ngOnChanges(): "A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes." We use this lifecycle hook to respond to changes to our @Input() variables.

Example:

import { Component, Input, OnChanges } from "@angular/core"; @Component({ selector: "child-component", templateUrl: "./child-component.html" }) export class MyComponent implements OnChanges { @Input() someInput: string; constructor() {} ngOnChanges() { /**********THIS FUNCTION WILL TRIGGER WHEN PARENT COMPONENT UPDATES 'someInput'**************/ //Write your code here console.log(this.someInput); } } 

Use child component inside parent component as follows

<child-component [someInput]="inputValue"></child-component> 

Say if you have a form in Child.Component.ts and if you want to reset it from parent component you can establish a connection between parent and child using Subject.

Parent.Component.html

<child-component [resetFormSubject]="resetFormSubject.asObservable()"></child-component> <button (click)="resetChildForm()"></button> 

Parent.Component.ts

import { Subject } from "rxjs"; resetFormSubject: Subject<boolean> = new Subject<boolean>(); resetChildForm(){ this.resetFormSubject.next(true); } 

Child.Component.ts

import { Subject } from "rxjs"; @Input() resetFormSubject: Subject<boolean> = new Subject<boolean>(); ngOnInit(){ this.resetFormSubject.subscribe(response => { if(response){ yourForm.reset(); // Or do whatever operations you need. } } } 

By using Subject you can establish a connection from parent to the child whenever the button gets clicked.

Hope this answer helps! Cheers :)

You could add an Input to update the component, or add a update function in the child that you can call in the code. Using @ViewChild to call the child update function from the parent. Like this

( ):

Child:

import { Component } from "@angular/core"; @Component({ selector: "app-child", templateUrl: "./child.component.html", styleUrls: ["./child.component.css"] }) export class ChildComponent { ticks = Date.now().valueOf(); constructor() {} update(): void { this.ticks = Date.now().valueOf(); } } 

Parent:

import { Component, OnInit, ViewChild } from "@angular/core"; import { ChildComponent } from "./../child/child.component"; @Component({ selector: "app-parrent", templateUrl: "./parrent.component.html", styleUrls: ["./parrent.component.css"] }) export class ParrentComponent implements OnInit { @ViewChild(ChildComponent, { static: false }) childC: ChildComponent; showChild: boolean = true; constructor() {} ngOnInit() {} onUpdateChild() { this.childC.update(); } } 

We can also use *ngIf and setTimeout to reset the child component from parent without making any change in child component.

.template:

.ts:

show:boolean = true resetChildForm(){ this.show = false; setTimeout(() => { this.show = true }, 100); } 

This is particularly helpful when we have no control over child component, like a 3rd party library component.

I used this approach and find it the easiest one. According to your code;

<!-- ParentComponent.html --> <div> <div> <!--- Observe; I added something here ---> <child-component [someValueToGetChanges]="ValueInput"></child-component> </div> </div> 

And then use ngOnChanges lifehook of angular in our childComponent. ngOnChanges method is called when any data-bound property of a directive changes. So in your childComponent, we'll do this;

export class ChildComponent implements OnChanges { @Input() someValueToGetChanges: string; // this code is called when "someValueToGetChanges" value is changed by "ParentComponent" ngOnChanges() { // Code here what you want console.log(this.someValueToGetChanges); } constructor() {} } 

Hope, it'll work for you as well!