AngularJS 2 + OnsenUI 2: interpolation doen't work directly

[koenvanham]

Hi there,

I’m woking with this template: https://github.com/monaca-templates/onsenui-v2-angular2-tabbar.

When I incorporate a variable in my class, and try to display this in the .html template with Angular interpolation method {{ var_name }} the variable won’t show.

However, when I also attach a function to an html element, and click this, then suddenly also the var is shown.

My modification to first.ts in the git repo mentioned above:

import {Component} from '@angular/core';

@Component({
  selector: 'ons-page[first]',
  template: `
    <div class="content">
	  <h4 (click)="test()">Click here</h4>
      <p >I am the first tab. {{testvar}}</p>
    </div>
  `
})
export class First {
	testvar = "koen";
  constructor() {}

  test(){
  	console.log("test");
  }
}

What am I doing wrong? Is there an init method I need to call to make the layout active?

Thanks a lot!

Koen

[munsterlander]

@koenvanham Apologies for not being very well versed on Angular, but this tutorial has similar information for tabs: http://tutorial.onsen.io/?framework=angular2&category=Reference&module=tabbar

Maybe it will help!

[koenvanham]

@munsterlander thanks for the help. This tutorial is quite right, but it isn’t the implementation of tabs that is holding me back…

So far I know that this behaviour only occurs in Chrome. In my Safari browser it directly shows the text in the interpolators. Could the problem come from a cache somewhere in Chrome that I need to clear?

Thanks for your help!

[Fran Diox]

@koenvanham Here there is another example without tabs. I think it’s the same as what you wrote so I’m not sure where’s the issue…