feat(13): highly-customizable-css

Author: slimabdi

apps/angular/13-highly-customizable-css/src/app/page.component.ts

@@ -8,9 +8,9 @@ import { TextComponent } from './text.component';
   imports: [TextStaticComponent, TextComponent],
   template: `
     <static-text></static-text>
-    <static-text type="error"></static-text>
-    <static-text type="warning"></static-text>
-    <text [font]="15" color="blue">This is a blue text</text>
+    <static-text class="error"></static-text>
+    <static-text class="warning"></static-text>
+    <text class="font color">This is a blue text</text>
   `,
 })
 export class PageComponent {}

apps/angular/13-highly-customizable-css/src/app/static-text.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, computed, input } from '@angular/core';
+import { Component } from '@angular/core';
 import { TextComponent } from './text.component';
 
 export type StaticTextType = 'normal' | 'warning' | 'error';
@@ -8,31 +8,25 @@ export type StaticTextType = 'normal' | 'warning' | 'error';
   selector: 'static-text',
   imports: [TextComponent],
   template: `
-    <text [font]="font()" [color]="color()">This is a static text</text>
+    <text>This is a static text</text>
   `,
-})
-export class TextStaticComponent {
-  type = input<StaticTextType>('normal');
+  styles: [
+    `
+      :host-context(.error) {
+        --font: 30px;
+        --color: red;
+      }
 
-  font = computed(() => {
-    switch (this.type()) {
-      case 'error':
-        return 30;
-      case 'warning':
-        return 25;
-      default:
-        return 10;
-    }
-  });
+      :host-context(.warning) {
+        --font: 25px;
+        --color: orange;
+      }
 
-  color = computed(() => {
-    switch (this.type()) {
-      case 'error':
-        return 'red';
-      case 'warning':
-        return 'orange';
-      default:
-        return 'black';
-    }
-  });
-}
+      :host-context(.normal) {
+        --font: 10px;
+        --color: black;
+      }
+    `,
+  ],
+})
+export class TextStaticComponent {}

apps/angular/13-highly-customizable-css/src/app/text.component.ts

@@ -1,15 +1,28 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'text',
   template: `
-    <p style="font-size: {{ font() }}px; color: {{ color() }}">
+    <p>
       <ng-content />
     </p>
   `,
+  styles: [
+    `
+      p {
+        font-size: var(--font, 10px);
+        color: var(--color, black);
+      }
+
+      :host-context(.font) {
+        --font: 15px;
+      }
+
+      :host-context(.color) {
+        --color: blue;
+      }
+    `,
+  ],
 })
-export class TextComponent {
-  font = input(10);
-  color = input('black');
-}
+export class TextComponent {}