vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #795 from vimulatus/docs/adev-links

Browse Source 
Change aio links to adev
This commit is contained in:
Laforge Thomas
2024-04-22 20:28:20 +02:00
committed by GitHub
parent a42b620619 1be28c4338
commit 5ada8a3186
43 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/src/content/docs/challenges/angular/1-projection.md
View File

@@ -23,15 +23,15 @@ sidebar:
In Angular, content projection is a powerful technique for creating highly customizable components. Utilizing and understanding the concepts of <b>ng-content</b> and <b>ngTemplateOutlet</b> can significantly enhance your ability to create shareable components.
You can learn all about <b>ng-content</b> [here](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) from simple projection to more complex ones.
You can learn all about <b>ng-content</b> [here](https://angular.dev/guide/components/content-projection) from simple projection to more complex ones.
To learn about <b>ngTemplateOutlet</b>, you can find the API documentation [here](https://angular.io/api/common/NgTemplateOutlet) along with some basic examples.
With this two tools in hand, you are now ready to take on the challenge.
With these two tools in hand, you are now ready to take on the challenge.
## Statement
You will start with an fully functional application that includes a dashboard containing a teacher card and a student card. The goal is to implement the city card.
You will start with a fully functional application that includes a dashboard containing a teacher card and a student card. The goal is to implement the city card.
While the application works, the developer experience is far from being optimal. Every time you need to implement a new card, you have to modify the `card.component.ts`. In real-life projects, this component can be shared among many applications. The goal of the challenge is to create a `CardComponent` that can be customized without any modifications. Once you've created this component, you can begin implementing the `CityCardComponent` and ensure you are not touching the `CardComponent`.

2
docs/src/content/docs/challenges/angular/10-pipe-utility.md
View File

@@ -27,7 +27,7 @@ A **pure** pipe is only called when the value changes.\
A **impure** pipe is called every change detection cycle.
:::
There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.dev/guide/pipes).
## Statement

4
docs/src/content/docs/challenges/angular/16-di.md
View File

@@ -1,5 +1,5 @@
---
title: 🔴 Master Dependancy Injection
title: 🔴 Master Dependency Injection
description: Challenge 16 is about mastering how dependancy injection works
author: thomas-laforge
contributors:
@@ -14,7 +14,7 @@ sidebar:
## Information
To successfully complete this challenge, you will need to have a good understanding of how Dependency Injection works inside Angular.
To successfully complete this challenge, you will need to have a good understanding of how [Dependency Injection](https://angular.dev/guide/di/dependency-injection) works inside Angular.
The goal is to provide the `CurrencyService` at the row level, so that each row displays the correct currency. Currently, the `CurrencyService` is only provided at the table level, which results in an error as the same currency is displayed for each row, despite each product having a different currency.

2
docs/src/content/docs/challenges/angular/31-module-to-standalone.md
View File

@@ -26,4 +26,4 @@ The goal of this challenge is to migrate your application from module based comp
## Note
You can also test the [Angular schematic](https://angular.io/guide/standalone-migration) to migrate NgModule to Standalone components. _(Since we are using nx, start your command with nx instead of ng)_
You can also test the [Angular schematic](https://angular.dev/reference/migrations/standalone) to migrate NgModule to Standalone components. _(Since we are using nx, start your command with nx instead of ng)_

2
docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
View File

@@ -16,7 +16,7 @@ sidebar:
## Information
You can improve template type checking for custom directives by adding template guard properties to your directive definition. Angular offers the static function [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) to strongly type structural directives.
You can improve template type checking for custom directives by adding template guard properties to your directive definition. Angular offers the static function [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) to strongly type structural directives.
However the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior.

2
docs/src/content/docs/challenges/angular/43-signal-input.md
View File

@@ -45,6 +45,8 @@ age = signal(0)
age = input<number>()
```
You can read more about signal inputs [here](https://angular.dev/guide/signals/inputs).
## Statement
In this small application, the goal is to refactor the `UserComponent` to utilize `SignalInput`.

2
docs/src/content/docs/challenges/angular/46-simple-animations.md
View File

@@ -20,7 +20,7 @@ Well-designed animations can make your application more fun and straightforward
- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions.
- Good animations intuitively call the user's attention to where it is needed.
I would recommend you read the [official documentation](https://angular.io/guide/animations). You will learn everything that is necessary to successfully complete the challenge.
I would recommend you read the [official documentation](https://angular.dev/guide/animations). You will learn everything that is necessary to successfully complete the challenge.
Otherwise look at this [working example](https://svenson95.github.io/ng-xmp-animations/) and [git repo](https://github.com/svenson95/ng-xmp-animations) to get inspired.

2
docs/src/content/docs/challenges/angular/6-permissions.md
View File

@@ -16,7 +16,7 @@ sidebar:
## Information
Structural directives are directives which change the DOM layout by adding and removing DOM elements. This is an important concept you'll need to improve your angular skills and knowledge. This will be the first part of this challenge. For more information check out the [official documentation](https://angular.io/guide/structural-directives).
Structural directives are directives which change the DOM layout by adding and removing DOM elements. This is an important concept you'll need to improve your angular skills and knowledge. This will be the first part of this challenge. For more information check out the [official documentation](https://angular.dev/guide/directives/structural-directives).
Guards like `CanActivate` or `CanMatch` are also very important, since you'll need it in the most application's you build. If you're not very familiar with route guards, check out this two articles.

2
docs/src/content/docs/challenges/angular/8-pipe-pure.md
View File

@@ -29,7 +29,7 @@ A **pure** pipe is only called when the value changes.\
A **impure** pipe is called every change detection cycle.
:::
There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.dev/guide/pipes).
## Statement

2
docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
View File

@@ -29,7 +29,7 @@ A **pure** pipe is only called when the value changes.\
A **impure** pipe is called every change detection cycle.
:::
There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here]https://angular.dev/guide/pipes).
## Statement

2
docs/src/content/docs/challenges/forms/41-control-value-accessor.md
View File

@@ -12,7 +12,7 @@ sidebar:
## Information
In this challenge, the goal is to create a custom form field that is using the Form API of Angular `ControlValueAccessor`. You can find the documentation [here](https://angular.io/api/forms/ControlValueAccessor). This interface is crucial for creating custom form controls that can interact seamlessly with Angular's forms API.
In this challenge, the goal is to create a custom form field that is using the Form API of Angular `ControlValueAccessor`. You can find the documentation [here](https://angular.dev/api/forms/ControlValueAccessor). This interface is crucial for creating custom form controls that can interact seamlessly with Angular's forms API.
## Statement

2
docs/src/content/docs/challenges/performance/12-scroll-cd.md
View File

@@ -24,7 +24,7 @@ To have a better visualization of the problem, profile your application with Ang
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
:::
You can learn more details about zone pollution and how to resolve it [here](https://angular.io/guide/change-detection-zone-pollution).
You can learn more details about zone pollution and how to resolve it [here](https://angular.dev/best-practices/zone-pollution).
The following video will explain more in-depth the issue of this application.

2
docs/src/content/docs/challenges/performance/34-default-onpush.md
View File

@@ -14,7 +14,7 @@ sidebar:
In this challenge, we will explore the differences and impacts of using `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`.
You can read the [Angular documentation](https://angular.io/guide/change-detection-skipping-subtrees) to learn more about the differences between these strategies.
You can read the [Angular documentation](https://angular.dev/best-practices/skipping-subtrees) to learn more about the differences between these strategies.
In this challenge, all components start with the `Default` strategy. When you type letters inside the input field, you will notice that all components are highlighted in orange.

2
docs/src/content/docs/challenges/performance/35-memoize.md
View File

@@ -14,7 +14,7 @@ sidebar:
In Angular, <b>pure Pipes</b> are very powerful because the value is memoized, which means if the input value doesn't change, the `transform` function of the pipe is not recomputed, and the cached value is outputted.
You can learn more about pipes in the [Angular documentation](https://angular.io/guide/pipes) and inside this [deep dive article](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
You can learn more about pipes in the [Angular documentation](https://angular.dev/guide/pipes) and inside this [deep dive article](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
In this challenge, we start with a button to load a list of people. Each person is associated with a number, and we will use the Fibonacci calculation to create a heavy computation that will slow down the application.

2
docs/src/content/docs/challenges/performance/36-ngfor-optimize.md
View File

@@ -26,7 +26,7 @@ We can also use the <b>Angular DevTool</b> to profile our application and unders
If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
:::
If you need more information about `NgFor`, I invite you to read the [documentation](https://angular.io/api/common/NgFor) first.
If you need more information about `NgFor`, I invite you to read the [documentation](https://angular.dev/api/common/NgFor) first.
## Statement

2
docs/src/content/docs/challenges/performance/40-christmas-web-worker.md
View File

@@ -21,7 +21,7 @@ This application is basic. We click on the **Discover** button to reveal the sur
Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience.
In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find [here](https://angular.io/guide/web-worker).
In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find [here](https://angular.dev/ecosystem/web-workers).
## Statement

4
docs/src/content/docs/es/challenges/angular/1-projection.md
View File

@@ -19,9 +19,9 @@ sidebar:
En Angular, la proyección de contenido es una técnica poderosa para crear componentes altamente personalizables. Utilizar y comprender los conceptos de <b>ng-content</b> y <b>ngTemplateOutlet</b> puede mejorar significativamente su capacidad para crear componentes reutilizables.
Puedes aprender todo sobre <b>ng-content</b> [aquí](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) desde la proyección simple hasta las más complejas.
Puedes aprender todo sobre <b>ng-content</b> [aquí](https://angular.dev/guide/components/content-projection) desde la proyección simple hasta las más complejas.
Para aprender sobre <b>ngTemplateOutlet</b>, puedes encontrar la documentación de la API [aquí](https://angular.io/api/common/NgTemplateOutlet) junto con algunos ejemplos básicos.
Para aprender sobre <b>ngTemplateOutlet</b>, puedes encontrar la documentación de la API [aquí](https://angular.dev/api/common/NgTemplateOutlet) junto con algunos ejemplos básicos.
Con estas dos herramientas en la mano, ahora estás listo para asumir el desafío.

2
docs/src/content/docs/es/challenges/angular/16-di.md
View File

@@ -12,7 +12,7 @@ sidebar:
## Información
Para completar exitosamente este desafío, necesitarás tener un buen entendimiento de cómo funciona la Inyección de Dependencias dentro de Angular.
Para completar exitosamente este desafío, necesitarás tener un buen entendimiento de cómo funciona la Inyección de [Dependencias dentro](https://angular.dev/guide/di/dependency-injection) de Angular.
El objetivo es proporcionar en la tabla el `CurrencyService` a nivel de fila, para que cada fila muestre la moneda correcta. Actualmente, el `CurrencyService` solo se proporciona a nivel de tabla, lo que resulta en un error ya que se muestra la misma moneda en cada fila, a pesar de que cada producto tiene una moneda diferente.

2
docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md
View File

@@ -26,4 +26,4 @@ El objetivo de este desafío es migrar tu aplicación de componentes basados en
## Nota
También puedes probar el [esquema de Angular](https://angular.io/guide/standalone-migration) para migrar NgModule a componentes independientes. _(Dado que estamos usando nx, comienza tu comando con nx en lugar de ng)_
También puedes probar el [esquema de Angular](https://angular.dev/reference/migrations/standalone) para migrar NgModule a componentes independientes. _(Dado que estamos usando nx, comienza tu comando con nx en lugar de ng)_

2
docs/src/content/docs/es/challenges/angular/4-context-outlet-typed.md
View File

@@ -19,7 +19,7 @@ Las declaraciones de tipos permanecerán en ingles, asi como los nombres de los
:::
Angular ofrece la function estática [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) para reforzar el tipo de una directiva estructural.
Angular ofrece la function estática [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) para reforzar el tipo de una directiva estructural.
Sin embargo, el contexto de **NgTemplateOutlet** es de tipo **Object**. Con la ayuda de la guardia mencionada anteriormente, podemos mejorar ese comportamiento.

2
docs/src/content/docs/es/challenges/performance/12-scroll-cd.md
View File

@@ -24,7 +24,7 @@ Para tener una mejor visualización del problema, perfila tu aplicación con Ang
Si no sabes cómo usarlo, lee [la página de introducción al rendimiento](/es/challenges/performance/) primero y vuelve después.
:::
Puedes obtener más detalles sobre la contaminación de la zona y cómo resolverla [aquí](https://angular.io/guide/change-detection-zone-pollution).
Puedes obtener más detalles sobre la contaminación de la zona y cómo resolverla [aquí](https://angular.dev/best-practices/zone-pollution).
El siguiente video explicará más a fondo el problema de esta aplicación.

2
docs/src/content/docs/es/challenges/performance/34-default-onpush.md
View File

@@ -14,7 +14,7 @@ sidebar:
En este desafío, exploraremos las diferencias e impactos de usar `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`.
Puedes leer la [documentación de Angular](https://angular.io/guide/change-detection-skipping-subtrees) para aprender más sobre las diferencias entre estas estrategias.
Puedes leer la [documentación de Angular](https://angular.dev/best-practices/skipping-subtrees) para aprender más sobre las diferencias entre estas estrategias.
En este desafío, todos los componentes comienzan con la estrategia `Default`. Cuando escribas letras dentro del campo de entrada, notarás que todos los componentes se resaltan en naranja.

2
docs/src/content/docs/es/challenges/performance/35-memoize.md
View File

@@ -16,7 +16,7 @@ sidebar:
En Angular, los <b>pure pipes</b> son muy poderosas porque el valor se memoiza, lo que significa que si el valor de entrada no cambia, la función `transform` del pipe no se vuelve a calcular y se emite el valor en caché.
Puedes aprender más sobre pipes en la [documentación de Angular](https://angular.io/guide/pipes) y en este [artículo de inmersión profunda](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
Puedes aprender más sobre pipes en la [documentación de Angular](https://angular.dev/guide/pipes) y en este [artículo de inmersión profunda](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
En este desafío, comenzamos con un botón para cargar una lista de personas. Cada persona está asociada con un número y utilizaremos el cálculo de Fibonacci para crear una computación pesada que ralentizará la aplicación.

2
docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md
View File

@@ -26,7 +26,7 @@ También podemos usar la <b>Angular DevTool</b> para perfilar nuestra aplicació
Si no sabes cómo usarlo, lee primero [la página de introducción al rendimiento](/es/challenges/performance/) y vuelve después.
:::
Si necesitas más información sobre `NgFor`, te invito a leer primero la [documentación](https://angular.io/api/common/NgFor).
Si necesitas más información sobre `NgFor`, te invito a leer primero la [documentación](https://angular.dev/api/common/NgFor).
## Enunciado

4
docs/src/content/docs/pt/challenges/angular/1-projection.md
View File

@@ -19,9 +19,9 @@ sidebar:
Em Angular, projeção de conteúdo é uma técnica robusta para criar componente altamente personalizados. Usar e entender os conceitos do <b>ng-content</b> e <b>ngTemplateOutlet</b> pode melhorar significativamente sua habilidade na criação de componentes compartilháveis.
Você pode aprender tudo sobre <b>ng-content</b> [aqui](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments), desde projeção simples até casos mais complexos.
Você pode aprender tudo sobre <b>ng-content</b> [aqui](https://angular.dev/guide/components/content-projection), desde projeção simples até casos mais complexos.
Para aprender sobre <b>ngTemplateOutlet</b>, você pode acessar a documentação [aqui](https://angular.io/api/common/NgTemplateOutlet) junto a alguns exemplos básicos.
Para aprender sobre <b>ngTemplateOutlet</b>, você pode acessar a documentação [aqui](https://angular.dev/api/common/NgTemplateOutlet) junto a alguns exemplos básicos.
Com essas duas ferramentas em mãos, você está pronto para realizar o desafio.

2
docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md
View File

@@ -25,7 +25,7 @@ Um pipe **puro** é chamado apenas quando o valor muda.\
Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
:::
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes).
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.dev/guide/pipes).
## Declaração

2
docs/src/content/docs/pt/challenges/angular/31-module-to-standalone.md
View File

@@ -26,4 +26,4 @@ O objetivo deste desafio é migrar sua aplicação de componentes baseados em m
## Nota
Você também pode testar o [Angular schematic](https://angular.io/guide/standalone-migration) para migrar NgModule para componentes Standalone. _(Como estamos usando nx, comece seu comando com nx ao invés de ng)_
Você também pode testar o [Angular schematic](https://angular.dev/reference/migrations/standalone) para migrar NgModule para componentes Standalone. _(Como estamos usando nx, comece seu comando com nx ao invés de ng)_

2
docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md
View File

@@ -16,7 +16,7 @@ sidebar:
## Informação
Você pode melhorar a verificação de tipo do template para diretivas personalizadas adicionando guardas de propriedades de template na definição de sua diretiva. Angular oferece a função estática [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) para tipar fortemente diretivas estruturais.
Você pode melhorar a verificação de tipo do template para diretivas personalizadas adicionando guardas de propriedades de template na definição de sua diretiva. Angular oferece a função estática [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) para tipar fortemente diretivas estruturais.
No entanto, o contexto do tipo do **NgTemplateOutlet** é **Object**. Mas com a a ajuda do guarda acima, podemos melhorar esse comportamento.

2
docs/src/content/docs/pt/challenges/angular/46-simple-animations.md
View File

@@ -20,7 +20,7 @@ Animações bem desenhadas pode fazer sua aplicação mais divertida e direta pa
- Movimento aumenta bastante a experiência do usuário, uma vez que animações dão a usuários a change de detectar as respostas da aplicação para suas ações.
- Boas animações intuitivamente chama a atenção do usuário para onde é necessário.
Eu recomendaria você ler a [documentação oficial](https://angular.io/guide/animations) Você aprenderá tudo o que é necessário para completar o desafio com sucesso.
Eu recomendaria você ler a [documentação oficial](https://angular.dev/guide/animations) Você aprenderá tudo o que é necessário para completar o desafio com sucesso.
Caso contrário, olhe este [exemplo funcional](https://svenson95.github.io/ng-xmp-animations/) e o [repositório git](https://github.com/svenson95/ng-xmp-animations) para se inspirar.

2
docs/src/content/docs/pt/challenges/angular/8-pipe-pure.md
View File

@@ -26,7 +26,7 @@ Um pipe **puro** é chamado apenas quando o valor muda.\
Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
:::
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes).
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.dev/guide/pipes).
## Declaração

2
docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md
View File

@@ -26,7 +26,7 @@ Um pipe **puro** é chamado apenas quando o valor muda.\
Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
:::
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes).
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.dev/guide/pipes).
## Declaração

2
docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md
View File

@@ -12,7 +12,7 @@ sidebar:
## Informação
Neste desafio, o objetivo é criar um campo personalizado de formulário que use a Form API do Angular `ControlValueAccessor`. Você pode achar a documentação [aqui](https://angular.io/api/forms/ControlValueAccessor). A interface é crucial para criar controles personalizados de formulário que interaja de forma transparente com a API dos formulários do Angular.
Neste desafio, o objetivo é criar um campo personalizado de formulário que use a Form API do Angular `ControlValueAccessor`. Você pode achar a documentação [aqui](https://angular.dev/api/forms/ControlValueAccessor). A interface é crucial para criar controles personalizados de formulário que interaja de forma transparente com a API dos formulários do Angular.
## Declaração

4
docs/src/content/docs/ru/challenges/angular/1-projection.md
View File

@@ -19,9 +19,9 @@ sidebar:
Проекция контента в Angular - это мощная техника для создания компонентов с гибко настраиваемым внешним видом. Понимание и использование концепций <b>ng-content</b> и <b>ngTemplateOutlet</b> может значительно вам помочь создавать компоненты, предназначенные для повторного использования.
[Здесь](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) вы можете изучить все о <b>ng-content</b>, начиная с простых примеров и до более сложных.
[Здесь](https://angular.dev/guide/components/content-projection) вы можете изучить все о <b>ng-content</b>, начиная с простых примеров и до более сложных.
Документацию <b>ngTemplateOutlet</b>t, вместе с базовыми примерами, можно найти [тут](https://angular.io/api/common/NgTemplateOutlet).
Документацию <b>ngTemplateOutlet</b>t, вместе с базовыми примерами, можно найти [тут](https://angular.dev/api/common/NgTemplateOutlet).
Имея эти два инструмента в своем распоряжении, вы теперь готовы пройти испытание.

2
docs/src/content/docs/ru/challenges/angular/31-module-to-standalone.md
View File

@@ -26,4 +26,4 @@ sidebar:
## Примечание
Вы также можете протестировать [Angular schematic](https://angular.io/guide/standalone-migration) для переноса NgModule на автономные компоненты. _(Поскольку мы используем nx, начните свою команду с nx вместо ng)_
Вы также можете протестировать [Angular schematic](https://angular.dev/reference/migrations/standalone) для переноса NgModule на автономные компоненты. _(Поскольку мы используем nx, начните свою команду с nx вместо ng)_

2
docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md
View File

@@ -13,7 +13,7 @@ sidebar:
## Информация
В Angular есть статическая функция [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) для строгой типизации структурных директив.
В Angular есть статическая функция [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) для строгой типизации структурных директив.
Однако, контекстом **NgTemplateOutlet** является **Object**. Но с помощью вышеупомянутой гарда, мы можем улучшить это поведение.

2
docs/src/content/docs/ru/challenges/angular/46-simple-animations.md
View File

@@ -20,7 +20,7 @@ sidebar:
- Движение значительно улучшает взаимодействие с пользователем, поэтому анимация дает возможность определить реакцию приложения на действия пользователей.
- Хорошая анимация интуитивно привлекает внимание пользователя к тому месту, где это необходимо.
Я бы порекомендовал вам ознакомиться с [официальной документацией](https://angular.io/guide/animations). Вы узнаете все, что необходимо для успешного прохождения испытания.
Я бы порекомендовал вам ознакомиться с [официальной документацией](https://angular.dev/guide/animations). Вы узнаете все, что необходимо для успешного прохождения испытания.
В противном случае посмотрите на этот [рабочий пример](https://svenson95.github.io/ng-xmp-animations/) и [git repo](https://github.com/svenson95/ng-xmp-animations), чтобы вдохновиться.

2
docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md
View File

@@ -26,7 +26,7 @@ Pipes разработаны так, чтобы быть эффективным
**Нечистый** пайп вызывается на каждый цикл обнаружения изменений.
:::
Существуют несколько полезных предопределенных пайпов, таких как DatePipe, UpperCasePipe и CurrencyPipe. Чтобы узнать больше о пайпах в Angular, ознакомьтесь с документацией API [здесь](https://angular.io/guide/pipes).
Существуют несколько полезных предопределенных пайпов, таких как DatePipe, UpperCasePipe и CurrencyPipe. Чтобы узнать больше о пайпах в Angular, ознакомьтесь с документацией API [здесь](https://angular.dev/guide/pipes).
## Пояснение

2
docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md
View File

@@ -12,7 +12,7 @@ sidebar:
## Информация
Цель этого испытания создать пользовательское поле формы, которое использует API формы Angular через `ControlValueAccessor`. Документацию можно посмотреть [здесь](https://angular.io/api/forms/ControlValueAccessor). Этот интерфейс критически важен для создания пользовательских элементов управления формами, которые могут беспрепятственно взаимодействовать с API форм Angular.
Цель этого испытания создать пользовательское поле формы, которое использует API формы Angular через `ControlValueAccessor`. Документацию можно посмотреть [здесь](https://angular.dev/api/forms/ControlValueAccessor). Этот интерфейс критически важен для создания пользовательских элементов управления формами, которые могут беспрепятственно взаимодействовать с API форм Angular.
## Пояснение

2
docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md
View File

@@ -24,7 +24,7 @@ sidebar:
Если вы не знаете, как это сделать, сначала прочтите [введение в производительность](/challenges/performance/).
:::
Вы можете узнать больше деталей о загрязнении зон и способах его решения [здесь](https://angular.io/guide/change-detection-zone-pollution).
Вы можете узнать больше деталей о загрязнении зон и способах его решения [здесь](https://angular.dev/best-practices/zone-pollution).
В следующем видео более подробно объясняется проблема этого приложения.

2
docs/src/content/docs/ru/challenges/performance/34-default-onpush.md
View File

@@ -14,7 +14,7 @@ sidebar:
В этом задании мы рассмотрим различия и последствия использования `ChangeDetectionStrategy.Default` в сравнении с `ChangeDetectionStrategy.OnPush`.
Вы можете прочитать [Angular документацию](https://angular.io/guide/change-detection-skipping-subtrees) чтобы узнать больше о различиях между этими стратегиями.
Вы можете прочитать [Angular документацию](https://angular.dev/best-practices/skipping-subtrees) чтобы узнать больше о различиях между этими стратегиями.
В этом задании все компоненты начинаются со стратегии `Default`. Когда вы вводите буквы в поле ввода, вы заметите, что все компоненты выделены оранжевым цветом.

2
docs/src/content/docs/ru/challenges/performance/35-memoize.md
View File

@@ -14,7 +14,7 @@ sidebar:
В Angular <b> чистые каналы</b> очень эффективны, потому что значение запоминается, что означает, что если входное значение не изменяется, функция "преобразования" канала не вычисляется повторно, а выводится кэшированное значение.
Вы можете узнать больше о каналах в [документации Angular](https://angular.io/guide/pipes) и в этой [статье о глубоком погружении в pipes](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
Вы можете узнать больше о каналах в [документации Angular](https://angular.dev/guide/pipes) и в этой [статье о глубоком погружении в pipes](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
В этом задании мы начнем с кнопки для загрузки списка людей. Каждый человек связан с числом, и мы будем использовать вычисление Фибоначчи для создания сложных вычислений, которые замедлят работу приложения.

2
docs/src/content/docs/ru/challenges/performance/36-ngfor-optimize.md
View File

@@ -26,7 +26,7 @@ sidebar:
Если вы не знаете, как им пользоваться, сначала прочтите [страницу введения в производительность](/задачи/производительность/) и вернитесь после.
:::
Если вам нужна дополнительная информация о `ngFor`, я приглашаю вас сначала ознакомиться с [документацией](https://angular.io/api/common/For).
Если вам нужна дополнительная информация о `ngFor`, я приглашаю вас сначала ознакомиться с [документацией](https://angular.dev/api/common/For).36
## Пояснение

2
docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md
View File

@@ -20,7 +20,7 @@ sidebar:
Так как JavaScript работает в однопоточном режиме, выполнение ресурсоемких задач препятствует обновлению пользовательского интерфейса браузера и реагированию на клики мыши или другие действия. Задача этого испытания - разгрузить основной поток, перенеся сложные вычисления в отдельный поток. Для этой цели мы будем использовать веб-воркеры. Веб-воркеры способны запускать скрипты в фоне, не влияя на основной поток, что позволяет браузеру сохранять высокое качество пользовательского взаимодействия.
В Angular использование этой технологии не так распространено, но внедрить её довольно легко. Есть схематик, который вы можете найти [здесь](https://angular.io/guide/web-worker) чтобы начать.
В Angular использование этой технологии не так распространено, но внедрить её довольно легко. Есть схематик, который вы можете найти [здесь](https://angular.dev/ecosystem/web-workers) чтобы начать.
## Пояснение