Unable to set directive input value

Question

I have narrowed down the problem I'm having to this directive code:

@Directive({
  selector: '[tdStepTracker]'
})
export class StepTrackerDirective {
  @Input('tdStepTracker') keyName: string;

  ngOnInit() {
    console.log('keyName', this.keyName);
  }
}

And being used here:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 [tdStepTracker]="something">Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

When I log the contents of this.keyName I get undefined. I was expecting to get something instead.

Here's a link to the plunker: https://plnkr.co/edit/Cbw6CHbsppiuVpW4kpTh

score 2 · Accepted Answer · answered Jan 22 '17 at 17:58

Seems you want to pass a string

<h2 [tdStepTracker]="something">Hello {{name}}</h2>

should be changed to one of

<h2 [tdStepTracker]="'something'">Hello {{name}}</h2>
<h2 tdStepTracker="something">Hello {{name}}</h2>

Your code binds to a property something of class App which doesn't exist.

Plunker example

Unable to set directive input value

1 Answers1