[SOLVED] Inline template cannot read property of undefined

I am trying to render data inside a tab body section based on clicking an icon on a tabset. Here is a screen shot of my initial, successfully rendered view:

But when I click a new tabset icon to load data into the tab body section, I get the following exception:

TypeError: Cannot read property 'category' of undefined
at CompiledTemplate.proxyViewClass.View_DnDMiniCardGroupComponent0.detectChangesInternal (/PaletteSchemaModule/DnDMiniCardGroupComponent/component.ngfactory.js:144)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_TabCommunityComponent0.detectChangesInternal (/PaletteSchemaModule/TabCommunityComponent/component.ngfactory.js:89)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at View_TypesContentComponent2.detectChangesInternal (/PaletteSchemaModule/TypesContentComponent/component.ngfactory.js:190)
at View_TypesContentComponent2.AppView.detectChanges (view.js:425)
at View_TypesContentComponent2.DebugAppView.detectChanges (view.js:620)
at ViewContainer.detectChangesInNestedViews (view_container.js:67)
at CompiledTemplate.proxyViewClass.View_TypesContentComponent0.detectChangesInternal (/PaletteSchemaModule/TypesContentComponent/component.ngfactory.js:592)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)

Here is a slice of my tabset template that shows tab content body based on ngSwitch and ngSwitchCase:

<div class="schema-palette" [ngSwitch]="tabId">
    <myapp-base-palette *ngSwitchCase="'T'">
        <myapp-tabset [tabType]="'T'" (onTabSelected)="tabChanged($event)" palette-tabset></myapp-tabset>
        <myapp-tab-community palette-content-region></myapp-tab-community>
    </myapp-base-palette>
</div>

Here is my myapp-tab-community component template:

<div class="community-buffer" ngFor="let miniCardGrp of miniCardGrps; let i = index">
  <div style="height:5px" *ngIf="i === 0"></div>
  <myapp-dnd-mini-card-group [miniCardGrp]="miniCardGrp"></myapp-dnd-mini-card-group>
</div>

Here is myapp-tab-community component typescript:

import { Component, OnInit, AfterViewInit } from '@angular/core';

import { PalettesService } from '../../palettes.service';
import { MiniCardGroup } from '../../palettes.helpers';
import { DnDMiniCardGroupComponent } from '../../shared/dnd-mini-card-group/dnd-mini-card-group.component';

@Component({
  selector: 'myapp-tab-community',
  templateUrl: './tab-community.component.html',
  styleUrls: ['./tab-community.component.scss'],
  providers: [PalettesService]
})
export class TabCommunityComponent implements OnInit, AfterViewInit {

  miniCardGrps: MiniCardGroup[];

  constructor(private palettesService: PalettesService) {}

  ngOnInit() {
    this.miniCardGrps = [];
    this.miniCardGrps = this.palettesService.getTemplateTypes();

    // DATA IS SUCCESSFULLY RETRIEVED
    console.log('TabCommunityComponent.ngOnInit = ' + JSON.stringify(this.miniCardGrps));
  }

  ngAfterViewInit() {
    // ERROR BLOCKS EVALUATION
    console.log('TabCommunityComponent.ngAfterViewInit = ' + JSON.stringify(this.miniCardGrps));
  }

  trackByMiniCardGroup(index: number, miniCardGrp: MiniCardGroup) {
    return miniCardGrp.category;
  }

}

An array of myapp-dnd-mini-card-group components should be rendered, but the error is thrown from its template.

The template file:

<div class="mini-card-grp-collapse">
  <div class="mini-card-grp-collapse-row">
    <div class="mini-card-grp-title">
      <a data-toggle="collapse" [href]="href" aria-expanded="true" attr.aria-controls="{{ ariaControls }}">
        <!-- THIS LINE THROWS -->
        <md-icon class="white-text md-16">play_arrow</md-icon>{{ miniCardGrp.category }}
      </a>
    </div>
    <div class="mini-card-grp-title-helper">
      <md-icon class="white-text md-24">help_outline</md-icon>
    </div>
  </div>
</div>
<div class="collapse in" [id]="id">
  <div class="mini-card-wrapper" *ngFor="let miniCard of miniCardGrp.miniCards">
    <myapp-dnd-mini-card [miniCard]="miniCard"></myapp-dnd-mini-card>
  </div>
</div>

Now the typescript file:

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';

import { MathHelper } from '../../../../utils/math';
import { MiniCardGroup } from '../../palettes.helpers';

import { DndMiniCardComponent } from '../dnd-mini-card/dnd-mini-card.component';

@Component({
  selector: 'myapp-dnd-mini-card-group',
  templateUrl: './dnd-mini-card-group.component.html',
  styleUrls: ['./dnd-mini-card-group.component.scss']
})
export class DnDMiniCardGroupComponent implements OnInit, AfterViewInit 
{

  @Input() miniCardGrp: MiniCardGroup;
  @Input() href: string;
  @Input() id: string;
  @Input() ariaControls: string;

  constructor() {
    let mathHelper = new MathHelper();
    let random$ = mathHelper.getRandomNumberString();
    this.id = random$;
    this.href = '#' + random$;
    this.ariaControls = random$;
  }

  ngOnInit() {
    // IS UNDEFINED
    console.log('DnDMiniCardGroupComponent.ngOnInit = ' + JSON.stringify(this.miniCardGrp));
  }

  ngAfterViewInit() {
    // IS NEVER REACHED
    console.log('DnDMiniCardGroupComponent.ngAfterViewInit = ' + JSON.stringify(this.miniCardGrp));
  }

}

What am I doing wrong here?

As requested, here is what the mini-card-group component looks like:

<div class="btn-grp-collapse">
  <div class="btn-grp-collapse-row">
    <div class="btn-grp-title">
      <a data-toggle="collapse" [href]="href" aria-expanded="true" attr.aria-controls="{{ ariaControls }}">
        <md-icon class="white-text md-16">play_arrow</md-icon>{{ dndButtonGrp.title }}
      </a>
    </div>
    <div class="btn-grp-title-helper">
      <md-icon class="white-text md-24">help_outline</md-icon>
    </div>
  </div>
</div>
<div class="collapse in" [id]="id">
  <div class="btn-wrapper" *ngFor="let dndButton of dndButtonGrp.dndButtons">
    <myapp-dnd-button [dndButton]="dndButton"></myapp-dnd-button>
  </div>
</div>

Its typescript file:

import { Component, Input, OnInit } from '@angular/core';

import { MathHelper } from '../../../../utils/math'
import { DnDButtonGroup } from './dnd-button-group.helpers';

import { DndButtonComponent } from '../dnd-button/dnd-button.component';

@Component({
  selector: 'myapp-dnd-button-group',
  templateUrl: './dnd-button-group.component.html',
  styleUrls: ['./dnd-button-group.component.scss']
})
export class DnDButtonGroupComponent implements OnInit {

  @Input() dndButtonGrp: DnDButtonGroup;
  @Input() href: string;
  @Input() id: string;
  @Input() ariaControls: string;

  constructor() {
    let mathHelper = new MathHelper();
    let random$ = mathHelper.getRandomNumberString();
    this.id = random$;
    this.href = '#' + random$;
    this.ariaControls = random$;
  }

  ngOnInit() {}

}