Digamos que si tiene un formulario en Child.Component.ts y si desea restablecerlo desde parent component , puede establecer una conexión entre el elemento principal y el elemento secundario utilizando Subject .

Padre.Componente.html

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

Padre.Componente.ts

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

Niño.Componente.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. } } }

Al usar Asunto, puede establecer una conexión de padre a hijo cada vez que se hace clic en el botón.

¡Espero que esta respuesta ayude! Salud :)

Puede agregar una entrada para actualizar el componente o agregar una función de actualización en el elemento secundario que puede llamar en el código. Usando @ViewChild para llamar a la función de actualización secundaria desde el padre. Me gusta esto

( https://stackblitz.com/edit/angular-updatechild ):

Niño:

 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(); } }

Padre:

 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(); } }

También podemos usar *ngIf y setTimeout para restablecer el componente secundario desde el principal sin realizar ningún cambio en el componente secundario.

.plantilla:

.ts:

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

Esto es particularmente útil cuando no tenemos control sobre el componente secundario, como un componente de biblioteca de terceros.

La mejor manera de actualizar un componente secundario es: ngOnChanges()

ngOnChanges(): "Un enlace de ciclo de vida que se llama cuando cambia cualquier propiedad vinculada a datos de una directiva. Defina un método ngOnChanges() para manejar los cambios". Usamos este enlace de ciclo de vida para responder a los cambios en nuestras variables @Input().

Ejemplo:

 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 el componente secundario dentro del componente principal de la siguiente manera

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