Why we can not use directly console.log in Angular?

Question

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.component.ts:

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

Then I can get the value:

test.component.html:

{{ log(variable) }}

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

you can follow this answer in stackoverflow [same question in stackoverflow](https://stackoverflow.com/questions/24901339/angularjs-simple-scope-console-log-returns-undefined) — Sameera Prasad Jayasinghe, Jul 11 '17 at 05:23
@Claies - that was probably the best answer. Thanks! If you will provide the answer I will accept it — Julius Dzidzevičius, Jul 11 '17 at 05:48
Hi @FromZeroToHero - I have added in the correct answer below (you can in fact do what you want) - enjoy :) — NightCabbage, Jul 11 '17 at 05:56
@Günter Zöchbauer, I marked it as Angular, but for some reason people write about AngularJs. Thought these frameworks share same functionality in this case, so upvoted some answers and that was BIG mistake :( — Julius Dzidzevičius, Jul 11 '17 at 06:54
There are tons of Angular questions inappropriately tagged and therefore people don't have confidence in the tags. Also the content of your question doesn't allow to derive for sure what version you meant. Angular and AngularJS are two entirely different frameworks. This is a surprise to many, this is probably one of the reasons why often the wrong tags were added. — Günter Zöchbauer, Jul 11 '17 at 07:00
@Günter Zöchbauer, yeah I know, I noticed that. Also quite often people give tags of both frameworks. There could be reason for this, I guess, but in most cases they should pick just one of them. SO could implement some feature to tell users to pick only one of those tags, unless they are very sure about the need of both — Julius Dzidzevičius, Jul 11 '17 at 07:09
@Günter Zöchbauer, and you wrote - "Also the content of your question doesn't allow to derive for sure what version you meant" - well if users have checked the tag I added to the question, they would notice this - "NOT FOR ANGULARJS !". And its capitalised. Thought this would be enough.. — Julius Dzidzevičius, Jul 11 '17 at 07:14
Not sure what your point is. I can't see "NOT FOR ANGULARJS !" in your question and as I pointed out, it's quite common wrong tags are added. To avoid such confusion try to make it more obvious in the future. If you don't know AngularJS, it's probably not too easy. If you know it you'll know that `@Component()`, `(click)="..."` and other syntax specific to Angular 4 will make it clear. If the question doesn't contain anything like that, it might be useful to mention "Angular 4" somewhere in your question. — Günter Zöchbauer, Jul 11 '17 at 07:19
@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, Jul 11 '17 at 07:30

score 4 · Accepted Answer · answered Jul 11 '17 at 05:54

So in Angular (2/4), the only things accessible in the template are things that fall within the scope of your corresponding component'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 component:

@Component({
    selector: 'my-component',
    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.

You might want to declare _console_ to be _public_ as you access it from the component. Not required for JiT, but this is a pitfall once you go for AoT. — Jan B., Jul 11 '17 at 07:42
No, luckily you don't need to do that, as public is the default - so when you don't specify anything, it will be public :) — NightCabbage, Jul 17 '17 at 04:30

score 3 · Answer 2 · answered Jul 11 '17 at 05:24

3

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.

answered Jul 11 '17 at 05:24

Samuel Toh

18,006
3
24
39

Just adding in a comment to say that this answer is incorrect because we're talking about Angular 2/4 not AngularJS / 1. There is no $scope or controller :) – NightCabbage Jul 11 '17 at 05:49

score 1 · Answer 3 · answered Jul 11 '17 at 06:30

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 component/controller hence can't be used directly.

Hope it clears your confusion.

score 0 · Answer 4 · answered Jul 11 '17 at 05:24

0

you should use a function

ex.

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

then use function in view

{{log2(variable)}}

answered Jul 11 '17 at 05:24

Behnam

6,244
1
39
36

As posted above, this question is related ti Angular 2/4, not AngularJS / 1. – NightCabbage Jul 11 '17 at 05:50

Why we can not use directly console.log in Angular?

4 Answers4