Introducci贸n a Angular y Fundamentos

1

Creando tu primer proyecto en Angular

2

Implementando estilos

3

Mostrando elementos

4

Property Binding en Angular

5

Event Binding: click y doble click

6

Event binding: keydown

7

Modelo de reactividad con Signals

8

Creando un Signal en Angular

Estructuras de control en Angular

9

Directivas de control

10

Uso de ngFor

11

ngFor para objetos

12

Update Tasks

13

Uso de ngIf

14

Uso de ngSwitch y ngSwitchDefault

15

Controlando un input

16

Manejo de formularios en Angular

Alistando tu aplicaci贸n para producci贸n

17

Estilos al modo Angular

18

Clases en Angular

19

Editing mode

20

Estados compuestos con computed

21

Usando effect para localStorage

22

Uso de ngbuild

23

Despliegue con Firebase Hosting

24

Nueva sintaxis en Angular

25

Directivas @For, @switch

26

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicaci贸n

27

Construyendo un e-commerce en Angular

28

Componentes en Angular

29

Mostrando los componentes

30

Angular DevTools

31

Uso de Inputs en Angular

32

Uso de Outputs en Angular

33

Componentes para Producto

Ciclo de vida de los componentes

34

Ciclo de vida de componentes

35

Ciclo de vida de componentes: ngOnChanges

36

Ciclo de vida de componentes: ngOnInit

37

Detectando cambios en los inputs

38

Evitando memory leaks con ngDestroy

39

Audio player con ngAfterViewInit

40

Creando la p谩gina "about us" o "con贸cenos"

Mejorando la interfaz del producto

41

Creando componente de productos

42

Creando el Header

43

Creando el carrito de compras

44

Comunicaci贸n padre e hijo

45

Calculando el total con ngOnChanges

46

El problema del prop drilling

47

Reactividad con signals en servicios

48

Entendiendo la inyecci贸n de dependencias

Integraci贸n y Datos

49

Obteniendo datos una REST API

50

Importaciones cortas en Typescript

51

Pipes en Angular

52

Construyendo tu propio pipe

53

Utilizando librer铆as de JavaScript en Angular

54

Conociendo las directivas

55

Deployando un proyecto en Vercel

Enrutamiento y Navegaci贸n

56

Ruta 404

57

Uso del RouterLink

58

Vistas anidadas

59

Uso del RouterLinkActive

60

Detalle de cada producto

61

Obteniendo datos del producto

62

Galer铆a de imagenes

63

Detalle de la galer铆a

Perfeccionando tu e-commerce

64

Mostrando categorias desde la API

65

Url Params

66

LazyLoading y Code Splitting

67

Aplicando LazyLoading

68

Prefetching

69

Usando la nueva sintaxis de Angular 17

70

Lanzando tu aplicaci贸n a producci贸n

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de ngIf

13/70
Recursos

Aportes 36

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Esta ser铆a mi forma de solucionar la misi贸n de la clase 馃.

<span class="todo-count"
  ><strong>{{ tasks().length }}</strong>
  {{ tasks().length <= 1 ? "item" : "items" }} left</span
>

Para convertir un string a number yo generalmente hago lo siguiente, antepongo el signo mas y listo, como podr谩s ver a continuaci贸n:

this.inputTask = +this.inputTask

Soluci贸n terrorista jajaja

Asi fue como lo solucione

<span class="todo-count">
        <strong>{{ tasks().length }}</strong>
        {{ tasks().length === 1 ? 'item' : 'items' }}
      </span>
