1

Quisiera saber como puedo realizar esto:

Tengo un filtro en un componente hijo, que tiene unos checkbox lo que debe de hacer es al yo seleccionarlo mostrarme u ocultarme una columna en una tabla, como hago para poder comunicar esto al componente padre, mi código esta así:

ComponenteHijo.ts

@Output() check = new EventEmitter<boolean>();
ocultarTelefono: boolean
ocultarNombre: boolean

ComponenteHijo.html

<input type="checkbox" [checked]="!ocultarTelefono" (change)="ocultarTelefono = !ocultarTelefono"/>
<input type="checkbox" [checked]="!ocultarNombre" (change)="ocultarNombre = !ocultarNombre"/>

y en el componente padre en el html tengo lo siguiente:

<componente-hijo></componente-hijo>

    <thead>
            <tr>
                 <th *ngIf='!ocultarTelefono'>Telefono</th>
                 <th *ngIf='!ocultarNombre'>Nombre</th>
           </tr>
    </thead>
 <tbody>
          <tr>
            <td *ngIf='!ocultarTelefono'>858585858</td>
            <td *ngIf='!ocultarNombre'>Lorem ipsum</td>
          </tr>
 <tbody>

Cuando tenia todo el codigo en el componente padre funcionaba normal, pero ahora necesito pasar todo al componente hijo y que se siga ocultando o mostrando las columnas si esta o no checked el input. no se si exista otra manera

1 respuesta 1

0

Puedes intentar lo siguiente:

En tu componente hijo:

@Output() ocultarTelefono = new EventEmmiter<boolean>()

En el html de el padre:

<componente-hijo (ocultarTelefono)="ocultarTelefono = $event"></componente-hijo>

$event esta reservado para obtener el resultado emitido y lo que hacemos es asignarselo a la variable que queremos revisar en el componente padre.

2
  • Al hacerlo así el (change)="ocultarTelefono = !ocultarTelefono" me arroja error que una expresión booleana no puede ser asignada a un tipo EventEmmiter<boolean>
    – ayaleil
    el 13 abr. 2021 a las 20:06
  • No estoy usando la propiedad (change), estoy usando el Output. Revisa este ejemplo para que te des una idea.
    – Legna
    el 13 abr. 2021 a las 22:54

Tu Respuesta

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

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