Adding Angular 2 (click) attribute globally to CSS

Question

In Angular 1, you could simply add

[ngClick],
[data-ng-click],
[x-ng-click] {
    cursor: pointer;
}

and all tags with the ng-click attribute would now have the pointer cursor now. How can we add the Angular 2 (click) attribute in the same way?

John Hamm · Accepted Answer · 2017-01-24 22:16:56Z

6

This is not possible using just the name of an attribute. Angular 2 changes this template:

<div>
    <h2>Hello {{name}}</h2>
    <div (click)="sayhi()"></div>
</div>

to this DOM:

 <div _ngcontent-xwy-0="">
     <h2 _ngcontent-xwy-0="">Hello Angular2</h2>
     <div _ngcontent-xwy-0=""></div>
  </div>

Since there is no way to specify a wildcard attribute name CSS selector (i.e. [_ngcontent-*] { cursor: pointer }, there is no way to achieve this using just CSS.

answered Jan 24, 2017 at 22:16

John Hamm

5134 silver badges11 bronze badges

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

2 Comments

cbrawl Over a year ago

That makes sense. I hope there is some way to work around this in the future.

Samantha Adrichem Over a year ago

You can disable view encapsulation. Then it is possible. Not sure that's desired though.

Amedeo Mantica · Accepted Answer · 2018-09-27 09:13:14Z

-2

<div href="javascript:void(0)" (click)="sayhi()"></div>

answered Sep 27, 2018 at 9:13

Amedeo Mantica

11 bronze badge

1 Comment

Jan Krüger Over a year ago

This does not really answer the question; the question is about styling an element that has the (click) pseudo attribute on it, using CSS.

Collectives™ on Stack Overflow

Adding Angular 2 (click) attribute globally to CSS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related