angular2 component lifecycle

Question

I am passing an array into my component like so;

 <app-bar-chart-demo [chartLabelObject]="['2006', '2007', '2008', '2009', '2010', '2011', '2012']"></app-bar-chart-demo>

I am retrieving that array in the component like so

    @Component({
...
      inputs:['chartLabelObject']
    })

I am then setting a variable to its value like so

    export class BarChartDemoComponent {
     ...
      barChartLabels:string[] = this.chartLabelObject;
...//and doing stuff with it
}

However it appears that it is 'undefined' at the point i use it.If i log its value in response to a button being pressed i see it is set, if i put it into the start of the 'export class' or below in the 'constructor' it is not set!

Where should i set the 'barChartLabels:string[]'?

Answer 1

Every change to an input property triggers a call to ngOnChanges on the component. This is where you should set your barChartLabels property.

@Component({
  ...
  inputs:['chartLabelObject']
})
export class BarChartDemoComponent implements OnChanges {
  barChartLabels:string[];

  constructor() { }

  ngOnChanges(changes){
      if(changes["chartLabelObject"]){
          this.barChartLabels = this.chartLabelObject;
      }
  } 
}

You could also clean up your logic a bit and just have the input map directly to your input by using the @Input decorator like so:

@Component({
  ...
})
export class BarChartDemoComponent {
  @Input('chartLabelObject') barChartLabels:string[];

  constructor() { }
}