Solution 1 :

Using display: inline-block might help.

.noclick {    
     cursor: default;
     pointer-events: none;
     display: inline-block;

Solution 2 :

Please use this if this help

  1. Don’t use pointer-events css as this will only stop click events for element in which you have applied it but parent propagation is not stopped by it for this you need to prevent parent’s click as well

  2. Use Directive instead to prevent click event and parent propogation as well

Have a look at this link:

For more information on pointer-events read this:

Problem :

Hi I have a probleme with style and I can’t understand how to fix it. Style pointer-events: none doesn’t work.

This is example of my code:


.noclick {    
     cursor: default;
     pointer-events: none;

And my html:

[ngClass]="{'search-icon': searchIcon}"
    <ng-template let-searchModel pTemplate="item">
        <div class="ui-helper-clearfix">
            <span *ngIf="searchModel.title" class="noclick">{{ searchModel.title }}</span>
            <span *ngIf="!searchModel.title">{{ searchModel.shortName || searchModel.fullName }}</span>


Comment posted by Rob

Is this actually Angular? If so, you need to tag it.

Comment posted by M0ns1f

check if the class noclick is in the element after render

Comment posted by Sam Kilanoff

Yeah this is angular, how I need to tag it?