Introducción a Angular y Fundamentos
Aprende Angular 17
Creando tu primer proyecto en Angular
Implementando estilos
Mostrando elementos
Property Binding en Angular
Event Binding: click y doble click
Event binding: keydown
Modelo de reactividad con Signals
Creando un Signal en Angular
Estructuras de control en Angular
Directivas de control
Uso de ngFor
ngFor para objetos
Update Tasks
Uso de ngIf
Uso de ngSwitch y ngSwitchDefault
Controlando un input
Manejo de formularios en Angular
Alistando tu aplicación para producción
Estilos al modo Angular
Clases en Angular
Editing mode
Estados compuestos con computed
Usando effect para localStorage
Uso de ngbuild
Despliegue con Firebase Hosting
Nueva sintaxis en Angular
Directivas @For, @switch
Migrando a la nueva sintaxis de Angular v17
Componentes Reutilizables y Comunicación
Construyendo un e-commerce en Angular
Componentes en Angular
Mostrando los componentes
Angular DevTools
Uso de Inputs en Angular
Uso de Outputs en Angular
Componentes para Producto
Ciclo de vida de los componentes
Ciclo de vida de componentes
Ciclo de vida de componentes: ngOnChanges
Ciclo de vida de componentes: ngOnInit
Detectando cambios en los inputs
Evitando memory leaks con ngDestroy
Audio player con ngAfterViewInit
Creando la página "about us" o "conócenos"
Mejorando la interfaz del producto
Creando componente de productos
Creando el Header
Creando el carrito de compras
Comunicación padre e hijo
Calculando el total con ngOnChanges
El problema del prop drilling
Reactividad con signals en servicios
Entendiendo la inyección de dependencias
Integración y Datos
Obteniendo datos una REST API
Importaciones cortas en Typescript
Pipes en Angular
Construyendo tu propio pipe
Utilizando librerías de JavaScript en Angular
Conociendo las directivas
Deployando un proyecto en Vercel
Enrutamiento y Navegación
Ruta 404
Uso del RouterLink
Vistas anidadas
Uso del RouterLinkActive
Detalle de cada producto
Obteniendo datos del producto
Galería de imagenes
Detalle de la galería
Perfeccionando tu e-commerce
Mostrando categorias desde la API
Url Params
LazyLoading y Code Splitting
Aplicando LazyLoading
Prefetching
Usando la nueva sintaxis de Angular 17
Lanzando tu aplicación a producción
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
19 Días
12 Hrs
25 Min
29 Seg
Uso de ngSwitch y ngSwitchDefault
15/71Recursos
Aportes 22
Preguntas 0
Ordenar por:
![]()
La verdad usé ternaries porqué está feo con el ngIf jajajajajaja
Esta fue mi solución, un poco mas larga pero funciona de la misma manera \\{{ tasks().length }}\ items left\ \<ng-template #elseblock > \\{{ tasks().length }}\ item left\ \</ng-template>
yo resolví este reto solo agrgeando un span con la letra s y mostrandolo con if que evalué que si el array es mayor que 1
`{{ tasks().length }} items `
Pregunta:
Tengo entendido que para temas de SEO, es positivo tener etiquetas variadas es decir:
\ \
\ \
- \
- (y sus respectivas closing tags) porque si repites varias veces la misma etiqueta, esto lo castiga el navegador. ¿Este beneficio también se obtiene con la etiqueta \<ng-template> \</ng-template>? ¿Qué tipo de etiqueta se vuelve \<ng-template> \</ng-template>? Por ejemplo, si utilizas en react \<React.Fragment>, me parece que se vuelve un nodo vacío en el DOM, lo cuál es bueno si no quieres que tenga las propiedades de una etiqueta que pueden dañar cómo se visualiza el css en tu desarrollo.
Profe, me gustó más su respuesta pero utilicé el operador !== ya que cuando el item es cero (zero en inglés), comúnmente se diría "items":
```js
{{ tasks().length }}
<ng-template [ngIf]="tasks().length !== 1" [ngIfElse]="individualTask"> items </ng-template>
<ng-template #individualTask> item </ng-template>
```
si es un proyecto !== legacy mejor usa directivas
<https://v17.angular.io/api/core/switch>
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
`}`
enserio que con directivas se ahorra uno mucho codigo: \\{{ tasks().length }}\ item@if (tasks().length>1) {s} left\
```html
{{toDo().length}} items left
<ng-template #item>
{{toDo().length}} item left
</ng-template>
```
la solución del ejercicio anterior
\
\\{{tasks().length}}\ item\ \
\<ng-template #itemsNotification> \\{{tasks().length}}\ items\ \</ng-template>
```html
\
\{{tasks().length}} \
@if (tasks().length <= 1){item}@else{items}
left
\
```
Lo resolvi as\[i
\ \{{ tasks().length }}\ item\s\ left \
Mi codigo:
<span class=“todo-count”><strong *ngIf=“tasks().length > 1; else item”> {{tasks().length}} items</strong></span>
<ng-template #item>{{tasks().length}} item</ng-template>
```html
{{ tasks().length }} items left
<ng-template #lowerThanOne>
1 item left
</ng-template>
```
```js
{{tasks().length}} {{(tasks().length > 1 ? 'items' : 'item')}}
```Con una ternaria también se puede solucionar
```js
{{tasks().length}} {{(tasks().length > 1 ? 'items' : 'item')}}
``` \\{{tasks().length}}\ {{(tasks().length > 1 ? 'items' : 'item')}}\
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?