diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md index 5b50412..0fce427 100644 --- a/docs/src/content/docs/challenges/angular/1-projection.md +++ b/docs/src/content/docs/challenges/angular/1-projection.md @@ -23,15 +23,15 @@ sidebar: In Angular, content projection is a powerful technique for creating highly customizable components. Utilizing and understanding the concepts of ng-content and ngTemplateOutlet can significantly enhance your ability to create shareable components. -You can learn all about ng-content [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 ng-content [here](https://angular.dev/guide/components/content-projection) from simple projection to more complex ones. To learn about ngTemplateOutlet, 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`. diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index 5c99a30..3dd9797 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -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 diff --git a/docs/src/content/docs/challenges/angular/16-di.md b/docs/src/content/docs/challenges/angular/16-di.md index 97f62b0..c0dddf9 100644 --- a/docs/src/content/docs/challenges/angular/16-di.md +++ b/docs/src/content/docs/challenges/angular/16-di.md @@ -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. diff --git a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md index 701bf14..93b0850 100644 --- a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md +++ b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md @@ -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)_ diff --git a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md index 7f0f697..1663f1b 100644 --- a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md @@ -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. diff --git a/docs/src/content/docs/challenges/angular/43-signal-input.md b/docs/src/content/docs/challenges/angular/43-signal-input.md index d086620..79c6d12 100644 --- a/docs/src/content/docs/challenges/angular/43-signal-input.md +++ b/docs/src/content/docs/challenges/angular/43-signal-input.md @@ -45,6 +45,8 @@ age = signal(0) age = input() ``` +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`. diff --git a/docs/src/content/docs/challenges/angular/46-simple-animations.md b/docs/src/content/docs/challenges/angular/46-simple-animations.md index 06c12d7..3806a68 100644 --- a/docs/src/content/docs/challenges/angular/46-simple-animations.md +++ b/docs/src/content/docs/challenges/angular/46-simple-animations.md @@ -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. diff --git a/docs/src/content/docs/challenges/angular/6-permissions.md b/docs/src/content/docs/challenges/angular/6-permissions.md index a4a270b..f6c4f50 100644 --- a/docs/src/content/docs/challenges/angular/6-permissions.md +++ b/docs/src/content/docs/challenges/angular/6-permissions.md @@ -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. diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 48ed235..9530053 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -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 diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index 3853c3d..23d43ea 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -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 diff --git a/docs/src/content/docs/challenges/forms/41-control-value-accessor.md b/docs/src/content/docs/challenges/forms/41-control-value-accessor.md index 75ff281..57f4473 100644 --- a/docs/src/content/docs/challenges/forms/41-control-value-accessor.md +++ b/docs/src/content/docs/challenges/forms/41-control-value-accessor.md @@ -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 diff --git a/docs/src/content/docs/challenges/performance/12-scroll-cd.md b/docs/src/content/docs/challenges/performance/12-scroll-cd.md index d932140..e1d5bd1 100644 --- a/docs/src/content/docs/challenges/performance/12-scroll-cd.md +++ b/docs/src/content/docs/challenges/performance/12-scroll-cd.md @@ -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. diff --git a/docs/src/content/docs/challenges/performance/34-default-onpush.md b/docs/src/content/docs/challenges/performance/34-default-onpush.md index aa73a98..2817fe7 100644 --- a/docs/src/content/docs/challenges/performance/34-default-onpush.md +++ b/docs/src/content/docs/challenges/performance/34-default-onpush.md @@ -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. diff --git a/docs/src/content/docs/challenges/performance/35-memoize.md b/docs/src/content/docs/challenges/performance/35-memoize.md index b7029ca..c40a4ae 100644 --- a/docs/src/content/docs/challenges/performance/35-memoize.md +++ b/docs/src/content/docs/challenges/performance/35-memoize.md @@ -14,7 +14,7 @@ sidebar: In Angular, pure Pipes 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. diff --git a/docs/src/content/docs/challenges/performance/36-ngfor-optimize.md b/docs/src/content/docs/challenges/performance/36-ngfor-optimize.md index 9da26b0..8ac1181 100644 --- a/docs/src/content/docs/challenges/performance/36-ngfor-optimize.md +++ b/docs/src/content/docs/challenges/performance/36-ngfor-optimize.md @@ -26,7 +26,7 @@ We can also use the Angular DevTool 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 diff --git a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md index 5e21e10..e25f062 100644 --- a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md +++ b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md @@ -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 diff --git a/docs/src/content/docs/es/challenges/angular/1-projection.md b/docs/src/content/docs/es/challenges/angular/1-projection.md index d17874f..e0e1250 100644 --- a/docs/src/content/docs/es/challenges/angular/1-projection.md +++ b/docs/src/content/docs/es/challenges/angular/1-projection.md @@ -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 ng-content y ngTemplateOutlet puede mejorar significativamente su capacidad para crear componentes reutilizables. -Puedes aprender todo sobre ng-content [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 ng-content [aquí](https://angular.dev/guide/components/content-projection) desde la proyección simple hasta las más complejas. -Para aprender sobre ngTemplateOutlet, puedes encontrar la documentación de la API [aquí](https://angular.io/api/common/NgTemplateOutlet) junto con algunos ejemplos básicos. +Para aprender sobre ngTemplateOutlet, 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. diff --git a/docs/src/content/docs/es/challenges/angular/16-di.md b/docs/src/content/docs/es/challenges/angular/16-di.md index d2a3b59..547a732 100644 --- a/docs/src/content/docs/es/challenges/angular/16-di.md +++ b/docs/src/content/docs/es/challenges/angular/16-di.md @@ -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. diff --git a/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md index e4810ef..307fc64 100644 --- a/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md +++ b/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md @@ -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)_ diff --git a/docs/src/content/docs/es/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/es/challenges/angular/4-context-outlet-typed.md index 388bd5b..915aae7 100644 --- a/docs/src/content/docs/es/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/es/challenges/angular/4-context-outlet-typed.md @@ -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. diff --git a/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md b/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md index cf9ede8..39fed75 100644 --- a/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md +++ b/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md @@ -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. diff --git a/docs/src/content/docs/es/challenges/performance/34-default-onpush.md b/docs/src/content/docs/es/challenges/performance/34-default-onpush.md index 79073f8..d33d007 100644 --- a/docs/src/content/docs/es/challenges/performance/34-default-onpush.md +++ b/docs/src/content/docs/es/challenges/performance/34-default-onpush.md @@ -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. diff --git a/docs/src/content/docs/es/challenges/performance/35-memoize.md b/docs/src/content/docs/es/challenges/performance/35-memoize.md index a888e75..4cd9b39 100644 --- a/docs/src/content/docs/es/challenges/performance/35-memoize.md +++ b/docs/src/content/docs/es/challenges/performance/35-memoize.md @@ -16,7 +16,7 @@ sidebar: En Angular, los pure pipes 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. diff --git a/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md b/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md index 7566dde..7b70859 100644 --- a/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md +++ b/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md @@ -26,7 +26,7 @@ También podemos usar la Angular DevTool 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 diff --git a/docs/src/content/docs/pt/challenges/angular/1-projection.md b/docs/src/content/docs/pt/challenges/angular/1-projection.md index 642963a..2b782b2 100644 --- a/docs/src/content/docs/pt/challenges/angular/1-projection.md +++ b/docs/src/content/docs/pt/challenges/angular/1-projection.md @@ -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 ng-content e ngTemplateOutlet pode melhorar significativamente sua habilidade na criação de componentes compartilháveis. -Você pode aprender tudo sobre ng-content [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 ng-content [aqui](https://angular.dev/guide/components/content-projection), desde projeção simples até casos mais complexos. -Para aprender sobre ngTemplateOutlet, você pode acessar a documentação [aqui](https://angular.io/api/common/NgTemplateOutlet) junto a alguns exemplos básicos. +Para aprender sobre ngTemplateOutlet, 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. diff --git a/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md index 03e0055..6e4f355 100644 --- a/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md @@ -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 diff --git a/docs/src/content/docs/pt/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/pt/challenges/angular/31-module-to-standalone.md index ffe9c3c..e4878fd 100644 --- a/docs/src/content/docs/pt/challenges/angular/31-module-to-standalone.md +++ b/docs/src/content/docs/pt/challenges/angular/31-module-to-standalone.md @@ -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)_ diff --git a/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md index b04225c..0a52b68 100644 --- a/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md @@ -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. diff --git a/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md b/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md index a895902..2ef7e17 100644 --- a/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md +++ b/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md @@ -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. diff --git a/docs/src/content/docs/pt/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/pt/challenges/angular/8-pipe-pure.md index f096da7..8791492 100644 --- a/docs/src/content/docs/pt/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/pt/challenges/angular/8-pipe-pure.md @@ -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 diff --git a/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md index ff5aaeb..5a5c5e7 100644 --- a/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md @@ -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 diff --git a/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md b/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md index e453606..cad37f2 100644 --- a/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md +++ b/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md @@ -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 diff --git a/docs/src/content/docs/ru/challenges/angular/1-projection.md b/docs/src/content/docs/ru/challenges/angular/1-projection.md index d5118b6..1f2a3a9 100644 --- a/docs/src/content/docs/ru/challenges/angular/1-projection.md +++ b/docs/src/content/docs/ru/challenges/angular/1-projection.md @@ -19,9 +19,9 @@ sidebar: Проекция контента в Angular - это мощная техника для создания компонентов с гибко настраиваемым внешним видом. Понимание и использование концепций ng-content и ngTemplateOutlet может значительно вам помочь создавать компоненты, предназначенные для повторного использования. -[Здесь](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) вы можете изучить все о ng-content, начиная с простых примеров и до более сложных. +[Здесь](https://angular.dev/guide/components/content-projection) вы можете изучить все о ng-content, начиная с простых примеров и до более сложных. -Документацию ngTemplateOutlett, вместе с базовыми примерами, можно найти [тут](https://angular.io/api/common/NgTemplateOutlet). +Документацию ngTemplateOutlett, вместе с базовыми примерами, можно найти [тут](https://angular.dev/api/common/NgTemplateOutlet). Имея эти два инструмента в своем распоряжении, вы теперь готовы пройти испытание. diff --git a/docs/src/content/docs/ru/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/ru/challenges/angular/31-module-to-standalone.md index 46135ff..ae90ba4 100644 --- a/docs/src/content/docs/ru/challenges/angular/31-module-to-standalone.md +++ b/docs/src/content/docs/ru/challenges/angular/31-module-to-standalone.md @@ -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)_ diff --git a/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md index 199ed32..ca73a05 100644 --- a/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md @@ -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**. Но с помощью вышеупомянутой гарда, мы можем улучшить это поведение. diff --git a/docs/src/content/docs/ru/challenges/angular/46-simple-animations.md b/docs/src/content/docs/ru/challenges/angular/46-simple-animations.md index deccbe1..04d143c 100644 --- a/docs/src/content/docs/ru/challenges/angular/46-simple-animations.md +++ b/docs/src/content/docs/ru/challenges/angular/46-simple-animations.md @@ -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), чтобы вдохновиться. diff --git a/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md index 7f4288c..facf723 100644 --- a/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md @@ -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). ## Пояснение diff --git a/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md b/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md index 6969bc5..00f898f 100644 --- a/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md +++ b/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md @@ -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. ## Пояснение diff --git a/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md b/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md index 432c34f..d23106b 100644 --- a/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md +++ b/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md @@ -24,7 +24,7 @@ sidebar: Если вы не знаете, как это сделать, сначала прочтите [введение в производительность](/challenges/performance/). ::: -Вы можете узнать больше деталей о загрязнении зон и способах его решения [здесь](https://angular.io/guide/change-detection-zone-pollution). +Вы можете узнать больше деталей о загрязнении зон и способах его решения [здесь](https://angular.dev/best-practices/zone-pollution). В следующем видео более подробно объясняется проблема этого приложения. diff --git a/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md b/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md index ff53ccb..c049bf9 100644 --- a/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md +++ b/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md @@ -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`. Когда вы вводите буквы в поле ввода, вы заметите, что все компоненты выделены оранжевым цветом. diff --git a/docs/src/content/docs/ru/challenges/performance/35-memoize.md b/docs/src/content/docs/ru/challenges/performance/35-memoize.md index ab6ad41..5ff5d5a 100644 --- a/docs/src/content/docs/ru/challenges/performance/35-memoize.md +++ b/docs/src/content/docs/ru/challenges/performance/35-memoize.md @@ -14,7 +14,7 @@ sidebar: В Angular чистые каналы очень эффективны, потому что значение запоминается, что означает, что если входное значение не изменяется, функция "преобразования" канала не вычисляется повторно, а выводится кэшированное значение. -Вы можете узнать больше о каналах в [документации 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). В этом задании мы начнем с кнопки для загрузки списка людей. Каждый человек связан с числом, и мы будем использовать вычисление Фибоначчи для создания сложных вычислений, которые замедлят работу приложения. diff --git a/docs/src/content/docs/ru/challenges/performance/36-ngfor-optimize.md b/docs/src/content/docs/ru/challenges/performance/36-ngfor-optimize.md index f815fed..244d14f 100644 --- a/docs/src/content/docs/ru/challenges/performance/36-ngfor-optimize.md +++ b/docs/src/content/docs/ru/challenges/performance/36-ngfor-optimize.md @@ -26,7 +26,7 @@ sidebar: Если вы не знаете, как им пользоваться, сначала прочтите [страницу введения в производительность](/задачи/производительность/) и вернитесь после. ::: -Если вам нужна дополнительная информация о `ngFor`, я приглашаю вас сначала ознакомиться с [документацией](https://angular.io/api/common/For). +Если вам нужна дополнительная информация о `ngFor`, я приглашаю вас сначала ознакомиться с [документацией](https://angular.dev/api/common/For).36 ## Пояснение diff --git a/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md index 2377546..25eda47 100644 --- a/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md +++ b/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md @@ -20,7 +20,7 @@ sidebar: Так как JavaScript работает в однопоточном режиме, выполнение ресурсоемких задач препятствует обновлению пользовательского интерфейса браузера и реагированию на клики мыши или другие действия. Задача этого испытания - разгрузить основной поток, перенеся сложные вычисления в отдельный поток. Для этой цели мы будем использовать веб-воркеры. Веб-воркеры способны запускать скрипты в фоне, не влияя на основной поток, что позволяет браузеру сохранять высокое качество пользовательского взаимодействия. -В Angular использование этой технологии не так распространено, но внедрить её довольно легко. Есть схематик, который вы можете найти [здесь](https://angular.io/guide/web-worker) чтобы начать. +В Angular использование этой технологии не так распространено, но внедрить её довольно легко. Есть схематик, который вы можете найти [здесь](https://angular.dev/ecosystem/web-workers) чтобы начать. ## Пояснение