How to reload or refresh only child component in Angular 8
Solution 1
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>
Solution 2
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 :)
Solution 3
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
( https://stackblitz.com/edit/angular-updatechild ):
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();
}
}
Solution 4
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.
Related videos on Youtube
Saurabh Singh Rajput
Updated on July 09, 2022Comments
-
Saurabh Singh Rajput almost 2 years
I have two components, One parent and Other Child.
HTML Part
<div> <div class="row col-md-12"> <div class="col-md-4"> <!-- Some HTML Code of Parent component over here --> </div> <div class="col-md-8"> <child-component></child-component> </div> </div> <button class="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.
-
Wandrille over 4 yearsWhat do you mean by "reload" ? Have the *ngOnInit launch again ?
-
Saurabh Singh Rajput over 4 yearsSuppose, Child component consists is a form. I have filled that form. I on button click, I am saving data, And I want it to reload So that all fields of that form become Empty and untouched.
-
robert over 4 yearsCan you post more code or better create a stackblitz about this.
-