From 0a2229971eaff29ada1638b750bd7025662c0b9b Mon Sep 17 00:00:00 2001
From: kabrunko-dev <kabrunko.dev@gmail.com>
Date: Thu, 8 Feb 2024 16:57:11 -0300
Subject: [PATCH] docs(pt): translate challenge 3

---
 .../angular/3-directive-enhancement.md        | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md

diff --git a/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
new file mode 100644
index 000000000..808f99714
--- /dev/null
+++ b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
@@ -0,0 +1,46 @@
+---
+title: 🟠 Aprimoramento de Diretiva
+description: Desafio 3 é sobre o aprimoramento de uma diretiva nativa
+author: thomas-laforge
+challengeNumber: 3
+command: angular-ngfor-enhancement
+blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
+sidebar:
+  order: 101
+---
+
+:::note[Nota]
+Este exercício pode ser obsoleto com o novo controle de fluxo e do bloco de empty state dentro do bloco `@for`. No entanto, **diretivas estruturais** não serão removidas tão cedo, por isso você ainda pode aprender bastante com este exercício.
+:::
+
+## Informação
+
+Diretiva é uma ferramente poderosa oferecida pelo framework Angular. Você pode usar o princípio DRY compartilhando a lógica dentro de uma diretiva e aplicando ela em qualquer componente que quiser.
+
+Mas a verdadeira vantagem é que você consegue melhorar uma diretiva pré-existente que não **pertence** a você.
+
+## Declaração
+
+Neste exercício, queremos mostrar uma lista de pessoas. Se a lista está vazio, você deve mostrar _" the list is empty !! "_.
+
+Atualmente, temos:
+
+```typescript
+    <ng-container *ngIf="persons.length > 0; else emptyList">
+      <div *ngFor="let person of persons">
+        {{ person.name }}
+      </div>
+    </ng-container>
+    <ng-template #emptyList>The list is empty !!</ng-template>
+```
+
+Queremos nos livrar do `ng-container` escrevendo:
+
+```typescript
+    <div *ngFor="let person of persons; empty: emptyList">
+    {{ person.name }}
+    </div>
+    <ng-template #emptyList>The list is empty !!</ng-template>
+```
+
+Objetivo é **melhorar a diretiva ngFor**.