Below is the code snippet:
notes.service.ts
private notes: Array<Note> = [];
notesChanged = new EventEmitter<Note[]>();
getNotes() {
this.getData();
console.log('getNotes()', this.notes);
return this.notes;
}
getData() {
this.http.get<Note[]>(this.url).subscribe(
(data) => {
this.notes = data;
this.notesChanged.emit(this.notes);
}
);
}
notes.component.ts
notes: Array<Note> = [];
ngOnInit(): void {
this.notes = this.notesData.getNotes();
this.notesData.notesChanged.subscribe(
(notes: Note[]) => this.notes = notes
);
}
notes.component.html
<div *ngFor="let item of notes" class="col-md-4">
<a [routerLink]="['/note', item.id]" class="note-link">
<div class="note-body text-center">
<h4>{{item.title}}</h4>
<p>{{item.text}}</p>
</div>
</a>
</div>
The issue I am facing is that notes are not displayed after loading in the browser. They only appear if I navigate away and then go back to the notes section.
The console log 'getNotes()', this.notes; indicates that the array is empty right after loading in the browser.