feat(): merge challenge 57

This commit is contained in:
thomas
2025-02-28 11:51:26 +01:00
parent b8d10b940c
commit 3f6f6def3d
24 changed files with 309 additions and 17 deletions

View File

@@ -0,0 +1,37 @@
---
title: 🟢 Content Projection Default
description: Challenge 57 is about content projection default container
author: thomas-laforge
contributors:
- tomalaforge
challengeNumber: 57
command: angular-content-projection-default
sidebar:
order: 22
badge: New
---
## Information
Content projection in Angular allows developers to create flexible and customizable components by passing content from the parent component to the child component dynamically using `<ng-content>`.
Currently, we have a shared component that relies on `input` properties to receive and display data. However, we want to improve its flexibility by replacing all `inputs` with content projection while maintaining the same appearance and behavior.
## Statement
Your task is to refactor the existing shared component to remove all `input` properties and instead use Angulars `<ng-content>` for content projection. After your modifications, the application should look and function exactly as before, but without any `input`.
### Steps to complete:
- Identify all `input` properties in the shared component.
- Remove them and replace them with appropriate `<ng-content>` containers.
- Adjust the parent component to pass the necessary content using content projection instead of binding to `input`s.
- Ensure that the application still displays the same UI and behavior after the changes.
## Constraints
- You must not use any `input` in the shared component.
- The applications UI and functionality must remain unchanged after the refactoring.
- You must use `<ng-content>` for content projection.
- Do not introduce additional properties or services to pass data.
- Ensure that projected content is correctly styled and positioned as before.

View File

@@ -8,7 +8,6 @@ challengeNumber: 56
command: signal-forms-and-signal
sidebar:
order: 211
badge: New
---
## Information

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir al Desafío más reciente
link: /es/challenges/signal/56-forms-and-signal/
link: /es/challenges/angular/57-content-projection-default/
icon: rocket
- text: Dar una estrella
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="56 Desafíos">
Este repositorio contiene 56 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
<Card title="57 Desafíos">
Este repositorio contiene 57 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>

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Aller au dernier Challenge
link: /fr/challenges/signal/56-forms-and-signal/
link: /fr/challenges/angular/57-content-projection-default/
icon: rocket
- text: Donne une étoile
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="56 Défis">
Ce répertoire rassemble 56 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="57 Défis">
Ce répertoire rassemble 57 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">

View File

@@ -27,8 +27,8 @@ import MyIcon from '../../components/MyIcon.astro';
import SubscriptionForm from '../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="56 Challenges">
This repository gathers 56 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
<Card title="57 Challenges">
This repository gathers 57 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>

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir para o desafio mais recente
link: /pt/challenges/signal/56-forms-and-signal/
link: /pt/challenges/angular/57-content-projection-default/
icon: rocket
- text: Dar uma estrela
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="56 Desafios">
Este repositório possui 56 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
<Card title="57 Desafios">
Este repositório possui 57 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.

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Перейти к последней задаче
link: /ru/challenges/signal/56-forms-and-signal/
link: /ru/challenges/angular/57-content-projection-default/
icon: rocket
- text: Добавить звезду
link: https://github.com/tomalaforge/angular-challenges