title: Passing data into a downgraded Angular2 component within an Angular1 Application
body: <p>I am pretty new to Angular, so please forgive me if this is an obvious question. </p>
  
  <p>With a lot of trial and error, I managed to get my new Angular2 component downgraded properly so that it works within my Angular1.4 application. And the component mostly works. The only problem - and it's a big one - is that the component ignores all inputs that I give it at the template-level.</p>
  
  <p>I think the issue is the way I'm passing them in. I think I may be accidentally using an Angular2 way of passing them in instead of Angular1, but I'm having trouble verifying that. All I know is that when I check the value of my @input() variables from within ngOnInit() they are showing up as undefined, even though I am passing in hard values through the template.</p>
  
  <p><strong>(Sorry about the formatting here, the code won't seem to render as text otherwise)</strong>
  Breadcrumb.html (within Angular1 application):</p>
  
  <pre><code>&gt; &lt;breadcrumb    &lt;!-- These two inputs are coming in as 'undefined'??--&gt; 
  &gt;     [options]="[
  &gt;       {name: 'Option 1', disabled: false},
  &gt;       {name: 'Option 2', disabled: false},
  &gt;       {name: 'Option 3', disabled: true}
  &gt;     ]"
  &gt;     [selectedIndex]="0"
  &gt;     (selectionMade)="logOutput($event)"
  &gt;   &lt;/breadcrumb&gt;
  </code></pre>
  
  <p>Breadcrumb.component.ts (within Angular2 component "breadcrumb"): </p>
  
  <pre><code>import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-breadcrumb',
    template: require('./breadcrumb.component.html')
  })
  export class BreadcrumbComponent implements OnInit {
    @Input() options : Array&lt;any&gt;;    
    @Input() selectedIndex : number;
    @Output() selectionMade : any = new EventEmitter();
  
    private selected : any;
  
    selectOption(option: any, broadcastSelection: boolean = true) {
      if(this.selected === option || option.disabled) {
        return;
          }
      this.selected = option;
      if(broadcastSelection) {
        this.selectionMade.emit(this.selected);
          }
    }
  
    ngOnInit() {
          console.log('Inside breadcrumb ngOnInit!');
  
          console.log(options);  //&lt;---- Showing up as undefined!
          console.log(selectedIndex); //&lt;---- Showing up as undefined!
  
      if(this.selectedIndex !== undefined) {
        this.selectOption(this.options[this.selectedIndex], false);
          }
    }
  
  }
  </code></pre>
  
  <p>breadcrumb.component.html: </p>
  
  <pre><code>(INSIDE BREADCRUMB DIRECTIVE) &lt;!-- This is showing up and nothing else, because none of my @input values are coming through --&gt;
  
  &lt;span class="breadcrumb" *ngFor='let option of options;let last = last'&gt;
    &lt;span
      (click)="selectOption(option)"
          [ngClass] = "{
              'selected' : selected,
              'disabled' : option.disabled
          }"
    &gt;
      {{option.name}}
    &lt;/span&gt;
    &lt;span *ngIf="!last"&gt;
      &gt;
    &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>If anyone has any suggestions for how I can make my Angular2 component see the data I am sending into it, I would really really appreciate it! Thank you!</p>