Uso de ngIf

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

Gustavo Pino

Asi fue como lo solucione

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

Jesús Sánchez González

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

Dave Juanes

hace 2 meses

``` \\{{ tasks().length }}\ item{{ tasks().length > 1 ? 's' : '' }} left\ ```

Omar Stiven Rivera Rocha

hace 8 meses

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.

Josue David Cardenas Avila

hace 8 días

Así solucioné el reto: \\{{ tasks().length }}\ items\ \<ng-template #elseBlock>\\{{ tasks().length }}\ item\\</ng-template >

Anderson Duarte Santos

hace 9 días

Como es solo una palabra utilice el método de condicional ternaria de la siguiente forma: ```js {{tasks().length}} {{tasks().length <= 1 ?'item': 'items'}} ```

Emilio Nicolás Mendoza Patti

hace un mes

Esta seria la forma usando \*ngIf en lo particular se entiende facil pero se me parece muy verboso ```html

{{tasks().length}} items

<ng-template #elseBlock> {{tasks().length}} item </ng-template> ``` Yo prefiero mas esta forma: ```js

{{tasks().length}} item{{tasks().length > 1 ? 's': ''}} ```

Luis fernando Rengifo ruiz

hace un mes

Así de fácil ```js

{{tasks().length}} tareas

``` \

{{tasks().length}} tarea\s\ \

Roberto Gonzalez Perez

hace 2 meses

Así fue como lo resolví, aplicando lo visto en clase:\ \{{tasks().length}}\ Items \ \<ng-template #elseBlock> \\{{tasks().length}}\ Item\ \</ng-template> ```js {{tasks().length}} Items <ng-template #elseBlock> {{tasks().length}} Item </ng-template> ```

Luis Angel

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 `

Daniel Felipe Varón Quintero

Para quienes acaban de llegar (septiembre 2024) buscando la nueva forma de lógica, sería así con el @if ` @if (tasks().length === 1) { {{ tasks().length }} item left } else {{ tasks().length }} items left ` Espero les sirva!

Diego A Malpica L

mi solucion fue asi para practicar lo visto no pense en modificar la etiqueca span has que vi los otros comentarios. \\{{tasks().length}}\ items\ \<ng-template *#elseblock*> \\{{tasks().length}}\ item\\</ng-template>

David Azael Rangel González

Esta fue mi solución: ```js <ng-template [ngIf]="tasks().length !== 1" [ngIfElse]="individualTask"> {{ tasks().length }} items </ng-template> <ng-template #individualTask> {{ tasks().length }} item </ng-template> ```O en imagen ![](https://static.platzi.com/media/user_upload/imagen-9d386676-a79a-448b-9e41-6c147ff1cebc.jpg)

Angel Carballeira

