title: Angular 2 Inline template cannot read property of undefined
body: <p>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:</p>
  <p><a href="https://i.stack.imgur.com/8jmRH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8jmRH.png" alt="enter image description here" /></a></p>
  <p>But when I click a new tabset icon to load data into the tab body section, I get the following exception:</p>
  <pre><code>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)
  </code></pre>
  <p>Here is a slice of my tabset template that shows tab content body based on <code>ngSwitch</code> and <code>ngSwitchCase</code>:</p>
  <pre><code>&lt;div class=&quot;schema-palette&quot; [ngSwitch]=&quot;tabId&quot;&gt;
      &lt;myapp-base-palette *ngSwitchCase=&quot;'T'&quot;&gt;
          &lt;myapp-tabset [tabType]=&quot;'T'&quot; (onTabSelected)=&quot;tabChanged($event)&quot; palette-tabset&gt;&lt;/myapp-tabset&gt;
          &lt;myapp-tab-community palette-content-region&gt;&lt;/myapp-tab-community&gt;
      &lt;/myapp-base-palette&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is my <code>myapp-tab-community</code> component template:</p>
  <pre><code>&lt;div class=&quot;community-buffer&quot; ngFor=&quot;let miniCardGrp of miniCardGrps; let i = index&quot;&gt;
    &lt;div style=&quot;height:5px&quot; *ngIf=&quot;i === 0&quot;&gt;&lt;/div&gt;
    &lt;myapp-dnd-mini-card-group [miniCardGrp]=&quot;miniCardGrp&quot;&gt;&lt;/myapp-dnd-mini-card-group&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is <code>myapp-tab-community</code> component typescript:</p>
  <pre><code>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;
    }
  
  }
  </code></pre>
  <p>An array of <code>myapp-dnd-mini-card-group</code> components should be rendered but the error is thrown from its template.</p>
  <p>The template file:</p>
  <pre><code>&lt;div class=&quot;mini-card-grp-collapse&quot;&gt;
    &lt;div class=&quot;mini-card-grp-collapse-row&quot;&gt;
      &lt;div class=&quot;mini-card-grp-title&quot;&gt;
        &lt;a data-toggle=&quot;collapse&quot; [href]=&quot;href&quot; aria-expanded=&quot;true&quot; attr.aria-controls=&quot;{{ ariaControls }}&quot;&gt;
          &lt;!-- THIS LINE THROWS --&gt;
          &lt;md-icon class=&quot;white-text md-16&quot;&gt;play_arrow&lt;/md-icon&gt;{{ miniCardGrp.category }}
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;mini-card-grp-title-helper&quot;&gt;
        &lt;md-icon class=&quot;white-text md-24&quot;&gt;help_outline&lt;/md-icon&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;collapse in&quot; [id]=&quot;id&quot;&gt;
    &lt;div class=&quot;mini-card-wrapper&quot; *ngFor=&quot;let miniCard of miniCardGrp.miniCards&quot;&gt;
      &lt;myapp-dnd-mini-card [miniCard]=&quot;miniCard&quot;&gt;&lt;/myapp-dnd-mini-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Now the typescript file:</p>
  <pre><code>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));
    }
  
  }
  </code></pre>
  <p>What am I doing wrong here?</p>
  <p>As requested, here is what the <code>mini-card-group</code> component looks like:</p>
  <pre><code>&lt;div class=&quot;btn-grp-collapse&quot;&gt;
    &lt;div class=&quot;btn-grp-collapse-row&quot;&gt;
      &lt;div class=&quot;btn-grp-title&quot;&gt;
        &lt;a data-toggle=&quot;collapse&quot; [href]=&quot;href&quot; aria-expanded=&quot;true&quot; attr.aria-controls=&quot;{{ ariaControls }}&quot;&gt;
          &lt;md-icon class=&quot;white-text md-16&quot;&gt;play_arrow&lt;/md-icon&gt;{{ dndButtonGrp.title }}
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;btn-grp-title-helper&quot;&gt;
        &lt;md-icon class=&quot;white-text md-24&quot;&gt;help_outline&lt;/md-icon&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;collapse in&quot; [id]=&quot;id&quot;&gt;
    &lt;div class=&quot;btn-wrapper&quot; *ngFor=&quot;let dndButton of dndButtonGrp.dndButtons&quot;&gt;
      &lt;myapp-dnd-button [dndButton]=&quot;dndButton&quot;&gt;&lt;/myapp-dnd-button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Its typescript file:</p>
  <pre><code>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() {}
  
  }
  </code></pre>