Understanding Override Mixins

1
export interface Todo {
2
  id: string;
3
  title: string;
4
  completed: boolean;
5
  dueDate: Date | null;
6
  priority: TodoPriority;
7
  createdAt: Date;
8
  updatedAt: Date;
9
  category: string;
10
  imageUrl: string;
11
}

1
export interface TodoForm {
2
  title: FormControl<string>;
3
  dueDate: FormControl<Date | null>;
4
  priority: FormControl<TodoPriority>;
5
  category: FormControl<string>;
6
  imageUrl: FormControl<string>;
7
}

1
export class TodoFormDialogComponent {
2
  readonly categories = [
3
    '🏢 Work',
4
    '👨‍💻 Personal',
5
    '🏠 Home',
6
    '🛒 Shopping',
7
    '🤷‍♂️ Other',
8
  ];
9

10
  todoForm = new FormGroup<TodoForm>({
11
    title: new FormControl('', {
12
      nonNullable: true,
13
      validators: [Validators.required],
14
    }),
15
    dueDate: new FormControl<Date | null>(null),
16
    priority: new FormControl(TodoPriority.Medium, { nonNullable: true }),
17
    category: new FormControl('', {
18
      nonNullable: true,
19
      validators: [Validators.required],
20
    }),
21
    imageUrl: new FormControl('', {
22
      nonNullable: true,
23
      validators: [Validators.required],
24
    }),
25
  });
26
}

1
<mat-form-field appearance="fill" class="full-width">
2
  <mat-label>Category</mat-label>
3
  <mat-select formControlName="category">
4
    @for (category of categories; track category) {
5
    <mat-option [value]="category">{{ category }}</mat-option>
6
    }
7
  </mat-select>
8
  @if (todoForm.get('category')?.hasError('required') &&
9
  todoForm.get('category')?.touched) {
10
  <mat-error>Category is required</mat-error>
11
  }
12
</mat-form-field>
13

14
<mat-form-field appearance="fill" class="full-width">
15
  <mat-label>Image URL</mat-label>
16
  <input matInput formControlName="imageUrl" placeholder="Enter image URL" />
17
  @if (todoForm.get('imageUrl')?.hasError('required') &&
18
  todoForm.get('imageUrl')?.touched) {
19
  <mat-error>Image URL is required</mat-error>
20
  }
21
</mat-form-field>

1
addTodo(
2
  title: string,
3
  dueDate: Date | null = null,
4
  priority: TodoPriority = TodoPriority.Medium,
5
  category: string,
6
  imageUrl: string
7
): void {
8
  const newTodo: Todo = {
9
    id: crypto.randomUUID(),
10
    title,
11
    completed: false,
12
    dueDate,
13
    priority,
14
    createdAt: new Date(),
15
    updatedAt: new Date(),
16
    category,
17
    imageUrl,
18
  };
19

20
  this.todosSignal.update((todos) => {
21
    return [newTodo, ...todos];
22
  });
23
}

1
dialogRef.afterClosed().subscribe((result) => {
2
  if (result) {
3
    this.todoService.addTodo(
4
      result.title,
5
      result.dueDate,
6
      result.priority,
7
      result.category,
8
      result.imageUrl
9
    );
10

11
    this.snackBar.open('Todo added successfully', 'Close', {
12
      duration: 3000,
13
    });
14
  }
15
});

1
<mat-card
2
    class="todo-card"
3
    [class]="'priority-' + todo.priority"
4
    [class.completed]="isCompleted"
5
    cdkDrag
6
    [cdkDragBoundary]="'.todo-list'"
7
  >
8
    <button mat-icon-button (click)="confirmDelete(todo)" class="delete-button">
9
      <mat-icon>delete</mat-icon>
10
    </button>
11
    <mat-card-header class="todo-header">
12
      <mat-card-subtitle>
13
        {{ todo.category }}
14
      </mat-card-subtitle>
15
    </mat-card-header>
16
    <mat-card-content class="todo-content">
17
      <img mat-card-image [src]="todo.imageUrl" class="todo-image" />
18
      <mat-checkbox
19
        [checked]="todo.completed"
20
        (change)="toggleTodo.emit(todo.id)"
21
        color="primary"
22
      >
23
        <span class="todo-title">
24
          {{ todo.title }}
25
        </span>
26
      </mat-checkbox>
27

28
      <div class="todo-priority-chip-container">
29
        <mat-chip class="priority-chip">
30
          {{ todo.priority }}
31
        </mat-chip>
32
      </div>
33
    </mat-card-content>
34
    <mat-card-footer class="todo-footer">
35
      @if (todo.dueDate) {
36
      <span class="due-date">
37
        <mat-icon>event</mat-icon>
38
        {{ todo.dueDate | date : "mediumDate" }}
39
      </span>
40
      }
41
    </mat-card-footer>
42
  </mat-card>

1
import { MatCard, MatCardContent } from '@angular/material/card';
2
import {
3
  MatCard,
4
  MatCardContent,
5
  MatCardImage,
6
  MatCardHeader,
7
  MatCardSubtitle,
8
  MatCardFooter,
9
} from '@angular/material/card';
10
import { MatCheckbox } from '@angular/material/checkbox';
11
import { MatIcon } from '@angular/material/icon';
12
import { MatButtonModule } from '@angular/material/button';
13
import { MatChip } from '@angular/material/chips';
14
import { MatDivider } from '@angular/material/divider';
15
import { MatDialog } from '@angular/material/dialog';
16

17
@Component({
18
  standalone: true,
19
  imports: [
20
    MatCard,
21
    MatCardContent,
22
    MatCheckbox,
23
    MatIcon,
24
    MatButtonModule,
25
    MatChip,
26
    MatDivider,
27
    CdkDrag,
28
    CdkDropList,
29
    MatCardImage,
30
    MatCardHeader,
31
    MatCardSubtitle,
32
    MatCardFooter,
33
  ],
34
})

1
.todo-card {
2
  margin: 0;
3
  cursor: move;
4
  position: relative;
5
  padding: 4px;
6

7
  @include mat.card-overrides(
8
    (
9
      elevated-container-shape: var(--mat-sys-corner-large),
10
    )
11
  );
12
}

1
@each $priority, $colors in $priority-colors {
2
  .priority-chip.priority-#{$priority} {
3
    background-color: map.get($colors, background);
4
    @include mat.chips-overrides(
5
      (
6
        outline-color: map.get($colors, outline-color),
7
        label-text-color: map.get($colors, foreground),
8
      )
9
    );
10
  }
11

12
  .todo-card.priority-#{$priority} {
13
    @include mat.card-overrides(
14
      (
15
        elevated-container-color: map.get($colors, background),
16
      )
17
    );
18
    .due-date {
19
      color: map.get($colors, foreground);
20
    }
21
  }
22
}