Use of ng-content: Use shared UI component. Here, card.component.

src/app/shared/card/card.component.css

@@ -0,0 +1,5 @@
+div {
+  border-radius: 6px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}

src/app/shared/card/card.component.html

@@ -0,0 +1,3 @@
+<div>
+  <ng-content />
+</div>

src/app/shared/card/card.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  imports: [],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.css'
+})
+export class CardComponent {
+
+}

src/app/task/task.component.css

@@ -2,7 +2,6 @@ article {
   padding: 1rem;
   color: #25113d;
   background-color: #bf9ee5;
-  border-radius: 8px;
 }
 
 h2 {

src/app/task/task.component.html

@@ -1,8 +1,10 @@
-<article>
-  <h2>{{ task.title }}</h2>
-  <time>Date: {{ task.dueDate }}</time>
-  <p>{{ task.summary }}</p>
-  <p class="actions">
-    <button (click)="onCompleteTask()">Complete</button>
-  </p>
-</article>
+<app-card>
+  <article>
+    <h2>{{ task.title }}</h2>
+    <time>Date: {{ task.dueDate }}</time>
+    <p>{{ task.summary }}</p>
+    <p class="actions">
+      <button (click)="onCompleteTask()">Complete</button>
+    </p>
+  </article>
+</app-card>

src/app/task/task.component.ts

@@ -1,9 +1,12 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import { Task } from './task.model';
+import {CardComponent} from '../shared/card/card.component';
 
 @Component({
   selector: 'app-task',
-  imports: [],
+  imports: [
+    CardComponent
+  ],
   templateUrl: './task.component.html',
   styleUrl: './task.component.css'
 })

src/app/tasks/tasks.component.ts

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {User} from '../user/user.model';
-import {NewTaskData, Task} from '../task/task.model';
+import { type User} from '../user/user.model';
+import { type NewTaskData, type Task } from '../task/task.model';
 import {TaskComponent} from '../task/task.component';
 import {NewTaskComponent} from './new-task/new-task.component';
 
@@ -55,18 +55,17 @@ export class TasksComponent {
     this.isAddingTask = false;
   }
 
-  onAddTask(taskContent: NewTaskData) {
+  onAddTask(taskData: NewTaskData) {
     let nextTaskId = this.tasks.length + 1;
     let taskId = 't' + (nextTaskId).toString();
 
-    let task: Task = {
+    this.tasks.push({
       id: taskId,
       userId: this.user.id,
-      title: taskContent.title,
-      summary: taskContent.summary,
-      dueDate: taskContent.date,
-    };
-    this.tasks.push(task);
+      title: taskData.title,
+      summary: taskData.summary,
+      dueDate: taskData.date,
+    });
 
     this.onCancelAddTask()
   }

src/app/user/user.component.css

@@ -1,9 +1,3 @@
-div {
-  border-radius: 6px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
 button {
   display: flex;
   align-items: center;

src/app/user/user.component.html

@@ -1,4 +1,4 @@
-<div>
+<app-card>
   <button
     [class.active]="selected"
     (click)="onSelectUser()"
@@ -9,4 +9,4 @@
     />
     <span>{{ user.name }}</span>
   </button>
-</div>
+</app-card>

src/app/user/user.component.ts

@@ -1,10 +1,14 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import { User } from './user.model';
+import {CardComponent} from '../shared/card/card.component';
 
 @Component({
   selector: 'app-user',
   standalone: true,
   templateUrl: './user.component.html',
+  imports: [
+    CardComponent
+  ],
   styleUrl: './user.component.css'
 })
 export class UserComponent {