Skip to content

Commit 99a3647

Browse files
tomalaforgetomalaforge
committed
feat(challenge 59): contente projection defer
1 parent 95899e2 commit 99a3647

29 files changed

+6088
-4165
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
2424
2525
## Challenges
2626

27-
Check [all 58 challenges](https://angular-challenges.vercel.app/)
27+
Check [all 59 challenges](https://angular-challenges.vercel.app/)
2828

2929
## Contributors ✨
3030

‎apps/angular/59-content-projection-defer/.eslintrc.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"extends": ["../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": [
8+
"plugin:@nx/angular",
9+
"plugin:@angular-eslint/template/process-inline-templates"
10+
],
11+
"rules": {
12+
"@angular-eslint/component-class-suffix": "off",
13+
"@angular-eslint/directive-selector": [
14+
"error",
15+
{
16+
"type": "attribute",
17+
"prefix": "app",
18+
"style": "camelCase"
19+
}
20+
],
21+
"@angular-eslint/component-selector": [
22+
"error",
23+
{
24+
"type": "element",
25+
"prefix": "app",
26+
"style": "kebab-case"
27+
}
28+
]
29+
}
30+
},
31+
{
32+
"files": ["*.html"],
33+
"extends": ["plugin:@nx/angular-template"],
34+
"rules": {}
35+
}
36+
]
37+
}

‎apps/angular/59-content-projection-defer/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# content-projection-defer
2+
3+
> author: thomas-laforge
4+
5+
### Run Application
6+
7+
```bash
8+
npx nx serve angular-content-projection-defer
9+
```
10+
11+
### Documentation and Instruction
12+
13+
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/59-content-projection-defer/).

‎apps/angular/59-content-projection-defer/project.json‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"name": "angular-content-projection-defer",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "app",
6+
"sourceRoot": "apps/angular/59-content-projection-defer/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:application",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/angular/59-content-projection-defer",
14+
"index": "apps/angular/59-content-projection-defer/src/index.html",
15+
"browser": "apps/angular/59-content-projection-defer/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/angular/59-content-projection-defer/tsconfig.app.json",
18+
"inlineStyleLanguage": "scss",
19+
"assets": [
20+
{
21+
"glob": "**/*",
22+
"input": "apps/angular/59-content-projection-defer/public"
23+
}
24+
],
25+
"styles": ["apps/angular/59-content-projection-defer/src/styles.scss"],
26+
"scripts": []
27+
},
28+
"configurations": {
29+
"production": {
30+
"budgets": [
31+
{
32+
"type": "initial",
33+
"maximumWarning": "500kb",
34+
"maximumError": "1mb"
35+
},
36+
{
37+
"type": "anyComponentStyle",
38+
"maximumWarning": "4kb",
39+
"maximumError": "8kb"
40+
}
41+
],
42+
"outputHashing": "all"
43+
},
44+
"development": {
45+
"optimization": false,
46+
"extractLicenses": false,
47+
"sourceMap": true
48+
}
49+
},
50+
"defaultConfiguration": "production"
51+
},
52+
"serve": {
53+
"executor": "@angular-devkit/build-angular:dev-server",
54+
"configurations": {
55+
"production": {
56+
"buildTarget": "angular-content-projection-defer:build:production"
57+
},
58+
"development": {
59+
"buildTarget": "angular-content-projection-defer:build:development"
60+
}
61+
},
62+
"defaultConfiguration": "development"
63+
},
64+
"extract-i18n": {
65+
"executor": "@angular-devkit/build-angular:extract-i18n",
66+
"options": {
67+
"buildTarget": "angular-content-projection-defer:build"
68+
}
69+
},
70+
"lint": {
71+
"executor": "@nx/eslint:lint"
72+
},
73+
"serve-static": {
74+
"executor": "@nx/web:file-server",
75+
"options": {
76+
"buildTarget": "angular-content-projection-defer:build",
77+
"staticFilePath": "dist/apps/angular/59-content-projection-defer/browser",
78+
"spa": true
79+
}
80+
}
81+
}
82+
}

