Angular2 write on console from template click event

Question

I wonder whether the following is possible somehow. The question is not limited to console.info but all Javascript functions in general.

<a (click)="console.info(foo)">click me doesn't work</a>

Cannot read property 'info' of undefined

It seems that templates can only access component properties, so you have to create an extra function for that inside your Component:

<a (click)="executeConsole(val)">execute console does work</a>

executeConsole(val) {
  console.info(val);
}

With React you can do something like that:

<a onClick={() => console.info('it works')}>it works</a>

Ben Cameron · Accepted Answer · 2017-01-13T08:52:42.673

6

You would have to declare a property that can access the console object in the component ts code then call that. For example...

Declare in your component ts...

public c : any;

In the component constructor set the property to the console object...

this.c = console;

In your view you can now call info()...

<a (click)="this.c.info("Hello world")">click me</a>

edited Jan 13 '17 at 08:52

answered Jan 12 '17 at 12:24

Ben Cameron

4,335
6
51
77

2

Meh, I was hoping there would be something better than this. – zurfyx Jan 16 '17 at 14:53
I agree, it would be nice if you could do it without changes to the component ts code. – Ben Cameron Jan 16 '17 at 15:30

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

You can create a service wrapper for your console and inject it in the corresponding components. If you do that in typescript in the constructor, then it can automatically create a public member for you that will be accessible from template, so it will be just a matter of adding it as constructor parameter.

It seems otherwise not possible to have a "global" scope. See e.g. here.

edited May 23 '17 at 11:46

Community

1
1

answered Jan 13 '17 at 09:15

Ilya Chernomordik

27,817
27
121
207

Damian C · Answer 3 · 2019-02-28T22:00:23.927

How to use a global variable in an Angular component.

I know this is old, but I thought this would be helpful. You don't have to create a wrapper method. You just have to tell your component about an outside global you would like to use, then map it to your component.

Use the declare keyword:

https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

Just write this in your component.

// Import statements...

declare const console;

@Component({
// Your Component Config
})

export class YourComponentClassName {
    public console = console;
}

Then inside your HTML file can use console like this:

<div (click)="console.info('Hello')"> </div>

Angular2 write on console from template click event

3 Answers3

How to use a global variable in an Angular component.