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-13 08:52:42Z

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, 2017 at 8:52

answered Jan 12, 2017 at 12:24

Ben Cameron

4,4636 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gerard Rovira Over a year ago

Meh, I was hoping there would be something better than this.

Ben Cameron Over a year ago

I agree, it would be nice if you could do it without changes to the component ts code.

Community · Accepted Answer · 2017-05-23 11:46:47Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered Jan 13, 2017 at 9:15

Ilya Chernomordik

30.9k31 gold badges148 silver badges245 bronze badges

Comments

Damian C · Accepted Answer · 2019-02-28 22:00:23Z

0

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>

edited Feb 28, 2019 at 22:00

answered Feb 28, 2019 at 21:52

Damian C

2,1812 gold badges16 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular2 write on console from template click event

3 Answers 3

2 Comments

Comments

How to use a global variable in an Angular component.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

How to use a global variable in an Angular component.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related