1

Hola quiero mostrar u ocultar un div, dependiendo si tiene o no información desde el servidor.

Me explico, tengo un formulario que al hacer una llamada al servidor me devuelve unos datos, en esos datos hay un input que esta dentro de un div y debe mostrar la información de las corporaciones pero a veces no existen esas corporaciones entonces lo que busco es que si ese input tiene información me lo muestre y si no tiene entonces oculte el div.

Aquí mi HTML

Quiero ocultar todo el div donde esta el *ngIf

<div *ngIf='showDiv()' >
    <div class='col-6'>
      <label for='corporation'>Corporación</label>
      <input type='text' fullWidth disabled id='corporation'>
    </div>
    <div class='col-6'>
      <label for='employee'>Empleado</label>
      <input type='text' fullWidth [value]='corp.employee?.name' disabled id='employee'>
    </div>
  </div>

Y en el TypeScript tengo la siguiente función, aquí me esta mostrando en la consola cuando tiene me muestra que si tiene y cuando no, pues no

showDiv(): void{
 if (corp.employee?.name == null){
  console.log('no tengo corporación');
 }else {
  console.log('Si tengo corporación');
 }

}

Cuando no tiene corporación por defecto el valor es null

¿Cómo puedo realizar esto?

0

1 respuesta 1

2

La directiva ngIf siempre va a esperar como argumento una expresión booleana, por lo que la función showDiv debe devolver un boolean.

Por ejemplo,

public showDiv(): boolean {
  const name = corp?.employee?.name;
  // Forzamos la variable a boolean
  // Si name existe y no es un string vacío, entonces devuelve true
  return !!name;
}

O también puedes beneficiarte de la type coercion y escribir directamente tu expresión dentro del la directiva ngIf

<div *ngIf="corp?.employee?.name">
  <!-- ... -->
</div>

También tienes la alternativa de mantener una variable boolean que vayas cambiando para mostrar u ocultar tu div (<div *ngIf="showDiv">)

// Por ejemplo...
public fetchCorp() {
  this.corp = ...;
  this.showDiv = true;
}

Hay muchas formas, de conseguirlo. Puedes leer la documentación oficial de ngIf para conocer más.

1
  • Funciono muy bien, gracias leeré igual la documentación
    – ayaleil
    Commented el 31 mar. 2021 a las 20:41

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.