0

uso Angular 14, node js 16. Tengo un formulario con un textbox y un botón, lo que quiero es que al darle al botón, envíe lo que tiene el textbox a otro componente y luego ir a él.

Los componentes padre-hijo funcionan según los ejemplos que he visto, cuando el padre contiene al hijo y el hijo se ve todo el tiempo.

El componente que recibe los datos necesito que solo aparezca cuando recibe algo para buscar.

Componente menú:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="video" class="form-control" placeholder="Search">
  <button class="btn btn-primary" type="submit">Search</button>
</form> 
    

onSubmit() {
        this.submitted = true; 
        console.log("menu component", this.myForm.value);   
        --enviar datos al otro componente
       --hacer que el otro componente se vea
}

Al poner esto en el componente padre

<app-hero-child
      *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>

se ve el componente hijo dentro del padre... la idea es ir al componente hijo.

¿Se puede hacer de esta forma? ¿como se haría? o ¿hay que hacerlo de otra forma?

1 respuesta 1

0

Si todo está funcionando como dices, puedes utilizar una bandera (estado boolean) para determinar si mostrar o no el componente hijo.

En tu componente padre defines la variable:

public showChild: boolean = false;

Y lo envías a través de la función que ya tienes:

onSubmit() {
  this.submitted = true;
  console.log("menu component", this.myForm.value);
  //enviar datos al otro componente
  //hacer que el otro componente se vea
  this.showChild = true;
}

y dentro de la interpolación.

<app-hero-child
  *ngFor="let hero of heroes"
    [(visible)]="showChild"
    [hero]="hero"
    [master]="master"
></app-hero-child>

Entonces, lo recuperas en el hijo con un decorador.

@Input() visible: boolean;

Y lo utilizas para mostrar o no tu componente hijo.

*ngIf="visible"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.