angular 2 data binding template for @input

Question

I'm curious to know how you guys would convert binding a data input from

template: `<guage-bar [guage]=guageBar></guage-bar>`

to doing something like this

let data = new PercentValue(20, 100); 
let guageBar = new GuageBar(this.data,'Database Health');

GuageBarComponent.guage = this.guageBar;

I've tried this and it doesn't work. My end goal is trying to do input property values inside another class using a service.

Thanks!

score 0 · Accepted Answer · answered Oct 18 '16 at 23:27

You can use @ViewChild and use the lifecycle hook ngAfterViewInit to set the value

import { ViewChild, AfterViewInit } from '@angular/core'

@Component({
  template: `<guage-bar></guage-bar>`
})
class ParentComponent implements AfterViewInit {

  @ViewChild(GuageBarComponent) guageBarCmp: GuageBarComponent;

  // the child component is available when this is called.
  // before that it will be null
  ngAfterViewInit() {
    guageBarCmp.guageBar = guageBar;
  }
}

angular 2 data binding template for @input

1 Answers1