Menu
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() {} } 
541
First, you create a simple log service class to log messages using console. log() . Next, you add some logging levels so you can report on debug, warning, error, and other types of log messages. Then you create a generic logging service class to call other classes to log to the console, local storage, and a Web API.
To eliminate the risk of script injection attacks, Angular does not support the <script> element in templates. Angular ignores the <script> tag and outputs a warning to the browser console. For more information, see the Security page.
TypeScript TopicsUsing console. log, we can write content to the web debug console. This is useful for debugging and logging.
The console. log() method in HTML is used for writing a message in the console. It indicates an important message during testing of any program.
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}} 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
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
