angular - Angular2 typescript how to get object properties to display in template -

i learning angular2 , typescript , wondering why can not access property values of object in template.

my component:

export class farm{      data:json;     id: any;      constructor(private nextservice: nextservice, navparams: navparams){         this.id = navparams.get("param1");      }      getfarmdetails(){          this.data = this.nextservice.fetchdata(this.id)         console.log(this.data)     } } 

where console.log(this.data) gives me object {id: 1, name: "leanne graham", username: "bret", email: "sincere@april.biz", address: object…}

in template have

<div>     {{data}} </div> 

which outputs on screen [object object]

how can instead output properties email or username?

update: if {{data.email}} following error:

you can access properties in javascript.

for example:

{{data.email}}  

if data retrieved asynchronously can use elvis operator ?. avoid errors while data null.

{{data?.email}}