Styling in Angular - The Tea Ceremony

Styling is like the tea ceremony 茶道 (chado) - it requires harmony, simplicity, and attention to every detail. In a traditional tea pavilion, every element has its place and meaning. The same applies to your application!

Style Encapsulation

Angular offers three style encapsulation modes:

1import { ViewEncapsulation } from '@angular/core';
2
3@Component({
4  selector: 'app-tea-house',
5  encapsulation: ViewEncapsulation.Emulated,  // Default
6  template: \`<div class="tea-room">...</div>\`,
7  styles: [\`
8    :host {
9      display: block;
10      padding: 20px;
11      background: #f5f5dc;
12    }
13
14    :host(.highlighted) {
15      border: 2px solid gold;
16    }
17
18    :host-context(.dark-theme) {
19      background: #2d2d2d;
20    }
21
22    .tea-room {
23      /* Local styles for this component */
24    }
25  \`]
26})
27export class TeaHouseComponent {}

Encapsulation modes:

| Mode | Description | |------|-------------| | Emulated | Emulated encapsulation (default) - adds unique attributes | | ShadowDom | Real Shadow DOM - full isolation | | None | No encapsulation - styles are global |

Style Files

1@Component({
2  selector: 'app-dojo',
3  templateUrl: './dojo.component.html',
4  styleUrls: ['./dojo.component.scss']  // External SCSS file
5})
6export class DojoComponent {}

SCSS/SASS in Angular

1// dojo.component.scss
2
3// Variables
4$primary-color: #c41e3a;
5$samurai-gold: #ffd700;
6
7// Mixins
8@mixin card-shadow {
9  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
10  transition: box-shadow 0.3s ease;
11
12  &:hover {
13    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
14  }
15}
16
17// Components
18.samurai-card {
19  @include card-shadow;
20  padding: 1rem;
21  border-radius: 8px;
22  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
23
24  &__header {
25    color: $primary-color;
26    border-bottom: 2px solid $samurai-gold;
27  }
28
29  &__content {
30    margin-top: 1rem;
31  }
32
33  &--highlighted {
34    border: 2px solid $samurai-gold;
35  }
36}

CSS Variables with Theming

1// styles.scss (global)
2:root {
3  --primary-color: #c41e3a;
4  --secondary-color: #1e3a8a;
5  --background: #ffffff;
6  --text-color: #333333;
7  --border-radius: 8px;
8}
9
10[data-theme="dark"] {
11  --primary-color: #ff6b6b;
12  --secondary-color: #4dabf7;
13  --background: #1a1a2e;
14  --text-color: #eaeaea;
15}
16
17// Usage in component
18.samurai-card {
19  background: var(--background);
20  color: var(--text-color);
21  border-radius: var(--border-radius);
22}

1// Theme service
2@Injectable({ providedIn: 'root' })
3export class ThemeService {
4  private isDark = signal(false);
5
6  toggleTheme(): void {
7    this.isDark.update(v => !v);
8    document.documentElement.setAttribute(
9      'data-theme',
10      this.isDark() ? 'dark' : 'light'
11    );
12  }
13}