Angular 2: Input binding

Question

I want to bind the value of variable to input after the ngOnInit but in my case it is binding to the default value that is initialised before.

@Component({
  selector: 'myapp',
  template: `{{test}}  `
})
class App {
  @Input() test;
}

@Component({
  selector: 'parent',
  directives: [App],
  template: `
    <myapp [test]="test"></myapp>
  `
})
export class parent implements OnInit{
  test:string='i dont want this value';
  ngOnInit() {
    this.test="I am after ngOninit";
  }
}

I want "I am after ngOnInit" to be printed but in my case it is "i dont want this value" is printed. Here is the plunker code : http://plnkr.co/edit/c4wR1X740wtHaFjvuPXW?p=preview How can i achieve this. Thank you.

Why are you setting a default value if you don't want a default value? — jonrsharpe
– jonrsharpe, Commented Jan 4, 2017 at 17:23
@jonrsharpe Default value is just for initialization. In real case it is empty. — Amir
– Amir, Commented Jan 4, 2017 at 17:32
@Amir If you are using 2.4.1 then can you reproduce the plunker with it? — eko
– eko, Commented Jan 4, 2017 at 18:10
@Amir I have given you a plunker that works. It can't be the same setup. Analyze the plunker and your code, try to find the differences. — eko
– eko, Commented Jan 4, 2017 at 18:40

eko · Accepted Answer · 2017-01-04 18:29:49Z

2

Updated as OP said it should be a 2.4.1 version plunker: http://plnkr.co/edit/TLj9Ta4rv64Esi2uFwTP?p=preview

Your ngOnInit function is never called.

Since you are using the alpha version of angular2, lifecycle hook names are different.

onInit() {
      this.test="I am after ngOninit";
  }

Plunker: http://plnkr.co/edit/eDs2hjNydBoQBYWaKUZN?p=preview

Alpha.47 Breaking Changes: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-24

edited Jan 4, 2017 at 18:29

answered Jan 4, 2017 at 17:27

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2: Input binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related