Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

285
Views
¿Cómo puedo usar "*ngIf else"?

Estoy usando Angular y quiero usar *ngIf else (disponible desde la versión 4) en este ejemplo:

 <div *ngIf="isValid"> content here ... </div> <div *ngIf="!isValid"> other content here... </div>

¿Cómo puedo lograr el mismo comportamiento con ngIf else ?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Angular 4 y 5 :

Usando else :

 <div *ngIf="isValid;else other_content"> content here ... </div> <ng-template #other_content>other content here...</ng-template>

También puedes usar then else :

 <div *ngIf="isValid;then content else other_content">here is ignored</div> <ng-template #content>content here...</ng-template> <ng-template #other_content>other content here...</ng-template>

O then solo:

 <div *ngIf="isValid;then content"></div> <ng-template #content>content here...</ng-template>

Manifestación:

Plunker

Detalles:

<ng-template> : es la propia implementación de Angular de la etiqueta <template> que está de acuerdo con MDN :

El elemento HTML <template> es un mecanismo para almacenar contenido del lado del cliente que no se representa cuando se carga una página, pero que posteriormente se puede crear una instancia durante el tiempo de ejecución mediante JavaScript.

over 4 years ago · Santiago Trujillo Report

0

En Angular 4.xx

Puede usar ngIf de cuatro maneras para lograr un simple procedimiento if - else :

  1. solo usa si

     <div *ngIf="isValid"> If isValid is true </div>
  2. Usando If con Else (por favor notifique a templateName )

     <div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template>
  3. Usando If with Then (por favor notifique a templateName )

     <div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template>
  4. Uso de If con Then y Else

     <div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>

Sugerencia: ngIf evalúa la expresión y luego representa la plantilla " then " o " else " en su lugar cuando la expresión es verdadera o falsa, respectivamente.

Típicamente el:

  • entonces la plantilla es la plantilla en línea de ngIf a menos que esté vinculada a un valor diferente.
  • otra plantilla está en blanco a menos que esté enlazada.
over 4 years ago · Santiago Trujillo Report

0

Para Angular 9/8

Enlace fuente con ejemplos

 export class AppComponent { isDone = true; }

1) *ngSi

 <div *ngIf="isDone"> It's Done! </div> <!-- Negation operator--> <div *ngIf="!isDone"> It's Not Done! </div>

2) *ngIf y Else

 <ng-container *ngIf="isDone; else elseNotDone"> It's Done! </ng-container> <ng-template #elseNotDone> It's Not Done! </ng-template>

3) *ngIf, Entonces y Else

 <ng-container *ngIf="isDone; then iAmDone; else iAmNotDone"> </ng-container> <ng-template #iAmDone> It's Done! </ng-template> <ng-template #iAmNotDone> It's Not Done! </ng-template>
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!