CODEWITHSUNDEEP
cssangular
knbibin
knbibin

Reputation: 1211

how to write conditional css in angular4?

I have a table which each row is looping based on api data. In one column I have an edit icon and on click of the icon one pop will open. I just want to show the popup once at a time, means if one popup is open user won’t able to click the remaining edit icon. I just tried to use the css - "pointer-events: none” to disable the icon but how to write the condition?

Upvotes: 2

Views: 3731

Answers (1)

Gopal Yadav
Gopal Yadav

Reputation: 368

First, you will need to have access to the popup (generic utility) which can tell you that if the popup is open or closed. You can maintain it by a variable or method - depending on how you have built/using the popup functionality in your application.

If you are using any of the Angular specific built-in libraries for popup then it might have this utility.

Once you get the popup open state then there are multiple ways in Angular template which you can use to set pointer-events none to disabled icon:

  1. NgClass - <a class="icon" [ngClass]="{'pointer-none': popup_isOpen}"></a>

Also in your css define class -

.pointer-none { pointer-events : none; }

  1. NgStyle - <a class='icon' [ngStyle]="{'pointer-events': popup_isOpen ? 'none' : 'inherit'}"></a>

Upvotes: 4

Related Questions