¿Cómo mostrar/ocultar datos cuando la condición particular es verdadera en AngularJS?

En AngularJS, para ocultar o mostrar datos o contenido, podemos usar la directiva estructural *ngIf . Al usar esto, podemos evaluar las condiciones y luego *ngIf basado en la condición muestra el contenido. Por ejemplo, si la condición para *ngIf es verdadera, se mostrará el contenido y si la condición es falsa, el contenido no se mostrará.

Acercarse:

  • Para dar una visión lúcida y elaborada, explicaré el concepto mediante un ejemplo.
  • Considere que tenemos una array de objetos en el archivo .ts y los objetos en la array contienen una lista de empresas técnicas y no técnicas.
  • El objetivo de este experimento es mostrar los datos de todas las empresas técnicas y ocultar todas las empresas no técnicas.
  • Para recorrer la array, usaremos la directiva *ngFor en el archivo .html.
  • Una vez que haya terminado con la implementación, inicie el servidor.

Implementación:

aplicación.componente.ts:

Javascript

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    
  companies = [
    {
      name: "Microsoft",
      isTechnical  : true,
    },
  
    {
      name: "GeeksForGeeks",
      isTechnical : true
    },
  
    {
      name: "Netflix",
      isTechnical : false
    },
    {
      name: "TCS",
      isTechnical : true
    }
  ]
}

aplicación.módulo.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

aplicación.componente.html: 

HTML

<ol>
    <li *ngFor="let company of companies">
        <i *ngIf="company.isTechnical"> {{company.name}} </i>
    </li>    
</ol>

Salida: puede ver claramente que el tercer elemento está oculto porque su condición es falsa. Para dar un ejemplo más visible, lo dejé en blanco. 

Publicación traducida automáticamente

Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *