Trying to access my TypeScript class properties so that I can display in HTML

I am trying to redevelop a project I am working on into Angular 2 from Angular 1. Currently I am using Ionic to build it as it is used on iOS. This redevelopment is my first interaction with TypeScript at all.

So far I have been able to get most of what I need done. But now my issue is that I want to access a property of my class and display it in the HTML code but only after it has been set, this way I wouldn't run into errors. But my code or at least Ionic says that the property is undefined even if I use the ngOnInit or ngAfterContentInit functions to try and do this.

I may be going about this code the wrong way but I would like to ask how to access these properties so that I can display them in the HTML as *ngFor= 'let e of EventInfo' then {{e.eventName}}. Please help me out. I will continue to search the previous questions to hopefully find some inspiration to answer my question.

I will add my class code so far below.

To add some more information, the e.eventName I am planning to use on a menu that toggles out and it will display the information I want from eventInfo.

For the code below, I also added what pullJson.getMondayJson looks like.

This is what eventInfo initially looked like when I tried it out. this.eventInfo = [{rType: this.mondayJson.agendaEvents[0].rowType, eventName:this.mondayJson.agendaEvents[0].eventName, startTime:this.mondayJson.agendaEvents[0].startTime, endTime:this.mondayJson.agendaEvents[0].endTime}];

@Component({
  selector: 'center-panel',
  host: {'(window:scroll)': 'track($event)'},
  templateUrl: 'center-panel.html'
})

export class CenterPanel {
  mondayJson;
  tuesdayJson;
  wednesdayJson;

  pages: Array<{title: string}>;
  eventInfo: Array<{eventName: string, startTime: any, endTime: any}>;


  public constructor(public pullJson:PullJson, public menu: MenuController, locationA2:Location) {
    this.pages = [
      { title: 'CenterPanel'},
      { title: 'RightPanel'}
    ];

    pullJson.getMondayJson
      .subscribe(
        getMondayJson => this.mondayJson = {
          dayOfWeek: getMondayJson.dayOfWeek.toUpperCase(),
          agendaEvents: getMondayJson.agendaEvents
        },
        console.error,
        () => console.log('Completed HTTP for Monday!!')
      );
  }

this.getMondayJson = this.http.get('https://../remote-server-file.json')
      .map(response => response.json());

Someone asked me to post the template code:

  <div id="{{ 'MONDAY-events-' + event.startTime }}" menuToggle class="agenda-event-container" *ngFor="let event of mondayJson.agendaEvents" (click)="event.itemClicked = !event.itemClicked">
    <div class="agenda-event-row {{event.rowType}}">
      <div class="time-container">
        <div class="event-left-border-{{event.iconType}}">
          <div class="start-time">
            {{event.startTime}}
          </div>
          <div id="MONDAY-events-endTime" class="end-time">
            {{event.endTime}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here is an example of what the Json files look like:

{
      "rowType": "event",
      "eventName": "Facilitator Training",
      "iconType": "workshop",
      "startTime": "8:00AM",
      "endTime": "10:00AM",
      "headerLocation": "Go To Brooklyn",
      "locationDetails": {
        "jsonGroupFile": {
          "subData": "",
        },
        "hardcodedList": ["<b>Test:<br>New York"]
      },
      "subEvents": [
        {
          "presentationName": "",
          "durationInMinutes": "120",
          "speakers": "Test Person"
        }
      ],
      "images": [
        {
          "imageType": "hotel"
        },
        {
          "imageType": "map"
        }
      ],
      "files": []
    }