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

  • Hi there,

    I’m woking with this template:

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

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

    Thanks a lot!


  • @koenvanham Apologies for not being very well versed on Angular, but this tutorial has similar information for tabs:

    Maybe it will help!

  • @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!

  • Onsen UI

    @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…

Log in to reply