title: Why are my input variable properties undefined (Angular)
body: <p>I'm fetching data from my service in the app component, and then passing it down to a child component via @Input.   when I console.log the data in ngOnInit, it DOES show up in the child component, but when I try to pass it to a variable and use it in the child template, it's coming back undefined, and I'm not sure why.</p>
  
  <p><strong>Here's where I call my service in app.component.ts, the data that is having issues is this.colorcounts. Console logging here inside the ngOnInit DOES show the correct data. colorCounts has 3 properties: red, yellow &amp; green:</strong></p>
  
  <pre><code>ngOnInit() {
  
      this.pciService.getPciInfo()
              .subscribe((pciInfo) =&gt; {
                this.spinner.hide();
                this.pciData = pciInfo.sorted,
                this.colorCounts = pciInfo.counts;
              });
  </code></pre>
  
  <p><strong>Here's the app.component.html template where I'm passing the data down:</strong></p>
  
  <pre><code>&lt;app-navbar *ngIf="colorCounts" [colorCounts] = "colorCounts"&gt;&lt;/app-navbar&gt;
  &lt;app-system-status [pciData]="pciData"&gt;&lt;/app-system-status&gt;
  </code></pre>
  
  <p><strong>Here's the child component where I'm grabbing the data, doing a console.log in ngOnInit does work, but trying to use "red" in the template or save it in the class comes back undefined:</strong></p>
  
  <pre><code>
    constructor(private pciService: PciService,
                public dialog: MatDialog,
                private decimalPipe: DecimalPipe) { }
  
    AMVersion: any;
    @Input() colorCounts: Colors;
  
  
    openDialog(): void {
      let dialogRef = this.dialog.open(AmVersionDialogComponent, {
        panelClass: 'custom-dialog-container',
        data: {}
      });
  
      (&lt;AmVersionDialogComponent&gt;dialogRef.componentInstance).AMVersion = this.AMVersion;
      dialogRef.afterClosed().subscribe(result =&gt; {
        console.log('The dialog was closed');
      });
    }
  
  
    ngOnInit() {
      this.pciService.getAMVersion()
      .subscribe((AMInfo) =&gt; {
       return this.AMVersion = AMInfo;
      });
      var red = this.colorCounts.red;
      console.log(red)
      console.log(this.colorCounts);
    }
  
  }
  </code></pre>
  
  <p>I know I'm probably missing something simple regarding the life cycle. Can someone point me in the right direction here?</p>