mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
Merge branch 'docs-pipes-changes' of https://github.com/svenson95/angular-challenges into docs-pipes-changes
This commit is contained in:
Sven Brodny
5
docs/src/content/authors/wandrille-guesdon.json
Normal file
5
docs/src/content/authors/wandrille-guesdon.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Wandrille Guesdon",
|
||||
"linkedin": "https://www.linkedin.com/in/wandrille-guesdon-53a54684/",
|
||||
"github": "https://github.com/wandri"
|
||||
}
|
||||
@@ -40,4 +40,4 @@ While the application works, the developer experience is far from being optimal.
|
||||
|
||||
- Try to work with the new built-in control flow syntax for loops and conditionals (documentation [here](https://angular.dev/guide/templates/control-flow))
|
||||
- Use the signal API to manage your components state (documentation [here](https://angular.dev/guide/signals))
|
||||
- To reference the template, use a directive instead of magic strings
|
||||
- To reference the template, use a directive instead of magic strings ([What is wrong with magic strings?](https://softwareengineering.stackexchange.com/a/365344))
|
||||
|
||||
@@ -23,4 +23,4 @@ In version 16, Angular introduced a new `Input` that can listen to route data. Y
|
||||
|
||||
## Statement
|
||||
|
||||
The goal of this exercice is to refactor the code to use the new `RouterInput` strategy.
|
||||
The goal of this exercise is to refactor the code to use the new `RouterInput` strategy.
|
||||
|
||||
@@ -10,20 +10,20 @@ sidebar:
|
||||
---
|
||||
|
||||
:::note
|
||||
This exercice can feel obsolete with the new control flow and the empty block inside the `@for` block. However **structural directives** are not going to be deleted any time soon, so you can still learn a lot from this exercice.
|
||||
This exercise can feel obsolete with the new control flow and the empty block inside the `@for` block. However **structural directives** are not going to be deleted any time soon, so you can still learn a lot from this exercise.
|
||||
:::
|
||||
|
||||
## Information
|
||||
|
||||
Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principal by having shared logic inside a directive and applying it to any component you want.
|
||||
Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principle by having shared logic inside a directive and applying it to any component you want.
|
||||
|
||||
But the real power is that you can enhance an already existing directive which moreover doesn't **belong** to you.
|
||||
|
||||
## Statement
|
||||
|
||||
In this exercice, we have a want to display a list of persons. If the list is empty, you must display _" the list is empty !! "_.
|
||||
In this exercise, we have a want to display a list of persons. If the list is empty, you must display _" the list is empty !! "_.
|
||||
|
||||
Currently we have :
|
||||
Currently we have:
|
||||
|
||||
```typescript
|
||||
<ng-container *ngIf="persons.length > 0; else emptyList">
|
||||
@@ -34,7 +34,7 @@ Currently we have :
|
||||
<ng-template #emptyList>The list is empty !!</ng-template>
|
||||
```
|
||||
|
||||
We want to get rid of the ng-container by writing :
|
||||
We want to get rid of the `ng-container` by writing:
|
||||
|
||||
```typescript
|
||||
<div *ngFor="let person of persons; empty: emptyList">
|
||||
@@ -43,4 +43,4 @@ We want to get rid of the ng-container by writing :
|
||||
<ng-template #emptyList>The list is empty !!</ng-template>
|
||||
```
|
||||
|
||||
The goal is to **improve the ngFor directive**
|
||||
The goal is to **improve the ngFor directive**.
|
||||
|
||||
@@ -17,9 +17,9 @@ However the context of **NgTemplateOutlet** type is **Object**. But with the hel
|
||||
|
||||
## Statement
|
||||
|
||||
In this exercice, we want to learn how to strongly type our ng-template in our AppComponent.
|
||||
In this exercise, we want to learn how to strongly type our ng-template in our AppComponent.
|
||||
|
||||
This exercice has two levels of complexity.
|
||||
This exercise has two levels of complexity.
|
||||
|
||||
### Level 1: known Interface
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ challengeNumber: 44
|
||||
command: angular-view-transition
|
||||
sidebar:
|
||||
order: 208
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Information
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: 🔴 React in angular
|
||||
description: Challenge 45 is about learning how to benefit from the numerous libraries in React
|
||||
author: wandrille-guesdon
|
||||
challengeNumber: 45
|
||||
command: angular-react-in-angular
|
||||
sidebar:
|
||||
order: 209
|
||||
badge: New
|
||||
---
|
||||
|
||||
The goal of this challenge is to use a React component inside an Angular application.
|
||||
|
||||
Many components are available in React, and it can be interesting to use them in an Angular application. The goal is to create a React component and use it in an Angular application.
|
||||
|
||||
## Information
|
||||
|
||||
In this challenge, we have a simple application and a react component `ReactPost` in `app/react` to illustrate a react component from a library.
|
||||
|
||||
## Statement
|
||||
|
||||
- Your task is to display the posts with the React component `ReactPost`.
|
||||
- When you select a post, the post should be highlighted.
|
||||
|
||||
In order to play with the react component, you should start by installing the react dependencies.
|
||||
|
||||
```bash
|
||||
npm i --save react react-dom
|
||||
npm i --save-dev @types/react @types/react-dom
|
||||
```
|
||||
|
||||
## Constraints
|
||||
|
||||
- Do not transform the react component in an angular component. The React component is pretty simple and can be written with ease in Angular. But **the goal is to use the React component**.
|
||||
|
||||
### Hint
|
||||
|
||||
<details>
|
||||
<summary>Hint 1 - Configuration</summary>
|
||||
Allow the React files in tsconfig.json
|
||||
|
||||
```
|
||||
{
|
||||
...
|
||||
"compilerOptions": {
|
||||
...
|
||||
"jsx": "react"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Hint 2 - Initialization</summary>
|
||||
Create a react root with `createRoot(...)`
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Hint 3 - Display</summary>
|
||||
To render the component, it should look like this:
|
||||
|
||||
```
|
||||
<react root>.render(
|
||||
<React.StrictMode>
|
||||
...
|
||||
</React.StrictMode>
|
||||
)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Hint 4 - Design</summary>
|
||||
Do not forget to allow the react file in Tailwind.
|
||||
</details>
|
||||
@@ -14,7 +14,7 @@ Communicating and having a global/local state in sync with your backend is the h
|
||||
|
||||
## Statement
|
||||
|
||||
In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
|
||||
In this exercise, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
|
||||
|
||||
Currently we have a working example but filled with lots of bad practices.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ sidebar:
|
||||
order: 113
|
||||
---
|
||||
|
||||
For this exercice, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
|
||||
For this exercise, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
|
||||
|
||||
## Information
|
||||
|
||||
|
||||
@@ -23,16 +23,16 @@ hero:
|
||||
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
import MyIcon from '../../../components/MyIcon.astro';
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
|
||||
|
||||
<CardGrid>
|
||||
<Card title="44 Desafíos">
|
||||
Este repositorio contiene 44 desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
|
||||
<Card title="45 Desafíos">
|
||||
Este repositorio contiene 45 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
|
||||
Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
|
||||
</Card>
|
||||
|
||||
<Card title="Suscríbete para ser notificado sobre los últimos retos">
|
||||
<SubscriptionForm isNote={false} lang="es"/>
|
||||
<SubscriptionForm isNote={false} lang="es" />
|
||||
</Card>
|
||||
|
||||
<Card title="Conviértete en un Contribuidor de OSS">
|
||||
@@ -57,7 +57,8 @@ import SubscriptionForm from '../../../components/SubscriptionForm.astro'
|
||||
</Card>
|
||||
|
||||
<Card title="Prepárate para Entrevistas">
|
||||
Completar estos desafíos te preparará para cualquier desafío técnico que puedas encontrar en un rol de frontend durante las entrevistas.
|
||||
Completar estos desafíos te preparará para cualquier desafío técnico que
|
||||
puedas encontrar en un rol de frontend durante las entrevistas.
|
||||
</Card>
|
||||
|
||||
<Card title="Patrocinio">
|
||||
|
||||
@@ -25,15 +25,15 @@ hero:
|
||||
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
import MyIcon from '../../../components/MyIcon.astro';
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
|
||||
|
||||
<CardGrid>
|
||||
<Card title="44 Défis">
|
||||
Ce répertoire rassemble 44 défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
|
||||
<Card title="45 Défis">
|
||||
Ce répertoire rassemble 45 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
|
||||
</Card>
|
||||
|
||||
<Card title="Subscribe to get notify of latest challenges">
|
||||
<SubscriptionForm isNote={false} lang="fr"/>
|
||||
<SubscriptionForm isNote={false} lang="fr" />
|
||||
</Card>
|
||||
|
||||
<Card title="Devenir un Mainteneur OSS">
|
||||
|
||||
@@ -13,7 +13,7 @@ hero:
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Go to the latest Challenge
|
||||
link: /challenges/angular/44-view-transition/
|
||||
link: /challenges/angular/45-react-in-angular/
|
||||
icon: rocket
|
||||
- text: Give a star
|
||||
link: https://github.com/tomalaforge/angular-challenges
|
||||
@@ -24,17 +24,16 @@ hero:
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
import MyIcon from '../../components/MyIcon.astro';
|
||||
|
||||
import SubscriptionForm from '../../components/SubscriptionForm.astro'
|
||||
|
||||
import SubscriptionForm from '../../components/SubscriptionForm.astro';
|
||||
|
||||
<CardGrid>
|
||||
<Card title="44 Challenges">
|
||||
This repository gathers 44 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
|
||||
<Card title="45 Challenges">
|
||||
This repository gathers 45 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
|
||||
These challenges resolve around real-life issues or specific features to elevate your skills.
|
||||
</Card>
|
||||
|
||||
<Card title="Subscribe to get notify of latest challenges">
|
||||
<SubscriptionForm isNote={false}/>
|
||||
<SubscriptionForm isNote={false} />
|
||||
</Card>
|
||||
|
||||
<Card title="Become an OSS Maintainer">
|
||||
|
||||
@@ -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**.
|
||||
@@ -6,7 +6,6 @@ challengeNumber: 44
|
||||
command: angular-view-transition
|
||||
sidebar:
|
||||
order: 208
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Informação
|
||||
|
||||
@@ -23,19 +23,20 @@ hero:
|
||||
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
import MyIcon from '../../../components/MyIcon.astro';
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
|
||||
|
||||
<CardGrid>
|
||||
<Card title="44 Desafios">
|
||||
Este repositório possui 44 desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
|
||||
<Card title="45 Desafios">
|
||||
Este repositório possui 45 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
|
||||
<b>Ngrx</b> e <b>Typescript</b>.
|
||||
Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
|
||||
melhorar suas habilidades.
|
||||
</Card>
|
||||
|
||||
<Card title="Inscreva-se para ser notificado do desafio mais recente">
|
||||
<SubscriptionForm isNote={false} lang="pt"/>
|
||||
</Card>
|
||||
{' '}
|
||||
<Card title="Inscreva-se para ser notificado do desafio mais recente">
|
||||
<SubscriptionForm isNote={false} lang="pt" />
|
||||
</Card>
|
||||
|
||||
{' '}
|
||||
|
||||
|
||||
@@ -23,36 +23,38 @@ hero:
|
||||
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
import MyIcon from '../../../components/MyIcon.astro';
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
|
||||
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
|
||||
|
||||
<CardGrid>
|
||||
<Card title="44 Испытания">
|
||||
Этот репозиторий содержит 44 испытания, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
|
||||
<Card title="45 Испытания">
|
||||
Этот репозиторий содержит 45 Испытания, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
|
||||
Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.
|
||||
</Card>
|
||||
|
||||
<Card title="Subscribe to get notify of latest challenges">
|
||||
<SubscriptionForm isNote={false} lang="ru"/>
|
||||
<SubscriptionForm isNote={false} lang="ru" />
|
||||
</Card>
|
||||
|
||||
<Card title="Станьте мейнтейнером открытого программного обеспечения (OSS)">
|
||||
Одна из целей этого репозитория <b>снизить барьер</b> для разработки
|
||||
открытого программного обеспечения (OSS). Решив эти задачи, вы поймете,
|
||||
как начать вносить свой вклад в любой другой проект с открытым исходным кодом.
|
||||
Одна из целей этого репозитория <b>снизить барьер</b> для разработки открытого
|
||||
программного обеспечения (OSS). Решив эти задачи, вы поймете, как начать
|
||||
вносить свой вклад в любой другой проект с открытым исходным кодом.
|
||||
</Card>
|
||||
|
||||
<Card title="Учитесь вместе с другими">
|
||||
Изучение и использование нового фреймворка всегда сопряжено с трудностями.
|
||||
В этом наборе испытаний содержатся реальные примеры задач, чтобы закрепить на практике то, чему вы научились.
|
||||
Любой может оставить комментарий или предложить помощь.
|
||||
Изучение и использование нового фреймворка всегда сопряжено с трудностями. В
|
||||
этом наборе испытаний содержатся реальные примеры задач, чтобы закрепить на
|
||||
практике то, чему вы научились. Любой может оставить комментарий или
|
||||
предложить помощь.
|
||||
<b>
|
||||
Учиться одному - здорово, но обучение вместе с другими поможет вам добиться большего.
|
||||
Учиться одному - здорово, но обучение вместе с другими поможет вам добиться
|
||||
большего.
|
||||
</b>
|
||||
</Card>
|
||||
|
||||
<Card title="Вносите свой вклад">
|
||||
У вас есть идея или интересный баг? Не стесняйтесь;{' '}
|
||||
<b>Создавайте свои собственные испытания</b> не теряя времени.
|
||||
<b>Создавайте свои собственные испытания</b> не теряя времени.
|
||||
</Card>
|
||||
|
||||
<Card title="Подготовьтесь к собеседованию">
|
||||
@@ -61,8 +63,9 @@ import SubscriptionForm from '../../../components/SubscriptionForm.astro'
|
||||
</Card>
|
||||
|
||||
<Card title="Поддержка">
|
||||
Это бесплатный проект, и он будет оставаться таковым как можно дольше.
|
||||
Однако вся работа ведется в мое свободное время, включая создание новых испытаний и ревью их решений(PRs).
|
||||
Это бесплатный проект, и он будет оставаться таковым как можно дольше. Однако
|
||||
вся работа ведется в мое свободное время, включая создание новых испытаний и
|
||||
ревью их решений(PRs).
|
||||
<b>Спонсорство может поддержать меня и способствовать развитию проекта</b>.
|
||||
</Card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user