When trying to display JSON data using ng-template, I am facing issues as the data is not showing up. However, if I use HTML elements like div or span, it displays correctly.
JSON format:
const arr = [ { "date": 1, "color": "normal" }, { "date": 2, "color": "red" }, { "date": 3, "color": "normal" } ]
In TypeScript:
dateArray: any;
public getJSON() {
return this.http.get("../assets/eventcalendar.json")
.pipe(map(res => res.json()));
}
getCalendar(){
this.getJSON()
.subscribe((event:any)=>{
let getEvent = JSON.stringify(event);
this.dateArray = JSON.parse(getEvent);
console.log('this.dateArray', this.dateArray);
})
}In HTML: (This template fails to show the JSON data)
<p-calendar (onSelect)="select($event)" [inline]="true" selectionMode="multiple" readonlyInput="true">
<ng-template pTemplate="body" let-item="dateArray">
<span
[ngClass]="item.color">
{{item.tgl}}
</span>
</ng-template>
</p-calendar>In HTML: (This template successfully shows the JSON data but has UI issues with the calendar)
<p-calendar (onSelect)="select($event)" [inline]="true" selectionMode="multiple" readonlyInput="true">
<ng-template pTemplate="body">
<span *ngFor="let item of dateArray"
[ngClass]="item.color">
{{item.tgl}}
</span>
</ng-template>
</p-calendar>I am utilizing primeng calendar for the calendar and working on Angular 7 latest version. Thank you