![](https://static.platzi.com/media/user_upload/image-05660a4a-1eba-42ba-9291-a2a6fd5ac018.jpg) Esta fue mi solución, algo rebuscada. Le agregue que si las tareas son 0 , indique que no hay ninguna tarea.![]()

David Ceja Zapata

Mi solución aplicando la nueva sintaxis ```js {{countCompletedTasks()}} @if(countCompletedTasks() > 1){ tasks to complete }@else { task to complete } ```\ \{{countCompletedTasks()}}\ @if(countCompletedTasks() > 1){ tasks to complete }@else { task to complete } \

Juan Guillermo Perez Cardozo

con las nuevas directivas podria quedar asi: \\{{ tasks().length }}\ item@if (tasks().length>1) {s} left\

Brandon Smith Bravo Ortiz

Aquí dejo mi aporte a la solución ![](https://static.platzi.com/media/user_upload/image-3bf2b0f9-34f1-4fc7-bdf7-5a6a032d6e3c.jpg)

Laura Garrido

hace 5 meses

Compañeros le comparto mi solución ```js {{ tasks().length }}Items <ng-template #itemOne>{{ tasks().length }} Item</ng-template> ```

Ana Velez Ossa

hace 5 meses

Mi solución al reto: ```ts {{ tasksSignal().length }} {{tasksSignal().length > 1 ? 'items':'item'}} ```\\{{ tasksSignal().length }}\ {{tasksSignal().length > 1 ? 'items':'item'}}\

Julio Bastidas

![](https://static.platzi.com/media/user_upload/image-ef9d1c35-09ad-4adc-b64d-a0a12f68adac.jpg)

Julio Bastidas

```js {{ tasks().length }} items left ```

Julio Bastidas

```js {{ tasks().length }} items left ```\ \{{ tasks().length }}\ item\s\ left \

Adrian Robles

![]()![](https://static.platzi.com/media/user_upload/Screen%20Shot%202024-06-13%20at%2006.18.16-42fa48ec-e81f-4156-b2e5-b8bf086005c1.jpg)El uso de ng container permite encapsular elementos html, NO crea u nodo extra en el DOM a diferencia de la etiqueta \

y permite combinar las directivas ngIF y ngFor

Stiven Arboleda

**Mi solución** ![](https://static.platzi.com/media/user_upload/image-ddd6a396-b809-46ca-b1b9-f12428c52e73.jpg) Para agregar, también se puede hacer sin el uso de un **\*ngIf** y se vería algo así: {{ tasks().length <= 1 ? "item" : "items" }}

Jorge Morales

```js {{ tasks().length }} <ng-container *ngIf="tasks().length > 1; else singular"> items </ng-container> <ng-template #singular>item</ng-template> left ``` \ \{{ tasks().length }}\ \<ng-container \*ngIf="tasks().length > 1; else singular"> items \</ng-container> \<ng-template #singular>item\</ng-template> left \

Josué Ramírez Hernández

Con los nuevos bloques condicionales de Angular el código queda así: @if (tasks().length > 1) { Items } @else { Item }

Josué Ramírez Hernández

Con los nuevos bloques condicionales queda así el código: `@if (tasks().length > 1) { Items } @else { Item }`

Daniel Bastidas

mi solucion ![](https://static.platzi.com/media/user_upload/image-1f34a133-7dc0-4083-bb9d-27c12f5a4a50.jpg)![](https://static.platzi.com/media/user_upload/image-5180214b-ddc0-4842-950f-f3171229ff5e.jpg)

PAULINO GUZMAN

Estoy trabajando con la nueva sintaxis de angular 17: `{{tasks().length}}@if (tasks().length>1) { Items } @else { Item } `

JHONATAN AGUILERA GARCIA

Mi solución al reto ````js {{ tasks().length }} items <ng-template #elseBlock> item </ng-template> ``` \ \{{ tasks().length }}\ \ items\ \<ng-template #elseBlock> \ item\ \</ng-template> \ ````

Pamela Pinzón

Nota: Normalmente lo que tenemos en un \*ngFor es un array

Walter Marcelo Chacón

hace 8 meses

Una alternativa para ```js age: parseInt(newValue, 10) ```es en la declaración de newValue ```js const newValue = input.valueAsNumber; ```

Ivan Mendez

<span class="todo-count" *ngIf="todos().length > 0">
        <strong>{{ todos().length }}</strong> item left</span
      >

Joseph Christoffer Condori Murga

así fue como yo realicé la misión![](https://static.platzi.com/media/user_upload/image-70227969-01c6-4f2f-8862-556a31035efa.jpg)

Danny Alejandro fernandez gallego

```js {{toDo().length}} items left <ng-template #item> {{toDo().length}} item left </ng-template> ```

Danny Alejandro fernandez gallego

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>`

norelys solorzano

Mi solución que capaz esta muy larga, pero aqui va!! \\{{ tasks().length}}\ \item\ \items\ \```js {{ tasks().length}} item items ```

Jeisson Felipe Rodriguez Prieto

```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 ```

Jeisson Felipe Rodriguez Prieto

\ \{{*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 ```

Elioenai Garcia Garcia

Mi propuesta de solución:

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

Angel Eduardo Ramos Mena

Yo me fui por lo seguro y lo hice tal cual 🫡 \ \{{tasks().length}}\ items \ \<ng-template #justItem> \ \{{tasks().length}}\ item\ \</ng-template>

SteffiG

\ \{{ tasks().length }}\ items \ \<ng-template #lessThanOne> \\{{ tasks().length }}\ item\ \</ng-template>

julio cesar valadez castañeda

```js {{tasks().length}} items <ng-template #elseBlock> {{tasks().length}} item </ng-template> ```\\{{tasks().length}}\ items\ \<ng-template #elseBlock> \\{{tasks().length}}\ item\ \</ng-template>

Juan Diego Garzón Ovalle

Mi solución: `{{ tasks().length }} item{{tasks().length > 1 ? 's': ''}}`

Carlos Molero

![]()```html @if (tasks().length > 0) { {{tasks().length}} @if (tasks().length === 1) { item } @else { items } left } ``` Mi solución

Luis Felipe Moreno Rondon

con la nueva sintaxis ```js @if(tasks().length > 1) { items } @else { item } left {{ tasks().length }} ```

Jhon_B

Mi solución ```js \ \{{tasks().length}} \@if (tasks().length > 1) {items} @else {item} left \ ```

Christian camilo Ruiz osorio

![]()![](https://static.platzi.com/media/user_upload/code-afc96284-8810-4889-9fa8-9da7cf6b2e05.jpg)

Brandon Smith Bravo Ortiz

Yo lo resolví de está manera \ \\{{signalTasks().length}}\ item left \ \<ng-template #moreItems> \ \{{signalTasks().length}}\ items left \ \</ng-template>

José Luis Jiménez

![]()\ \ {{tasks().length}} \ \<span \*ngIf="tasks().length === 1; else elseBlock" > i tem \ \<ng-template #elseBlock> items \</ng-template>

Edgar Roy Huaman Pumachapi

![](https://static.platzi.com/media/user_upload/image-40909201-28de-4775-b68c-b00fd4cb53cd.jpg)

ANDRES ALFONSO MIRA MEJIA

✅

Juan Camilo Salazar Rojas

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

Moisés Omar Martínez García

Esta sería mi solución:
item<ng-container *ngIf=“tasks().length>1”>s</ng-container>

Jeisson Santiago Cortes Ortiz

seria bueno que usaras la nueva sintaxis, al estar en la version 17 es bueno ir familiarizandonos con la sintaxis

Juan Pablo Cortés

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' }} \ ```

Elizabeth Flores Huamaní

\ \{{tasks().length}} items left\ \<ng-template *#elseBlock*> {{tasks().length}} item left \</ng-template> \

Israel Garcia

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>

Gustavo Medina Limon

Mi solución:

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

Cristian Leiton Valencia