0

I want to show json data use ng template but can not show the data. But when i use HTML element like div or span it can display it

format json

const arr = [ { "date": 1, "color": "normal" }, { "date": 2, "color": "red" }, { "date": 3, "color": "normal" } ]

In TS; 

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 can not 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 can show the json data but the calendar UI not good)

<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 use primeng calendar for calendar and use angular 7 latest Thank you

Alkim Al
  • 49
  • 7

1 Answers1

0

@Alkim Al, try this once

change this to

<ng-template pTemplate="body" let-item="dateArray">

below line

<ng-template ngFor let-item [ngForOf]="dateArray">

this may solve your issue. For more info check here once

Ganesh
  • 5,808
  • 2
  • 21
  • 41