Esta es mi soluci贸n ```js {{ tasks().length }} items ```Lo que hago es indicar a Angular que renderice la etiqueta span que contiene la letra "s" en caso de cumplirse la condici贸n de que sea mayor a 1.
Nota: Normalmente lo que tenemos en un \*ngFor es un array
esta es mi soluci贸n la hice lo m谩s sencilla posible sin perder de vista el \*ngIf ![](https://static.platzi.com/media/user_upload/image-2a53de24-6974-40b1-aef5-11124b80216f.jpg) mi logica me dice que cuando sea 0 se pone el plural
Una alternativa para ```js age: parseInt(newValue, 10) ```es en la declaraci贸n de newValue ```js const newValue = input.valueAsNumber; ```
```js {{tasks().length}} item<ng-container *ngIf="tasks().length > 1">s</ng-container> left ```
<span class="todo-count" *ngIf="todos().length > 0">
        <strong>{{ todos().length }}</strong> item left</span
      >
as铆 fue como yo realic茅 la misi贸n![](https://static.platzi.com/media/user_upload/image-70227969-01c6-4f2f-8862-556a31035efa.jpg)
```js {{toDo().length}} items left <ng-template #item> {{toDo().length}} item left </ng-template> ```
Wenas, aqui mi soluci贸n de acuerdo al codigo de la clase. `聽 聽 聽 聽 {{toDo().length}} items left` `聽 聽 聽 <ng-template #item>聽 聽 聽 聽 聽 聽 聽 聽 聽 {{toDo().length}} item left聽 聽 聽 </ng-template>`
Mi soluci贸n que capaz esta muy larga, pero aqui va!! \\{{ tasks().length}}\ \item\ \items\ \```js {{ tasks().length}} item items ```
```html {{tasks().length}} <ng-container *ngIf="tasks().length <= 1; else elseBlock">item</ng-container> <ng-template #elseBlock>items</ng-template> @if (tasks().length <= 1){item}@else {items} {{tasks().length <= 1?"item":"items"}} left ```
\ \{{*tasks*().length}} \ \<ng-container \*ngIf="*tasks*().length <= 1; else elseBlock">item\</ng-container> \<ng-template #elseBlock>items\</ng-template> *\* @if (*tasks*().length <= 1){item}@else {items} *\* {{*tasks*().length <= 1?"item":"items"}} *\* left \ ```html {{tasks().length}} <ng-container *ngIf="tasks().length <= 1; else elseBlock">item</ng-container> <ng-template #elseBlock>items</ng-template> @if (tasks().length <= 1){item}@else {items} {{tasks().length <= 1?"item":"items"}} left ```

Mi propuesta de soluci贸n:

<span class="todo-count">
 <strong>{{ 
	tasks().length }}</strong> item{{ tasks().length > 1 ? "s" : "" 
    }}
</span>
Yo me fui por lo seguro y lo hice tal cual 馃 \ \{{tasks().length}}\ items聽 \聽 聽 聽 \<ng-template #justItem> \ \{{tasks().length}}\聽 聽 聽 聽 聽 item\ \</ng-template>
\聽 聽 聽 聽 \{{ tasks().length }}\ items聽 聽 聽 \聽 聽 聽 \<ng-template #lessThanOne>聽 聽 聽 聽 \\{{ tasks().length }}\ item\聽 聽 聽 \</ng-template>
```js {{tasks().length}} items <ng-template #elseBlock> {{tasks().length}} item </ng-template> ```\\{{tasks().length}}\ items\ \<ng-template #elseBlock> \\{{tasks().length}}\ item\ \</ng-template>
Mi soluci贸n: `{{ tasks().length }} item{{tasks().length > 1 ? 's': ''}}`
![]()```html @if (tasks().length > 0) { {{tasks().length}} @if (tasks().length === 1) { item } @else { items } left } ``` Mi soluci贸n
con la nueva sintaxis ```js @if(tasks().length > 1) { items } @else { item } left {{ tasks().length }} ```
Mi soluci贸n ```js \聽 聽 聽 聽 \{{tasks().length}} \@if (tasks().length > 1) {items} @else {item} left聽 聽 聽 \ ```
![]()![](https://static.platzi.com/media/user_upload/code-afc96284-8810-4889-9fa8-9da7cf6b2e05.jpg)
Yo lo resolv铆 de est谩 manera \聽 聽 聽 \\{{signalTasks().length}}\聽 聽 聽 聽 item left聽 聽 聽 \聽 聽 聽 \<ng-template #moreItems>聽 聽 聽 聽 \聽 聽 聽 聽 聽 \{{signalTasks().length}}\ items left聽 聽 聽 聽 \聽 聽 聽 \</ng-template>
![]()\ \ {{tasks().length}} \ \<span \*ngIf="tasks().length === 1; else elseBlock" > i tem \ \<ng-template #elseBlock> items \</ng-template>
![](https://static.platzi.com/media/user_upload/image-40909201-28de-4775-b68c-b00fd4cb53cd.jpg)

![](https://static.platzi.com/media/user_upload/image-a5da6dbf-4184-4d22-82f3-1328fb6194fe.jpg)

Esta ser铆a mi soluci贸n:
item<ng-container *ngIf=鈥渢asks().length>1鈥>s</ng-container>

seria bueno que usaras la nueva sintaxis, al estar en la version 17 es bueno ir familiarizandonos con la sintaxis
Esta ser铆a mi soluci贸n adem谩s a帽ad铆 un condicional para ocultar todo el elemento si no hay task. ``` \聽 聽 聽 聽 \{{ tasks().length }}\聽 聽 聽 聽 {{ tasks().length === 1 ? 'item' : 'items' }}聽 聽 聽 \ ```
\聽 聽 聽 聽 \{{tasks().length}} items left\聽 聽 聽 聽 \<ng-template *#elseBlock*>聽 聽 聽 聽 聽 {{tasks().length}} item left聽 聽 聽 聽 \</ng-template>聽 聽 聽 \

Este ser铆a mi forma haciendo uso tambi茅n de un bloque else馃榾

<span *ngIf="tasks().length > 1; else oneElement" class="todo-count"><strong>{{ tasks().length }} </strong> items</span>
        <ng-template #oneElement>
          <span class="todo-count"><strong>{{ tasks().length }} </strong> item</span>
        </ng-template>   

Mi soluci贸n:

<span class="todo-count">
	<strong>{{ tasks().length }}</strong> 
	{{ tasks().length == 1 ? 'item' : 'items' }}
</span>
<span class="todo-count"><strong>{{ tasks().length }} </strong>{{ tasks().length === 1 ? 'item' : 'items' }}</span>