Dejo este aporte que explica que mas hacen los ng-templates
https://profile.es/blog/angular-templates-las-directivas-ng-template-ng-container-y-ngtemplateoutlet/
Primeros pasos
Qué es Angular y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
Deploy
Despliegue con Firebase Hosting
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Uso de *ngIf
11/21Recursos
El condicional “If” es un “If” en Javascript, en Java, en PHP, en Python o en cualquier lenguaje. Angular posibilita utilizar este condicionante embebido en el HTML para mostrar o no un elemento. Su sintaxis es algo particular, está compuesta por un asterisco seguido de las iniciales características de Angular “ng” y la palabra “If”.
<div *ngIf="isPlatzi">Hola, soy Platzi</div>
Si la condición dentro del “If” se cumple, se mostrará el <div> con el respectivo contenido dentro. De lo contrario, el usuario no verá dicho elemento en el navegador. En la condición del If puedes colocar cualquier operador lógico:
If … else
Para usar un else en Angular, la sintaxis es algo especial. Debes crear un template en tu código HTML usando la etiqueta que provee Angular llamada <ng-template> con una Variable de Template, comenzando con #, para hacer referencia a este elemento desde tu If.
<div *ngIf="isPlatzi; else templateElse">Hola, soy Platzi</div>
<ng-template #templateElse>
<div>No soy Platzi</div>
</ng-template
Si la condición del If no se cumple, seguido de punto y coma, se coloca la sentencia else haciendo referencia a templateElse, que es el nombre de la variable del template a mostrar en su lugar.
Aporte creado por: Kevin Fiorentino.
Aportes 6
Preguntas 2
Ordenar por:
Tambien pueden usar then como condicionales si se cumple.
Ejemplo:
<input type="text" required [(ngModel)]="person.name">
<P *ngIf="person.name == 'liz';then thenMyBlock else otherElseMyBlock"> Hola soy alexis</P>
<ng-template #thenMyBlock>
<p>Hola liz</p>
</ng-template>
<ng-template #otherElseMyBlock>
<p>Ingresa la palabra liz</p>
</ng-template>
Que sintaxis mas agradable, siempre habia escuchado que angular es mas complicado que react, me esta gustando mas angular, aunque lo que si veo es que es mas extenso
Las directivas *ngIf y *ngFor son atributos que podemos agregarle a los elementos HTML que nos permiten en el caso del *ngIf condicionar si dicha marca debe agregarse a la página HTML.
La directiva *ngFor nos permite generar muchos elementos HTML repetidos a partir del recorrido de un arreglo de datos.
ngIf
Estructura de control:
<h1>ngIf</h1>
<input type="text" required [(ngModel)]="person.name" />
<p *ngIf="person.name === 'aaron'">Soy Aaron</p>
<p *ngIf="person.name === 'julian' && person.age === 18; else myBlock">Soy Julian</p>
<ng-template #myBlock>
<p>Bloque de else</p>
</ng-template>
Muy buen curso, hasta el momento ha sido muy simple y claro.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.