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() {}

}

Continue reading...