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.
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 :)