Here is a simple front-end page using Angular 2:
<table class="table">
<tr>
<th>title</th>
<th>description</th>
</tr>
<tr *ngFor="let notes of Note">
<td>{{notes.title}}</td>
<td>{{notes.body}}</td>
</tr>
</table>
Below is the component code with Note model:
export class Note {
noteId: number ;
title: String ;
body: String ;
color: String ;
isArchive: boolean ;
isPinned: boolean ;
isTrash: boolean ;
}
notes:Note[]=[];
ngOnInit() {
this.getAllNotes();
}
getAllNotes(){
this.noteService.getNotes()
.subscribe(
data => {
console.log("notes get");
console.log(data._body);
this.notes=data._body;
console.log("notes array");
console.log(this.notes);
},
error => {
console.log("notes error");
console.log(error);
});
}
The output of this.notes is shown below:
[
{
"noteId": 5,
"title": "hi ",
"body": "ragini",
"color": null,
"createDate": 1515820245951,
"lastUpdated": 1515820245951,
"reminder": null,
"image": null,
"collaborator": [],
"labels": [],
"user": 1,
"archive": false,
"pinned": false,
"trash": false
},
{
"noteId": 8,
"title": "s",
"body": null,
"color": null,
"createDate": 1515820746348,
"lastUpdated": 1515820746348,
"reminder": null,
"image": null,
"collaborator": [],
"labels": [],
"user": 1,
"archive": false,
"pinned": false,
"trash": false
}
]
Now, let's see how to display this data in the Angular 2 front-end.