Skip to content

Commit ec0f415

Browse files
tomalaforgetomalaforge
committed
feat(): challenge 58
1 parent 49eca53 commit ec0f415

23 files changed

+324
-17
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 57 challenges](https://angular-challenges.vercel.app/)
27+
Check [all 58 challenges](https://angular-challenges.vercel.app/)
2828

2929
## Contributors ✨
3030

‎apps/angular/58-content-projection-condition/.eslintrc.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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/directive-selector": [
13+
"error",
14+
{
15+
"type": "attribute",
16+
"prefix": "app",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "app",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nx/angular-template"],
33+
"rules": {}
34+
}
35+
]
36+
}

‎apps/angular/58-content-projection-condition/README.md

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

‎apps/angular/58-content-projection-condition/project.json

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

‎apps/angular/58-content-projection-condition/public/favicon.ico

14.7 KB
Binary file not shown.

‎apps/angular/58-content-projection-condition/src/app/app.component.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { CardComponent } from './card.component';
3+
4+
@Component({
5+
imports: [CardComponent],
6+
selector: 'app-root',
7+
template: `
8+
<app-card>
9+
<div title>Card 1</div>
10+
<div message>Message 1</div>
11+
</app-card>
12+
<app-card [small]="true">
13+
<div title>Card 2</div>
14+
<div message>Message 2</div>
15+
</app-card>
16+
`,
17+
host: {
18+
class: 'p-4 block flex flex-col gap-1',
19+
},
20+
changeDetection: ChangeDetectionStrategy.OnPush,
21+
})
22+
export class AppComponent {}

‎apps/angular/58-content-projection-condition/src/app/app.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2+
3+
export const appConfig: ApplicationConfig = {
4+
providers: [provideZoneChangeDetection({ eventCoalescing: true })],
5+
};

‎apps/angular/58-content-projection-condition/src/app/card.component.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-card',
5+
template: `
6+
@if (small()) {
7+
<ng-content select="[title]" />
8+
<ng-content select="[message]" />
9+
} @else {
10+
<div class="p-4">
11+
<div class="text-2xl">
12+
<ng-content select="[title]" />
13+
</div>
14+
<ng-content select="[message]" />
15+
</div>
16+
}
17+
`,
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
host: {
20+
class: 'p-4 border border-grey rounded-sm flex flex-col w-[200px]',
21+
},
22+
})
23+
export class CardComponent {
24+
small = input<boolean>(false);
25+
}

‎apps/angular/58-content-projection-condition/src/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>angular-content-projection-condition</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
</body>
13+
</html>

‎apps/angular/58-content-projection-condition/src/main.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { AppComponent } from './app/app.component';
3+
import { appConfig } from './app/app.config';
4+
5+
bootstrapApplication(AppComponent, appConfig).catch((err) =>
6+
console.error(err),
7+
);

0 commit comments

Comments
 (0)