how-add-todo-list-component-to-angular-from-wp

cd src/app
mkdir todos
ng g component /todos/todo-list
ng g service /todos/todos
Add to app-routing.module.ts:
import { TodoListComponent } from './todos/todo-list/todo-list.component';
add to the routes inside app-routing.module.ts:
  {
    path: 'todos',
    component: TodoListComponent,
    pathMatch: 'full'
  }
 

Run: 
touch todos/todo.ts

inside todo.ts:
export class Todo {
}

Run: 
ng g service /todos/todos

open todos.service.ts and make it look like this:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Todo } from './todo';





@Injectable()
export class TodosService {

	private todosUrl = "localhost/wp-json/wp/v2/";

	constructor(private http: Http) { }

	getTodos(): Observable<Todo[]> {

		return this.http
		.get(this.todosUrl + 'todos')
		.map((res: Response) => res.json());

	}

}

Add to todo-list.ts:
import { Todo } from '../todo';
import { TodosService } from '../todos.service';
  providers: [TodosService]


and to the export class:

  todos: Todo[];

  constructor( private todosService: TodosService ) { }

  getTodos(){
    this.todosService
      .getTodos()
      .subscribe(res => {
        this.todos = res;
      });
  }

  ngOnInit() {
    this.getTodos();
  }


// Authentication
todos.service.ts:
Add below the contructor. 

  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('localhost:localhost')); 
  }

 Then modify the getTodos to look like this:
  getTodos(): Observable<Todo[]> {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);

    return this.http.get(this.todosUrl + 'todos', {
        headers: headers
      })
    .map((res: Response) => res.json());

  }