Say I have a variable and I want to see its value in the console. But in Angular I can not just write {{ console.log(variable) }} in my template. I must recreate this function in my class, like:

testponent.ts:

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

Then I can get the value:

testponent.html:

{{ log(variable) }}

So why I cannot just write {{ console.log(variable) }}?

Say I have a variable and I want to see its value in the console. But in Angular I can not just write {{ console.log(variable) }} in my template. I must recreate this function in my class, like:

test.ponent.ts:

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

Then I can get the value:

test.ponent.html:

{{ log(variable) }}

So why I cannot just write {{ console.log(variable) }}?

• javascript
• angular

• 1 you can follow this answer in stackoverflow same question in stackoverflow – Sameera Prasad Jayasinghe Commented Jul 11, 2017 at 5:23
• @Claies - that was probably the best answer. Thanks! If you will provide the answer I will accept it – Julius Dzidzevičius Commented Jul 11, 2017 at 5:48
• 1 Hi @FromZeroToHero - I have added in the correct answer below (you can in fact do what you want) - enjoy :) – NightCabbage Commented Jul 11, 2017 at 5:56
• Is this question about Angular 1.x or Angular 4? – Günter Zöchbauer Commented Jul 11, 2017 at 6:25
• 1 @Günter Zöchbauer, yes, I totally agree, I just meant that this is an example of how lack of knowledge burden our world. But you are totally right - I ignored the fact that people might not know it (even if I think it is obvious) and didn't note this fact on purpose and unconsciously. Next time I will try to provide more details just because I know that users usually lack this kind of info. Good that I know what they lack... – Julius Dzidzevičius Commented Jul 11, 2017 at 7:30

4 Answers 4

So in Angular (2/4), the only things accessible in the template are things that fall within the scope of your corresponding ponent's class - ie. anthing you could say "this.blah" in the ts.

So, you can in fact do what you propose, but you need to add console into the scope of your ponent:

@Component({
    selector: 'my-ponent',
    template: `This is my template {{console.log(variable)}}`
})
export class MyComponent {
    console = console;
    variable = 'yay';
}

(the key line here is console = console;)

And then this will output 'variable' with the text 'yay' to the console - the catch is that it will do that every time the expression is rendered... which will often be many times. So it's not particularly good practice, but if you're just debugging it could be ok.

Q: Why I cannot just write {{ console.log(variable) }}?

A: Short answer. Because the build-in functionality console is not part of the controller's $scope object.

This is because console.log() is a part of global window object and window object cannot be directly accessed in templates.

Whenever the angular engines finds the interpolation string {{}} it uses the built-in interpolation service that basically returns the scope associated with the expression and evaluates the variables used in that scope with respect to this returned scope. The template has access to only those properties that are in its scope. window object does not belong to the scope of ponent/controller hence can't be used directly.

Hope it clears your confusion.

you should use a function

ex.

$scope.log2=function(param){
   console.log(param);
}

then use function in view

{{log2(variable)}}