title: How to resolve Angular TypeError: Cannot read property 'name' of undefined
body: <p>After updating my application from angular 4 to angular 8, I'm getting an error I cannot resolve. The error looks the following:</p>
  
  <pre><code>OrderOverviewComponent.html:46 ERROR TypeError: Cannot read property 'name' of undefined
  at Object.eval [as updateRenderer] (OrderOverviewComponent.html:46)
  at Object.debugUpdateRenderer [as updateRenderer] (core.js:45293)
  at checkAndUpdateView (core.js:44276)
  at callViewAction (core.js:44636)
  at execEmbeddedViewsAction (core.js:44593)
  at checkAndUpdateView (core.js:44271)
  at callViewAction (core.js:44636)
  at execEmbeddedViewsAction (core.js:44593)
  at checkAndUpdateView (core.js:44271)
  at callViewAction (core.js:44636)
  </code></pre>
  
  <p>My TypeScript file looks like this:</p>
  
  <pre><code>import {DatabaseService} from '../../services/database.service';
  import {UtiliesService} from '../../services/utilies.service';
  import {AdditionalInformationInsertionComponent} from '../utils/additional-information-insertion/additional-information-insertion.component';
  import {PrinterService} from '../../services/printer.service';
  import {Component, OnInit, ViewChild} from '@angular/core';
  import {Router} from '@angular/router';
  import {ModalFeedbackEditComponent} from '../utils/modal-feedback-edit/modal-feedback-edit.component';
  @Component({
    selector: 'app-order-overview',
    templateUrl: './order-overview.component.html',
    styleUrls: ['./order-overview.component.scss']
  })
  export class OrderOverviewComponent implements OnInit {
  
    orders: any = [];
    machines: any = [];
    selectedMachine: any = [];
    activeOrderId = -1;
  
    @ViewChild(AdditionalInformationInsertionComponent, {static: false}) child: AdditionalInformationInsertionComponent;
  
  
    constructor(private router: Router, private databaseService: DatabaseService, private utilityService: UtiliesService, private printerService: PrinterService) {
    }
  
  
    ngOnInit() {
      this.selectedMachine = this.utilityService.getItem('selectedMachine');
  
      this.databaseService.getAllMachines().subscribe((x) =&gt; {
        this.machines = x;
        this.machines = this.machines.sort(function(a, b) {return (a.name &gt; b.name) ? 1 : ((b.name &gt; a.name) ? -1 : 0); } );
        this.machines.splice(0, 0, {machineId: -1, name: '-------------'});
      });
  
      if (this.selectedMachine !== null) {
        this.databaseService.getOrdersForMachineId(this.selectedMachine.machineId).subscribe((x) =&gt; {
          this.orders = x;
          this.activeOrderId = this.utilityService.getActiveOrder()['orderingId'];
          console.log('TTT', this.activeOrderId);
        });
        return;
      } else {
        this.selectedMachine = [];
      }
  
      this.databaseService.getAllOrders().then((x) =&gt; {
        this.orders = x;
        this.activeOrderId = this.utilityService.getActiveOrder()['orderingId'];
      });
    }
  
    public startOrder(order: any)  {
      this.utilityService.setActiveOrder(order);
      this.activeOrderId = order['orderingId'];
      console.log('ORDER TOOL VERSION', order);
      if (order.tool.version == null) {
        this.child.openAdditionalDialog();
      } else {
        // this.printerService.setPrintLabel(order.machine.printerAddress, order.printDescription);
        this.router.navigateByUrl('/orderdata');
      }
  
  
    }
    public showOrderData(orderId) {
      this.router.navigateByUrl('/orderdata/' + orderId);
    }
  
    public changeMachine(machine: any) {
      this.orders =  [];
      this.selectedMachine = machine;
      this.utilityService.storeItem('selectedMachine', machine);
      if (this.selectedMachine.machineId &lt; 0) {
        this.databaseService.getAllOrders().then((x) =&gt; {
          this.orders = x;
        });
        return;
      }
      this.databaseService.getOrdersForMachineId(this.selectedMachine.machineId).subscribe((x) =&gt; {
        this.orders = x;
      });
    }
  
    compareMachines(c1: any, c2: any): boolean {
      return c1 &amp;&amp; c2 ? c1.machineId === c2.machineId : c1 === c2;
    }
  
  }
  </code></pre>
  
  <p>And my HTML file looks like this:</p>
  
  <pre><code>&lt;app-additional-information-insertion&gt;&lt;/app-additional-information-insertion&gt; &lt;!-- Nur anzeigen, wenn noch keine Variante drinsteht--&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-12"&gt;
      &lt;div class="card"&gt;
        &lt;h4 class="card-header"&gt;Auftragsübersicht
          &lt;div class="form-inline pull-right" style="display: inline;" &gt;
            &lt;label style="display: inline; font-size: 1rem;" for="machine"&gt;Machine: &lt;/label&gt;
            &lt;select [compareWith]="compareMachines"  class="form-control form-control-sm" id="machine" required style="margin: -10px 5px -7px;" [ngModel]="selectedMachine" (ngModelChange)="changeMachine($event)"&gt;
            &lt;option *ngFor="let machine of machines" [ngValue]="machine" [selected]="machine.machineId == selectedMachine.machineId"&gt;{{machine.name}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
        &lt;/h4&gt;
        &lt;div class="card-body"&gt;
          &lt;table class="table table-sm"&gt;
            &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;Auftrag&lt;/th&gt;
              &lt;th scope="col"&gt;Artikel&lt;/th&gt;
              &lt;th scope="col"&gt;Bezeichnung&lt;/th&gt;
              &lt;th scope="col"&gt;Menge&lt;/th&gt;
              &lt;th scope="col"&gt;Behälter&lt;/th&gt;
              &lt;th scope="col"&gt;Anlage&lt;/th&gt;
              &lt;th scope="col" &gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;tr *ngFor="let order of orders" &gt;
              &lt;th *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" scope="row"&gt;{{order['orderingId']}}&lt;/th&gt;
              &lt;td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" &gt;{{order['article']['name']}}&lt;/td&gt;
              &lt;td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" &gt;{{order['article']['description']}}&lt;/td&gt;
              &lt;td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" &gt;{{order['totalQuantity']}}&lt;/td&gt;
              &lt;td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" &gt;{{order['quantityOfContainer']}} {{order['typeOfContainer']}}&lt;/td&gt;
              &lt;td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" &gt;{{order['machine']['name']}}&lt;/td&gt;
              &lt;td *ngIf="order['orderFinished'] !== 1"&gt;
                &lt;button class="btn btn-block  btn-sm btn-outline-primary" *ngIf="order['orderingId'] != activeOrderId " (click)="startOrder(order)"&gt;Auftrag starten&lt;/button&gt;
                &lt;button class="btn btn-block  btn-sm btn-primary" *ngIf="order['orderingId'] === activeOrderId" (click)="startOrder(order)"&gt;Auftrag gestartet&lt;/button&gt;
                &lt;!--&lt;span *ngIf="order['orderActive'] === 1"&gt;Läuft&lt;/span&gt;--&gt;
              &lt;/td&gt;
  
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm thankful for any kind of guess or help because frankly i've got no ideas to try anything any more!
  Thank you!</p>