Система управления задачами на Angular

Для создания системы управления задачами на Angular, можно сделать удобное веб-приложение с функциями добавления, редактирования, удаления и изменения статуса задач.

📌 Основной функционал:

• Добавление новой задачи
• Изменение статуса (выполнено/не выполнено)
• Удаление задачи
• Фильтрация по статусу

🚀 Шаг 1: Создание Angular-проекта

ng new task-manager
cd task-manager
ng serve

📂 Шаг 2: Создаем компонент для задач

ng generate component task

🌐 Шаг 3: Модель данных

Создаем файл task.model.ts:

export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

🎯 Шаг 4: Логика управления задачами

В файле task.component.ts:

import { Component } from '@angular/core';
import { Task } from '../models/task.model';

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent {
  tasks: Task[] = [];
  newTask: string = '';

  addTask() {
    if (this.newTask.trim()) {
      const newTaskObj: Task = {
        id: Date.now(),
        title: this.newTask,
        completed: false
      };
      this.tasks.push(newTaskObj);
      this.newTask = '';
    }
  }

  toggleTask(task: Task) {
    task.completed = !task.completed;
  }

  removeTask(id: number) {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }
}

🎨 Шаг 5: Интерфейс (HTML)

Файл task.component.html:

<div class="task-manager">
  <h1>Управление задачами ✅</h1>

  <input type="text" [(ngModel)]="newTask" placeholder="Введите задачу..." />
  <button (click)="addTask()">Добавить</button>

  <ul>
    <li *ngFor="let task of tasks" [class.completed]="task.completed">
      <span (click)="toggleTask(task)">
        {{ task.title }}
      </span>
      <button (click)="removeTask(task.id)">Удалить</button>
    </li>
  </ul>
</div>

💻 Шаг 6: Стили

Файл task.component.css:

.task-manager {
  max-width: 600px;
  margin: auto;
  text-align: center;
}

input {
  padding: 8px;
  width: 80%;
  margin-bottom: 10px;
}

button {
  padding: 8px 15px;
  margin-left: 5px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f1f1f1;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

li.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

📦 Шаг 7: Подключаем ngModel в app.module.ts

Включаем FormsModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { TaskComponent } from './task/task.component';

@NgModule({
  declarations: [
    TaskComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [TaskComponent]
})
export class AppModule { }