Mastering TypeScript 3 - Third Edition

Rendering REST data

Now that we have the skeleton BoardListComponent in place, we can integrate with our BoardService, and query our /api/boards REST endpoint in order to fetch a list of boards to display. Our updates are as follows:

export class BoardListComponent implements OnInit { 
    boardList: IBoard[] = []; 
    constructor(private boardService: BoardService) { } 
    ngOnInit() { 
        this.boardService.getBoardsList() 
           .subscribe((result: IBoard[]) => { 
            this.boardList = result; 
        }); 
    } 
} 

Here, we have a property named boardList that holds an array of elements of type IBoard. We have then updated our constructor function to inject an instance of the BoardService service, and store it in a private variable named boardService. Our ngOnInit function then ...