https://github.com/shubhamd99/todolist-myfirst-angular

My First Angular Project TodoList
https://github.com/shubhamd99/todolist-myfirst-angular

angular angular7 app todolist website

Last synced: about 1 month ago
JSON representation

My First Angular Project TodoList

• Host: GitHub
• URL: https://github.com/shubhamd99/todolist-myfirst-angular
• Owner: shubhamd99
• Created: 2019-06-27T16:51:26.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:46:57.000Z (over 3 years ago)
• Last Synced: 2025-01-09T15:19:10.576Z (over 1 year ago)
• Topics: angular, angular7, app, todolist, website
• Language: TypeScript
• Homepage:
• Size: 2.47 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Angular Todo-List

## Commands

1. ng serve

2. ng generate component components/todos (Create Component)

3. ng g s services/Todo (Create Services)

4. ng build

![alt_img](https://i.imgur.com/AKtYhjy.png)

## Todo Service

```

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Todo } from '../models/Todo';

const httpOptions = {

  headers: new HttpHeaders({

    'Content-Type': 'application/json'

  })

};

@Injectable({

  providedIn: 'root'

})

export class TodoService {

  todosUrl = 'https://jsonplaceholder.typicode.com/todos';

  todosLimit = '?_limit=100';

  constructor(private http: HttpClient) { }

  // Get Todos

  getTodos(): Observable {

    return this.http.get(`${this.todosUrl}${this.todosLimit}`);

  }

  // Add Todo

  addTodo(todo: Todo): Observable {

    return this.http.post(this.todosUrl, todo, httpOptions);

  }

  // Toggle Completed

  toggleCompleted(todo: Todo): Observable {

    const url = `${this.todosUrl}/${todo.id}`;

    return this.http.put(url, todo, httpOptions);

  }

  // Delete Todo

  deleteTodo(todo: Todo): Observable {

    const url = `${this.todosUrl}/${todo.id}`;

    return this.http.delete(url, httpOptions);

  }

}

```