giorgionasis giorgionasis - 3 years ago 268
TypeScript Question

How to apply Interpolation or Binding for Ionic 3/Angular 4

my concept is to retrive data of my Parse Server where MongoDB is installed.

I succeed to display data in console but in the html template I cannot interpolate them.

Here is search.ts

import { localData } from './../../services/local';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Parse } from 'parse';
import 'rxjs/add/operator/map';
import {User} from '../../models/User';

selector: 'page-search',
templateUrl: 'search.html'

export class SearchPage {
currentUser = Parse.User.current();
query1 = new Parse.Query('Friends');
friendQuery = new Parse.Query('Friends');
query = new Parse.Query(Parse.User);
tmp: any;
users: any= [];
user: any= [];

loadUsers (){
this.tmp = this.localdata.getUsers();

initializeItems() {

constructor(public navCtrl: NavController, private localdata: localData) {
this.query.find().then(data => {
this.tmp = data;
this.users = this.localdata.getUsers();
console.log (this.users);

getItems(ev: any) {
// Reset items back to all of the items

// set val to the value of the searchbar
let val =;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.users = this.users.filter((user) => {
return (user.username.toLowerCase().indexOf(val.toLowerCase()) > -1);

This is the local.ts where i save the array of Users

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

export class localData {

setUsers (users){
window.localStorage.users_data = JSON.stringify(users);
return JSON.parse(window.localStorage.users_data || '[]');


and finally my html template search.html

[animated]= true>

<ion-content padding>
<ion-item class="item-avatar item-avatar-left item-button-right common-list" *ngFor="let user of users"></ion-item>


in the html template, inside the div i want to user the user.username but it is not working.

How is it possible to display it?

Thank you a lot

Answer Source

You need to construct your template as shown below on Ionic.

 <ion-content padding> 
        <ion-item *ngFor="let user of users">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download