‎apps/angular/59-content-projection-defer/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎apps/angular/59-content-projection-defer/src/app/app.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { RouterLink, RouterOutlet } from '@angular/router';
3+
4+
@Component({
5+
imports: [RouterOutlet, RouterLink],
6+
selector: 'app-root',
7+
template: `
8+
<div class="flex gap-2">
9+
<button class="rounded-md border px-4 py-2" routerLink="/page-1">
10+
Page 1
11+
</button>
12+
<button class="rounded-md border px-4 py-2" routerLink="/page-2">
13+
Page 2
14+
</button>
15+
</div>
16+
<router-outlet />
17+
`,
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
host: {
20+
class: 'flex flex-col gap-2 ',
21+
},
22+
})
23+
export class AppComponent {}

‎apps/angular/59-content-projection-defer/src/app/app.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { provideHttpClient } from '@angular/common/http';
2+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
3+
import { provideRouter } from '@angular/router';
4+
import { appRoutes } from './app.routes';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [
8+
provideZoneChangeDetection({ eventCoalescing: true }),
9+
provideRouter(appRoutes),
10+
provideHttpClient(),
11+
],
12+
};

‎apps/angular/59-content-projection-defer/src/app/app.routes.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Route } from '@angular/router';
2+
3+
export const appRoutes: Route[] = [
4+
{
5+
path: 'page-1',
6+
loadComponent: () => import('./page-1').then((m) => m.Page1),
7+
},
8+
{
9+
path: 'page-2',
10+
loadComponent: () => import('./page-2').then((m) => m.Page2),
11+
},
12+
{ path: '**', redirectTo: 'page-1' },
13+
];

‎apps/angular/59-content-projection-defer/src/app/expandable-card.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-expandable-card',
5+
template: `
6+
<button
7+
class="text-fg-subtle hover:bg-button-secondary-bg-hover active:bg-button-secondary-bg-active focus:outline-button-border-highlight flex w-fit items-center gap-1 py-2 focus:outline focus:outline-2 focus:outline-offset-1"
8+
(click)="isExpanded.set(!isExpanded())"
9+
data-cy="expandable-panel-toggle">
10+
@if (isExpanded()) {
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
fill="none"
14+
viewBox="0 0 24 24"
15+
stroke-width="1.5"
16+
stroke="currentColor"
17+
class="h-4 w-4">
18+
<path
19+
stroke-linecap="round"
20+
stroke-linejoin="round"
21+
d="m19.5 8.25-7.5 7.5-7.5-7.5" />
22+
</svg>
23+
} @else {
24+
<svg
25+
xmlns="http://www.w3.org/2000/svg"
26+
fill="none"
27+
viewBox="0 0 24 24"
28+
stroke-width="1.5"
29+
stroke="currentColor"
30+
class="h-4 w-4">
31+
<path
32+
stroke-linecap="round"
33+
stroke-linejoin="round"
34+
d="m8.25 4.5 7.5 7.5-7.5 7.5" />
35+
</svg>
36+
}
37+
<ng-content select="[title]" />
38+
</button>
39+
40+
<div
41+
class="overflow-hidden transition-[max-height] duration-500"
42+
[class.max-h-0]="!isExpanded()"
43+
[class.max-h-[1000px]]="isExpanded()">
44+
<ng-content />
45+
</div>
46+
`,
47+
changeDetection: ChangeDetectionStrategy.OnPush,
48+
host: {
49+
class: 'flex flex-col gap-2 ',
50+
},
51+
})
52+
export class ExpandableCard {
53+
public isExpanded = signal(false);
54+
}

‎apps/angular/59-content-projection-defer/src/app/page-1.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-page-1',
5+
template: `
6+
page1
7+
`,
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
})
10+
export class Page1 {}

0 commit comments

Comments
 (0)