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



  • 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



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



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