angular 2 template use console.log

Question

I would like to use the console.log inside the inline template but can't find any directions.

@Component({   selector:"main",   providers: [ItemService],   template:`     <ul>      <li *ngFor="let item of items">       {{console.log(item)}} <----- ???        <p>{{item.name}}</p>      </li>     </ul>    ` }) export class HomeComponent {   private items: Array<ItemModel>;    constructor() {} } 

Answer 1

You can't access globals, statics, ...

You can only access properties of the component the view belongs to.

You can add a

log(val) { console.log(val); } 

to your component and use it like

{{log(item)}}  

but be prepared this to be logged quite often (every time change detection runs).

For debugging I prefer

 {{item | json}}  

Answer 2

Better way to do it :

This way you can access all the console properties on template side

---

Component side :

export class AppComponent  {   console = console; } 

Template Side :

{{ console.log('----------------> Logging') }} {{ console.warn('----------------> Warning') }} {{ console.error('----------------> error') }} 

WORKING DEMO