diff --git a/README.md b/README.md
index ddc2323..1e43bdf 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
## Challenges
-Check [all 43 challenges](https://angular-challenges.vercel.app/)
+Check [all 44 challenges](https://angular-challenges.vercel.app/)
## Contributors ✨
diff --git a/apps/angular/view-transition/.eslintrc.json b/apps/angular/view-transition/.eslintrc.json
new file mode 100644
index 0000000..8ebcbfd
--- /dev/null
+++ b/apps/angular/view-transition/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+ "extends": ["../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "app",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "app",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}
diff --git a/apps/angular/view-transition/README.md b/apps/angular/view-transition/README.md
new file mode 100644
index 0000000..02e39b3
--- /dev/null
+++ b/apps/angular/view-transition/README.md
@@ -0,0 +1,13 @@
+# View Transition
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve angular-view-transition
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/44-view-transition/).
diff --git a/apps/angular/view-transition/project.json b/apps/angular/view-transition/project.json
new file mode 100644
index 0000000..d0a27fd
--- /dev/null
+++ b/apps/angular/view-transition/project.json
@@ -0,0 +1,73 @@
+{
+ "name": "angular-view-transition",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/angular/view-transition/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/angular/view-transition",
+ "index": "apps/angular/view-transition/src/index.html",
+ "browser": "apps/angular/view-transition/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/angular/view-transition/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/angular/view-transition/src/favicon.ico",
+ "apps/angular/view-transition/src/assets"
+ ],
+ "styles": ["apps/angular/view-transition/src/styles.scss"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "angular-view-transition:build:production"
+ },
+ "development": {
+ "buildTarget": "angular-view-transition:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "angular-view-transition:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint",
+ "outputs": ["{options.outputFile}"]
+ }
+ }
+}
diff --git a/apps/angular/view-transition/src/app/app.component.ts b/apps/angular/view-transition/src/app/app.component.ts
new file mode 100644
index 0000000..1e49189
--- /dev/null
+++ b/apps/angular/view-transition/src/app/app.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+ standalone: true,
+ imports: [RouterLink, RouterOutlet],
+ selector: 'app-root',
+ template: `
+
+
+
+
+
+ `,
+ host: {
+ class: 'flex flex-col gap-10 border p-10 h-screen',
+ },
+ styles: [''],
+})
+export class AppComponent {}
diff --git a/apps/angular/view-transition/src/app/app.config.ts b/apps/angular/view-transition/src/app/app.config.ts
new file mode 100644
index 0000000..790c11a
--- /dev/null
+++ b/apps/angular/view-transition/src/app/app.config.ts
@@ -0,0 +1,14 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withViewTransitions } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideRouter(
+ [
+ { path: 'bar', loadComponent: () => import('./bar.component') },
+ { path: 'foo', loadComponent: () => import('./foo.component') },
+ ],
+ withViewTransitions(),
+ ),
+ ],
+};
diff --git a/apps/angular/view-transition/src/app/bar.component.ts b/apps/angular/view-transition/src/app/bar.component.ts
new file mode 100644
index 0000000..011f14a
--- /dev/null
+++ b/apps/angular/view-transition/src/app/bar.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+@Component({
+ selector: 'app-bar',
+ standalone: true,
+ imports: [],
+ template: `
+ bar-component
+ `,
+ host: {
+ class: 'block h-full bg-green-500',
+ },
+})
+export default class BarComponent {}
diff --git a/apps/angular/view-transition/src/app/foo.component.ts b/apps/angular/view-transition/src/app/foo.component.ts
new file mode 100644
index 0000000..4f19ff3
--- /dev/null
+++ b/apps/angular/view-transition/src/app/foo.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-foo',
+ standalone: true,
+ imports: [],
+ template: `
+ app-foo
+ `,
+ host: {
+ class: 'block h-full bg-red-500',
+ },
+ styles: `
+ .count {
+ view-transition-name: count;
+ width: fit-content
+ }
+ `,
+})
+export default class FooComponent {}
diff --git a/apps/angular/view-transition/src/assets/.gitkeep b/apps/angular/view-transition/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/angular/view-transition/src/favicon.ico b/apps/angular/view-transition/src/favicon.ico
new file mode 100644
index 0000000..317ebcb
Binary files /dev/null and b/apps/angular/view-transition/src/favicon.ico differ
diff --git a/apps/angular/view-transition/src/index.html b/apps/angular/view-transition/src/index.html
new file mode 100644
index 0000000..6050d63
--- /dev/null
+++ b/apps/angular/view-transition/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ angular-view-transition
+
+
+
+
+
+
+
+
diff --git a/apps/angular/view-transition/src/main.ts b/apps/angular/view-transition/src/main.ts
new file mode 100644
index 0000000..f3a7223
--- /dev/null
+++ b/apps/angular/view-transition/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+ console.error(err),
+);
diff --git a/apps/angular/view-transition/src/styles.scss b/apps/angular/view-transition/src/styles.scss
new file mode 100644
index 0000000..a0b4da4
--- /dev/null
+++ b/apps/angular/view-transition/src/styles.scss
@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(30px);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-30px);
+ }
+}
+
+::view-transition-old(root) {
+ animation:
+ 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(root) {
+ animation:
+ 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+ 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+::view-transition-new(count) {
+ animation: rotate 2s linear;
+}
+::view-transition-old(count) {
+ animation: rotate 0.5s linear;
+}
diff --git a/apps/angular/view-transition/tailwind.config.js b/apps/angular/view-transition/tailwind.config.js
new file mode 100644
index 0000000..38183db
--- /dev/null
+++ b/apps/angular/view-transition/tailwind.config.js
@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+ ...createGlobPatternsForDependencies(__dirname),
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/apps/angular/view-transition/tsconfig.app.json b/apps/angular/view-transition/tsconfig.app.json
new file mode 100644
index 0000000..5822042
--- /dev/null
+++ b/apps/angular/view-transition/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../../dist/out-tsc",
+ "types": []
+ },
+ "files": ["src/main.ts"],
+ "include": ["src/**/*.d.ts"],
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
diff --git a/apps/angular/view-transition/tsconfig.editor.json b/apps/angular/view-transition/tsconfig.editor.json
new file mode 100644
index 0000000..4ee6393
--- /dev/null
+++ b/apps/angular/view-transition/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+ "extends": "./tsconfig.json",
+ "include": ["src/**/*.ts"],
+ "compilerOptions": {
+ "types": []
+ }
+}
diff --git a/apps/angular/view-transition/tsconfig.json b/apps/angular/view-transition/tsconfig.json
new file mode 100644
index 0000000..db0ec0f
--- /dev/null
+++ b/apps/angular/view-transition/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "target": "es2022",
+ "useDefineForClassFields": false,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json",
+ },
+ {
+ "path": "./tsconfig.editor.json",
+ },
+ ],
+ "extends": "../../../tsconfig.base.json",
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true,
+ },
+}
diff --git a/challenge-number.json b/challenge-number.json
index 026eb8c..3f34352 100644
--- a/challenge-number.json
+++ b/challenge-number.json
@@ -1,6 +1,6 @@
{
- "total": 43,
+ "total": 44,
"🟢": 16,
- "🟠": 120,
+ "🟠": 121,
"🔴": 207
}
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 ed2d762..f1a99e4 100644
--- a/docs/src/content/docs/challenges/angular/43-signal-input.md
+++ b/docs/src/content/docs/challenges/angular/43-signal-input.md
@@ -6,7 +6,6 @@ challengeNumber: 43
command: angular-signal-input
sidebar:
order: 16
- badge: New
---
## Information
diff --git a/docs/src/content/docs/challenges/angular/44-view-transition.md b/docs/src/content/docs/challenges/angular/44-view-transition.md
new file mode 100644
index 0000000..a3500f6
--- /dev/null
+++ b/docs/src/content/docs/challenges/angular/44-view-transition.md
@@ -0,0 +1,20 @@
+---
+title: 🟠 View Transition
+description: Challenge 44 is about ...
+author: thomas-laforge
+challengeNumber: 44
+command: angular-view-transition
+sidebar:
+ order: 121
+ badge: New
+---
+
+:::note
+WIP: The following documentation need to be written.
+:::
+
+## Information
+
+## Statement
+
+## Constraints
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
index b587838..e164844 100644
--- a/docs/src/content/docs/es/index.mdx
+++ b/docs/src/content/docs/es/index.mdx
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
-
- Este repositorio contiene 43 desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
+
+ Este repositorio contiene 44 desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx
index 954471d..892cda6 100644
--- a/docs/src/content/docs/fr/index.mdx
+++ b/docs/src/content/docs/fr/index.mdx
@@ -15,7 +15,7 @@ hero:
icon: right-arrow
variant: primary
- text: Aller au dernier Challenge
- link: /fr/challenges/angular/43-signal-input/
+ link: /fr/challenges/angular/44-view-transition/
icon: rocket
- text: Donne une étoile
link: https://github.com/tomalaforge/angular-challenges
@@ -28,8 +28,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
-
- Ce répertoire rassemble 43 défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+
+ Ce répertoire rassemble 44 défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index d81639c..968084a 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Go to the latest Challenge
- link: /challenges/angular/43-signal-input/
+ link: /challenges/angular/44-view-transition/
icon: rocket
- text: Give a star
link: https://github.com/tomalaforge/angular-challenges
@@ -28,9 +28,8 @@ import SubscriptionForm from '../../components/SubscriptionForm.astro'
-
-
- This repository gathers 43 challenges related to Angular, Nx, RxJS, Ngrx and Typescript.
+
+ This repository gathers 44 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript.
These challenges resolve around real-life issues or specific features to elevate your skills.
diff --git a/docs/src/content/docs/pt/index.mdx b/docs/src/content/docs/pt/index.mdx
index 8ec804a..3004dae 100644
--- a/docs/src/content/docs/pt/index.mdx
+++ b/docs/src/content/docs/pt/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir para o desafio mais recente
- link: /pt/challenges/angular/43-signal-input/
+ link: /pt/challenges/angular/44-view-transition/
icon: rocket
- text: Dar uma estrela
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
-
- Este repositório possui 43 desafios relacionados a Angular, Nx, RxJS,
+
+ Este repositório possui 44 desafios relacionados a Angular, Nx, RxJS,
Ngrx e Typescript.
Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
melhorar suas habilidades.
diff --git a/docs/src/content/docs/ru/index.mdx b/docs/src/content/docs/ru/index.mdx
index ff69ef0..ac0cb90 100644
--- a/docs/src/content/docs/ru/index.mdx
+++ b/docs/src/content/docs/ru/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Перейти к последней задаче
- link: /ru/challenges/angular/39-injection-token/
+ link: /ru/challenges/angular/44-view-transition/
icon: rocket
- text: Добавить звезду
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro'
-
- Этот репозиторий содержит 43 испытания, связанных с Angular, Nx, RxJS, Ngrx and Typescript.
+
+ Этот репозиторий содержит 44 испытания, связанных с Angular, Nx, RxJS, Ngrx and Typescript.
Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.