mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 04:43:03 -05:00
Merge remote-tracking branch 'upstream/main'
This commit is contained in:
@@ -100,6 +100,15 @@
|
||||
"challenge"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "alcaidio",
|
||||
"name": "Timothy Alcaide",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/17033036?v=4",
|
||||
"profile": "https://twitter.com/alcaidio",
|
||||
"contributions": [
|
||||
"challenge"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "alan-bio",
|
||||
"name": "Alan Dragicevich",
|
||||
|
||||
14
.github/github-action/action.yml
vendored
Normal file
14
.github/github-action/action.yml
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
name: 'Hello World'
|
||||
description: 'Greet someone and record the time'
|
||||
inputs:
|
||||
github_token:
|
||||
description: A GitHub token.
|
||||
required: false
|
||||
default: ${{ github.token }}
|
||||
repo:
|
||||
description: The owner and repository name.
|
||||
required: false
|
||||
default: ${{ github.repository }}
|
||||
runs:
|
||||
using: 'node20'
|
||||
main: 'index.js'
|
||||
16
.github/github-action/contributors.js
vendored
Normal file
16
.github/github-action/contributors.js
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
const contributors = [
|
||||
'tomalaforge',
|
||||
'alcaidio',
|
||||
'svenson95',
|
||||
'jdegand',
|
||||
'DeveshChau',
|
||||
'stillst',
|
||||
'wandri',
|
||||
'webbomj',
|
||||
'kabrunko-dev',
|
||||
'Sanjar1304'
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
contributors
|
||||
};
|
||||
40
.github/github-action/index.js
vendored
Normal file
40
.github/github-action/index.js
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
const github = require('@actions/github');
|
||||
const core = require('@actions/core');
|
||||
const { contributors } = require('./contributors');
|
||||
|
||||
async function run() {
|
||||
try {
|
||||
const title = github.context.payload.pull_request.title;
|
||||
const labels = ['answer'];
|
||||
|
||||
const match = title.match(/Answer:\s*(\d+)/);
|
||||
if (match) {
|
||||
labels.push(String(parseInt(match[1], 10)));
|
||||
}
|
||||
|
||||
const actor = github.context.actor;
|
||||
if(contributors.includes(actor)) {
|
||||
labels.push('to be reviewed');
|
||||
}
|
||||
|
||||
const githubToken = core.getInput('github_token');
|
||||
|
||||
const [owner, repo] = core.getInput('repo').split('/');
|
||||
const number = github.context.issue.number;
|
||||
|
||||
const octokit = github.getOctokit(githubToken);
|
||||
await octokit.rest.issues.addLabels({
|
||||
labels,
|
||||
owner,
|
||||
repo,
|
||||
issue_number: number
|
||||
});
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
core.error(e);
|
||||
core.setFailed(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
run();
|
||||
22
.github/workflows/label-issue.yml
vendored
22
.github/workflows/label-issue.yml
vendored
@@ -2,28 +2,20 @@ name: Add Labels
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [ opened ]
|
||||
types: [ opened, edited, synchronize ]
|
||||
|
||||
jobs:
|
||||
add_supporters:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ startsWith(github.event.pull_request.title, 'Answer') }}
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: add labels
|
||||
uses: actions-ecosystem/action-add-labels@v1
|
||||
if: ${{ contains( fromJson('[ "tomalaforge", "alcaidio" , "svenson95", "jdegand", "DeveshChau", "stillst", "wandri", "webbomj", "kabrunko-dev", "Sanjar1304"]'), github.actor ) && startsWith(github.event.pull_request.title, 'Answer') }}
|
||||
with:
|
||||
labels: supporter
|
||||
add_answers:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v2
|
||||
- name: Install dependencies
|
||||
run: npm i @actions/core @actions/github
|
||||
|
||||
- name: add labels
|
||||
uses: actions-ecosystem/action-add-labels@v1
|
||||
if: ${{ startsWith(github.event.pull_request.title, 'Answer') }}
|
||||
- name: Add labels
|
||||
uses: ./.github/github-action/
|
||||
with:
|
||||
labels: answer
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
@@ -40,24 +40,27 @@ Check [all 48 challenges](https://angular-challenges.vercel.app/)
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/DeveshChau"><img src="https://avatars.githubusercontent.com/u/9509673?v=4?s=100" width="100px;" alt="Devesh Chaudhari"/><br /><sub><b>Devesh Chaudhari</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=DeveshChau" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3ADeveshChau" title="Bug reports">🐛</a> <a href="#challenge-DeveshChau" title="Create a challenge">🧩</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/stillst"><img src="https://avatars.githubusercontent.com/u/1463098?v=4?s=100" width="100px;" alt="stillst"/><br /><sub><b>stillst</b></sub></a><br /><a href="#challenge-stillst" title="Create a challenge">🧩</a> <a href="#translation-ru-stillst" title="Translate in Russian">🇷🇺</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://wandrille-guesdon.com/"><img src="https://avatars.githubusercontent.com/u/15016833?v=4?s=100" width="100px;" alt="Wandrille"/><br /><sub><b>Wandrille</b></sub></a><br /><a href="#challenge-wandri" title="Create a challenge">🧩</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://twitter.com/alcaidio"><img src="https://avatars.githubusercontent.com/u/17033036?v=4?s=100" width="100px;" alt="Timothy Alcaide"/><br /><sub><b>Timothy Alcaide</b></sub></a><br /><a href="#challenge-alcaidio" title="Create a challenge">🧩</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/edimitchel"><img src="https://avatars.githubusercontent.com/u/2922851?v=4?s=100" width="100px;" alt="Michel EDIGHOFFER"/><br /><sub><b>Michel EDIGHOFFER</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=edimitchel" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/marryday"><img src="https://avatars.githubusercontent.com/u/57489315?v=4?s=100" width="100px;" alt="Evseev Yuriy"/><br /><sub><b>Evseev Yuriy</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Amarryday" title="Bug reports">🐛</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/tomer953"><img src="https://avatars.githubusercontent.com/u/1807493?v=4?s=100" width="100px;" alt="Tomer953"/><br /><sub><b>Tomer953</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Atomer953" title="Bug reports">🐛</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/dmmishchenko"><img src="https://avatars.githubusercontent.com/u/51910160?v=4?s=100" width="100px;" alt="Dmitriy Mishchenko"/><br /><sub><b>Dmitriy Mishchenko</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=dmmishchenko" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="http://www.sagardev.com.np"><img src="https://avatars.githubusercontent.com/u/30800393?v=4?s=100" width="100px;" alt="Sagar Devkota"/><br /><sub><b>Sagar Devkota</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/ho-ssain"><img src="https://avatars.githubusercontent.com/u/61125174?v=4?s=100" width="100px;" alt="Hossain K. M."/><br /><sub><b>Hossain K. M.</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=ho-ssain" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/kabrunko-dev/"><img src="https://avatars.githubusercontent.com/u/142346548?v=4?s=100" width="100px;" alt="Diogo Nishikawa"/><br /><sub><b>Diogo Nishikawa</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Code">💻</a> <a href="#translation-pt-kabrunko-dev" title="Translate in Portuguese">🇵🇹</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="http://www.streamoverlaypro.com"><img src="https://avatars.githubusercontent.com/u/1978642?v=4?s=100" width="100px;" alt="Erick Rodriguez"/><br /><sub><b>Erick Rodriguez</b></sub></a><br /><a href="#translation-es-ErickRodrCodes" title="Translate in Spanish">🇪🇸</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://eduardoroth.dev"><img src="https://avatars.githubusercontent.com/u/5419161?v=4?s=100" width="100px;" alt="Eduardo Roth"/><br /><sub><b>Eduardo Roth</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=eduardoRoth" title="Documentation">📖</a> <a href="#translation-es-eduardoRoth" title="Translate in Spanish">🇪🇸</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/1fbr"><img src="https://avatars.githubusercontent.com/u/63980689?v=4?s=100" width="100px;" alt="Fernando Bello"/><br /><sub><b>Fernando Bello</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=1fbr" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/webbomj"><img src="https://avatars.githubusercontent.com/u/86595717?v=4?s=100" width="100px;" alt="Лапин Андрей (Lapin Andrey)"/><br /><sub><b>Лапин Андрей (Lapin Andrey)</b></sub></a><br /><a href="#translation-ru-webbomj" title="Translate in Russian">🇷🇺</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Dinozavvvr"><img src="https://avatars.githubusercontent.com/u/45518871?v=4?s=100" width="100px;" alt="Dinar Shagaliev"/><br /><sub><b>Dinar Shagaliev</b></sub></a><br /><a href="#translation-ru-Dinozavvvr" title="Translate in Russian">🇷🇺</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -81,6 +84,6 @@ Contributions of any kind are welcome.
|
||||
|
||||
If I have forgotten to add you as a contributor, please reach out to me. 🙏
|
||||
|
||||
## Licensev
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
### Run Application
|
||||
|
||||
```bash
|
||||
npx nx serve form-dialog-alert
|
||||
npx nx serve avoid-losing-form-data
|
||||
```
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/forms/48-form-dialog-alert/).
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/forms/48-avoid-losing-form-data/).
|
||||
@@ -1,26 +1,26 @@
|
||||
{
|
||||
"name": "form-dialog-alert",
|
||||
"name": "avoid-losing-form-data",
|
||||
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"sourceRoot": "apps/forms/form-dialog-alert/src",
|
||||
"sourceRoot": "apps/forms/avoid-losing-form-data/src",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular-devkit/build-angular:application",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/apps/forms/form-dialog-alert",
|
||||
"index": "apps/forms/form-dialog-alert/src/index.html",
|
||||
"browser": "apps/forms/form-dialog-alert/src/main.ts",
|
||||
"outputPath": "dist/apps/forms/avoid-losing-form-data",
|
||||
"index": "apps/forms/avoid-losing-form-data/src/index.html",
|
||||
"browser": "apps/forms/avoid-losing-form-data/src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "apps/forms/form-dialog-alert/tsconfig.app.json",
|
||||
"tsConfig": "apps/forms/avoid-losing-form-data/tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"apps/forms/form-dialog-alert/src/favicon.ico",
|
||||
"apps/forms/form-dialog-alert/src/assets"
|
||||
"apps/forms/avoid-losing-form-data/src/favicon.ico",
|
||||
"apps/forms/avoid-losing-form-data/src/assets"
|
||||
],
|
||||
"styles": ["apps/forms/form-dialog-alert/src/styles.scss"],
|
||||
"styles": ["apps/forms/avoid-losing-form-data/src/styles.scss"],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
@@ -51,10 +51,10 @@
|
||||
"executor": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "form-dialog-alert:build:production"
|
||||
"buildTarget": "avoid-losing-form-data:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "form-dialog-alert:build:development"
|
||||
"buildTarget": "avoid-losing-form-data:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
@@ -62,7 +62,7 @@
|
||||
"extract-i18n": {
|
||||
"executor": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "form-dialog-alert:build"
|
||||
"buildTarget": "avoid-losing-form-data:build"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>form-dialog-alert</title>
|
||||
<title>avoid-losing-form-data</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
title: 🔴 Master Dependancy Injection
|
||||
description: Challenge 16 is about masjering how dependancy injection works
|
||||
description: Challenge 16 is about mastering how dependancy injection works
|
||||
author: thomas-laforge
|
||||
contributors:
|
||||
- tomalaforge
|
||||
- tomer953
|
||||
- kabrunko-dev
|
||||
challengeNumber: 16
|
||||
command: angular-di
|
||||
sidebar:
|
||||
@@ -23,7 +24,7 @@ One way to achieve this is by adding a second argument to the pipe, but this is
|
||||
|
||||
- Your task is to display the correct currency for each row.
|
||||
|
||||
## Constraints:
|
||||
## Constraints
|
||||
|
||||
- You cannot modify the pipe.
|
||||
- You cannot wrap the row inside a component, as this will break the layout.
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
title: 🟠 Avoid losing form data
|
||||
description: Challenge 48 is about Bob 🧙♂️ the product owner, he wants to develop a new feature in response to customer complaints about losing form input information.
|
||||
author: timothy-alcaide
|
||||
contributors:
|
||||
- alcaidio
|
||||
challengeNumber: 48
|
||||
command: form-dialog-alert
|
||||
sidebar:
|
||||
order: 121
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Context
|
||||
|
||||
As a member of the development team, you need to address a specific request from the product owner, 🧙♂️ Bob. He wants to develop a new feature in response to customer complaints about losing form input information.
|
||||
|
||||
## User Story
|
||||
|
||||
Here's the feature expressed as a user story (functional expectation) :
|
||||
|
||||
"As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the /form page after I have started entering information into the form."
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
1. On the /form page:
|
||||
|
||||
- If the input text has been pre-filled, then an alert dialog box opens.
|
||||
- Otherwise, the user navigates normally.
|
||||
|
||||
2. The content of `dialog.component.ts` must be use for your dialog box content.
|
||||
3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
|
||||
4. Maximize the use of the new concepts and syntax in the latest version of Angular.
|
||||
|
||||
<details>
|
||||
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
|
||||
<ul>
|
||||
<li>Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss)</li>
|
||||
<li>Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).</li>
|
||||
</ul>
|
||||
</details>
|
||||
@@ -22,7 +22,7 @@ Una forma de lograr esto es agregando un segundo argumento al pipe, pero esto no
|
||||
|
||||
- Tu tarea es mostrar la moneda correcta para cada fila.
|
||||
|
||||
## Restricciones:
|
||||
## Restricciones
|
||||
|
||||
- No puedes modificar el pipe.
|
||||
- No puedes envolver la fila dentro de un componente, ya que esto rompería el diseño.
|
||||
|
||||
@@ -13,7 +13,7 @@ hero:
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Ir al Desafío más reciente
|
||||
link: /es/challenges/forms/48-dialog-alert-form/
|
||||
link: /es/challenges/forms/48-avoid-losing-form-data/
|
||||
icon: rocket
|
||||
- text: Dar una estrella
|
||||
link: https://github.com/tomalaforge/angular-challenges
|
||||
|
||||
@@ -13,7 +13,7 @@ hero:
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Aller au dernier Challenge
|
||||
link: /fr/challenges/forms/48-dialog-alert-form/
|
||||
link: /fr/challenges/forms/48-avoid-losing-form-data/
|
||||
icon: rocket
|
||||
- text: Donne une étoile
|
||||
link: https://github.com/tomalaforge/angular-challenges
|
||||
|
||||
@@ -13,7 +13,7 @@ hero:
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Go to the latest Challenge
|
||||
link: /challenges/forms/48-dialog-alert-form/
|
||||
link: /challenges/forms/48-avoid-losing-form-data/
|
||||
icon: rocket
|
||||
- text: Give a star
|
||||
link: https://github.com/tomalaforge/angular-challenges
|
||||
|
||||
28
docs/src/content/docs/pt/challenges/angular/16-di.md
Normal file
28
docs/src/content/docs/pt/challenges/angular/16-di.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: 🔴 Dominando Injeção de Dependência
|
||||
description: Desafio 16 é sobre dominar como injeção de dependência funciona
|
||||
author: thomas-laforge
|
||||
contributors:
|
||||
- kabrunko-dev
|
||||
challengeNumber: 16
|
||||
command: angular-di
|
||||
sidebar:
|
||||
order: 203
|
||||
---
|
||||
|
||||
## Informação
|
||||
|
||||
Para completar este desafio com sucesso, precisaremos ter um bom entendimento de como Injeção de Dependência funciona dentro do Angular.
|
||||
|
||||
O objetivo é providenciar o `CurrencyService` no nível de linha, para que cada linha ilustre a moeda correta. Atualmente, `CurrencyService` é providenciado apenas em nível de tabela, o que resulta em um erro que mostrar a mesma moeda para cada linha, apesar de cada produto ter uma moeda diferente.
|
||||
|
||||
Uma maneira de alcançar isso é adicionando um segundo argumento para o pipe, mas isso não é permitido para este desafio.
|
||||
|
||||
## Declaração
|
||||
|
||||
- Sua tarefa é mostrar a moeda correta para cada linha.
|
||||
|
||||
## Restrições
|
||||
|
||||
- Você não pode modificar o pipe.
|
||||
- Você não pode envolver a linha dentro de um componente, uma vez que isso quebrará o layout.
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: 🟢 Animações Simples
|
||||
description: Desafio 46 é sobre aprender a API de animação integrada do Angular
|
||||
author: sven-brodny
|
||||
contributors:
|
||||
- svenson95
|
||||
challengeNumber: 46
|
||||
command: angular-simple-animations
|
||||
sidebar:
|
||||
order: 17
|
||||
---
|
||||
|
||||
## Informação
|
||||
|
||||
Este é o primeiro de dois desafios de animação, o objetivo desta série é dominar animações no Angular.
|
||||
|
||||
Animações bem desenhadas pode fazer sua aplicação mais divertida e direta para usar, mas elas não são apenas comésticas. Animações pode melhorar sua aplicação e a experiência do usuário de várias maneiras:
|
||||
|
||||
- Sem animações, transições de página web podem parecer abruptas e desagradáveis.
|
||||
- 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.
|
||||
|
||||
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.
|
||||
|
||||
## Declaração
|
||||
|
||||
O objetivo deste desafio é adicionar animações, elas devem executar quando o usuário acessa a página ou a recarrega.
|
||||
|
||||
## Restrições
|
||||
|
||||
- Não use nenhum CSS e use a API integrada do Angular `@angular/animations`.
|
||||
- Não dispare as animações com um botão como nos exemplos, mas quando o usuário entrar ou recarregar a página.
|
||||
|
||||
### Nível 1
|
||||
|
||||
Adicionar uma animação de movimento e fading para os parágrados no lado esquerdo.
|
||||
|
||||
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
|
||||
</video>
|
||||
|
||||
### Nível 2
|
||||
|
||||
Adicionar uma animação cambaleante para a lista no lado direito.
|
||||
|
||||
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
|
||||
</video>
|
||||
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
|
||||
</video>
|
||||
</video>
|
||||
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
|
||||
</video>
|
||||
</video>
|
||||
</video>
|
||||
</video>
|
||||
@@ -13,7 +13,7 @@ hero:
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Ir para o desafio mais recente
|
||||
link: /pt/challenges/forms/48-dialog-alert-form/
|
||||
link: /pt/challenges/forms/48-avoid-losing-form-data/
|
||||
icon: rocket
|
||||
- text: Dar uma estrela
|
||||
link: https://github.com/tomalaforge/angular-challenges
|
||||
|
||||
@@ -13,7 +13,7 @@ hero:
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Перейти к последней задаче
|
||||
link: /ru/challenges/forms/48-dialog-alert-form/
|
||||
link: /ru/challenges/forms/48-avoid-losing-form-data/
|
||||
icon: rocket
|
||||
- text: Добавить звезду
|
||||
link: https://github.com/tomalaforge/angular-challenges
|
||||
|
||||
9002
package-lock.json
generated
9002
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,6 +12,8 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@actions/core": "^1.10.1",
|
||||
"@actions/github": "^6.0.0",
|
||||
"@angular/animations": "17.3.1",
|
||||
"@angular/cdk": "17.3.1",
|
||||
"@angular/common": "17.3.1",
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
## Warning:
|
||||
|
||||
- If you want feedback or review, you must support the project on GitHub:
|
||||
- $5 per review
|
||||
- $25 for lifetime reviews
|
||||
- [$5 per review](https://github.com/sponsors/tomalaforge)
|
||||
- [$25 for lifetime reviews](https://github.com/sponsors/tomalaforge)
|
||||
- Create one of more challenges
|
||||
- Have many valuable contributions to the project
|
||||
|
||||
|
||||
Reference in New Issue
Block a user