I am trying to implement ionic UI with its blank template. here is my home.ts file thats inside /pages/home/ folder.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items = [
   {id: 1,text:"first"},
   {id: 2,text:"second"},
   {id: 3,text:"third"},
   {id: 4,text:"forth"}
];
  constructor(public navCtrl: NavController) {}
  itemSelected(item){   
    item.text+=" Checked";
    alert(item.text);
  }
}

and here is home.html file.

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list inset>    
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    <p>{{ item.id }} <span ng-bind="item.text"></span></p>    
  </button>
</ion-list>
</ion-content>

here if i use {{item.text}} instead of than value get display but i want to know why ng-bind is not working as rendering frequency of ng-bind is higher than {{}}.

I am trying to implement ionic UI with its blank template. here is my home.ts file thats inside /pages/home/ folder.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items = [
   {id: 1,text:"first"},
   {id: 2,text:"second"},
   {id: 3,text:"third"},
   {id: 4,text:"forth"}
];
  constructor(public navCtrl: NavController) {}
  itemSelected(item){   
    item.text+=" Checked";
    alert(item.text);
  }
}

and here is home.html file.

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list inset>    
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    <p>{{ item.id }} <span ng-bind="item.text"></span></p>    
  </button>
</ion-list>
</ion-content>

here if i use {{item.text}} instead of than value get display but i want to know why ng-bind is not working as rendering frequency of ng-bind is higher than {{}}.

• javascript
• angular
• typescript
• ionic-framework

• What are you getting in the span then? – Ram_T Commented May 30, 2017 at 11:36
• @Mr_Perfect nothing. – Nisarg Desai Commented May 30, 2017 at 11:37

4 Answers 4

ng-bind is AngularJS (Angular 1) directive. If you want to do binding in alternative way then use [innerHTML] attribute binding.

<p>{{ item.id }} <span [innerHTML]="item.text"></span></p>  

ng-bind is not part of angular2, use [innerHTML] instead,

I think it's angular 1 style. For Angular 2, I use < span [innerHtml]="item.text"> < /span>

<span [innerHTML]="item.text"></span></p>