Scribd
Upload
2 views3 pages

MPT Project

This document outlines the steps to create an Angular Daily Activity Task Project, including installation of Angular CLI, project setup, and component generation. It details the implementation of a Task Service for managing tasks and provides code snippets for task models, components, and the main application module. The final step is to run the project using 'ng serve --open'.

Uploaded by

munnabhaimorbi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views3 pages

MPT Project

This document outlines the steps to create an Angular Daily Activity Task Project, including installation of Angular CLI, project setup, and component generation. It details the implementation of a Task Service for managing tasks and provides code snippets for task models, components, and the main application module. The final step is to run the project using 'ng serve --open'.

Uploaded by

munnabhaimorbi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

// Angular Daily Activity Task Project

// Step 1: Install Angular CLI if not installed


// Run in terminal: npm install -g @angular/cli

// Step 2: Create a new Angular Project


// Run in terminal: ng new daily-activity-task --style=scss

// Step 3: Navigate to the project folder


// cd daily-activity-task

// Step 4: Install Angular Material for UI components


// ng add @angular/material

// Step 5: Generate Components


// ng generate component components/task-list
// ng generate component components/task-form

// Step 6: Generate Service for Task Management


// ng generate service services/task

// src/app/models/task.model.ts
export interface Task {
id: number;
title: string;
description: string;
completed: boolean;
}

// src/app/services/task.service.ts
import { Injectable } from '@angular/core';
import { Task } from '../models/task.model';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })


export class TaskService {
private tasks: Task[] = [];
private tasksSubject = new BehaviorSubject<Task[]>(this.tasks);
tasks$ = this.tasksSubject.asObservable();

addTask(task: Task) {
this.tasks.push({ ...task, id: Date.now(), completed: false });
this.tasksSubject.next(this.tasks);
}

toggleTaskStatus(id: number) {
this.tasks = this.tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
);
this.tasksSubject.next(this.tasks);
}

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

// src/app/components/task-list/task-list.component.ts
import { Component } from '@angular/core';
import { TaskService } from '../../services/task.service';

@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent {
tasks$ = this.taskService.tasks$;

constructor(private taskService: TaskService) {}

toggleStatus(id: number) {
this.taskService.toggleTaskStatus(id);
}

deleteTask(id: number) {
this.taskService.deleteTask(id);
}
}

// src/app/components/task-list/task-list.component.html
<ul>
<li *ngFor="let task of (tasks$ | async)">
<span [class.completed]="task.completed">{{ task.title }}</span>
<button (click)="toggleStatus(task.id)">Toggle</button>
<button (click)="deleteTask(task.id)">Delete</button>
</li>
</ul>

// src/app/components/task-form/task-form.component.ts
import { Component } from '@angular/core';
import { TaskService } from '../../services/task.service';
import { Task } from '../../models/task.model';

@Component({
selector: 'app-task-form',
templateUrl: './task-form.component.html',
styleUrls: ['./task-form.component.scss']
})
export class TaskFormComponent {
taskTitle = '';
taskDescription = '';

constructor(private taskService: TaskService) {}

addTask() {
if (this.taskTitle.trim()) {
this.taskService.addTask({
id: 0,
title: this.taskTitle,
description: this.taskDescription,
completed: false,
});
this.taskTitle = '';
this.taskDescription = '';
}
}
}

// src/app/components/task-form/task-form.component.html
<input [(ngModel)]="taskTitle" placeholder="Task Title" />
<input [(ngModel)]="taskDescription" placeholder="Task Description" />
<button (click)="addTask()">Add Task</button>

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TaskListComponent } from './components/task-list/task-list.component';
import { TaskFormComponent } from './components/task-form/task-form.component';

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

// Final Step: Run the project


// ng serve --open

You might also like