Passing data into a downgraded Angular2 component within an Angular1 Application

Question

I am pretty new to Angular, so please forgive me if this is an obvious question.

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.

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.

(Sorry about the formatting here, the code won't seem to render as text otherwise) Breadcrumb.html (within Angular1 application):

> <breadcrumb    <!-- These two inputs are coming in as 'undefined'??--> 
>     [options]="[
>       {name: 'Option 1', disabled: false},
>       {name: 'Option 2', disabled: false},
>       {name: 'Option 3', disabled: true}
>     ]"
>     [selectedIndex]="0"
>     (selectionMade)="logOutput($event)"
>   </breadcrumb>

Breadcrumb.component.ts (within Angular2 component "breadcrumb"):

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<any>;    
  @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);  //<---- Showing up as undefined!
        console.log(selectedIndex); //<---- Showing up as undefined!

    if(this.selectedIndex !== undefined) {
      this.selectOption(this.options[this.selectedIndex], false);
        }
  }

}

breadcrumb.component.html:

(INSIDE BREADCRUMB DIRECTIVE) <!-- This is showing up and nothing else, because none of my @input values are coming through -->

<span class="breadcrumb" *ngFor='let option of options;let last = last'>
  <span
    (click)="selectOption(option)"
        [ngClass] = "{
            'selected' : selected,
            'disabled' : option.disabled
        }"
  >
    {{option.name}}
  </span>
  <span *ngIf="!last">
    >
  </span>
</span>

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!

Answer 1

I found what the problem was. I had forgotten to include the inputs and outputs as properties within the downgradeComponent function argument object, like so:

index.ts of ng2Components folder

angular
  .module('example', [])
  .directive(
        'breadcrumb',
        downgradeComponent({
            component: BreadcrumbComponent,
            inputs: ['options', 'selectedIndex'],     //required!
            outputs: ['selectionMade']                
        }));

Hope someone else finds this useful.