angular 2 template use console.log

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

  providers: [ItemService],
     <li *ngFor="let item of items">
      {{console.log(item)}} <----- ??? 

export class HomeComponent {
  private items: Array<ItemModel>;

  constructor() {}

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


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

For debugging I prefer

 {{item | json}} 

How to print to console.log from inside Angular.js inline-template's , You can achieve this by calling some debugging function defined in the controller scope with ng-init in the template definition. See this example� The Angular application manages what the user sees and can do, achieving this through the interaction of a component class instance (the component) and its user-facing template. You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM).

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') }}


angular-console-log-template, Starter project for Angular apps that exports to the Angular CLI. 2. 3. 4. 5. 6. 7. 8 . 9. 10. 11. 12. import { Component } from '@angular/core'; name = 'Angular 5';. console = console; console;. Compiling application & starting dev server On this page we will provide angular 2 template reference variable example. A template reference variable is a reference to a DOM element or directive within a template. Using template reference variable we access the values of DOM element properties. Template reference variable is declared using # and ref-as prefix, for example #myVar and ref

an easy way to debug is to create a pipe for that :

import { Pipe, PipeTransform } from '@angular/core';

    name: 'log'
export class LogPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        return null;

Then you just have to write this in the template :

{{ variable | log }}

Angular: Adding Logging in Angular Applications, In this logging service, you can still call console.log, but you can also modify To use this service in your Angular application, you need to import it in your export enum LogLevel { All = 0, Debug = 1, Info = 2, Warn = 3, Error = 4, Fatal = 5, Off = 6 } Now that you have the template for creating each log publishing class, let's� Angular Template-driven Forms is one of the two ways of building forms in Angular. In this tutorial, we will learn how to build a simple Template-driven forms example app. First, we build a simple HTML form using a few form elements. The ngForm directive will convert it to the Template-driven form and create the top-level FormGroup control.

angular 2 template use console.log - angular - html, 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 >� The Top 8 Best Angular Books, which helps you to get started with Angular ShareReplay We use the shareReplay when you want subscribers to share the observable and access previously emitted values. i.e. the observable is subscribed only once and for every subsequent subscription, the previously received value is used.

Find Out How to Debug Angular 2 Applications, Even though Angular 2 is still young, there are plenty of debugging school, there is a neat way to debug your Angular 2 application from the console. that provide similar functionality - angular2-log and angular2-logger. Since typescript is a superset of javascript, I'd expect functions like console.log to work. console.log works perfectly in .ts files when outside a component class but does not work as I'd expect from inside the component class. // main.ts import { Component } from '@angular/core'; console.log("Hello1"); //1.

Angular Debugging Tips and Tricks - Angular 10, The content is likely still applicable for all Angular 2 + versions. Note to use Augury you must make sure you Angular app is in development mode. has logged out the exact stack trace that triggered the error at the top of the console. What happens though when we have a bug in our templates/HTML? In Angular2, the template can only access fields and methods of the component class. Everything else is off-limits. This includes things which are visible to the component class. The way to go around this is to have a field inside the component, which just references the constant, and use that instead.

  • That doesn't make sense. console.log doesn't return anything, so you're binding undefined into your HTML. What are you actually trying to achieve? If you want to see the details of each item for debugging purposes, consider putting {{ item | json }} in your template instead, or just iterate over the list and log it within the class wherever you get access to it.
  • @jonrsharpe I would like just to check the item and then delete the console.log(item)
  • But what does "check the item" actually mean? If you just want to see its content, use the JSON pipe as I and Günter have suggested. If not, please clarify what you do want - why do you want it in the console, particularly?
  • Guenter solution did the trick, didn't know about the JSON pipe as I just started with angular2.
  • OK, cool. In the future, please note that this kind of thing is an XY problem - you didn't want to use console.log particularly, you just wanted to see the content of the objects you were iterating over.
  • @user2080105 , nope it will just console each time view refreshes.