[SOLVED] Can't bind to 'ng-click' since it isn't a known property of 'div'

Can't bind to 'ng-click' since it isn't a known property of 'div'

Here is a simple jquery function in my ts component

open_user(user) {
  $(user).css("visibility", "visible");
  $(user).css("opacity", "1");
}

Here is how I call it in html

<div class="user" *ngFor="let user of arrUsers" ng-click="open_user({{user.id}})">
    <img src={{user.profile_img}} class=user-image>
    ...
</div>

I am getting this error

Can't bind to 'ng-click' since it isn't a known property of 'div'. ("

<div class="user" *ngFor="let user of arrUsers" [ERROR ->]ng-click="open_user({{user.id}})">

Cannot find a solution anywhere..

P.S. New to angular

Solution

ng-click is for angularjs, your template looks like angular 2+, if so, use (click)="..." instead.

<div class="user" *ngFor="let user of arrUsers" (click)="open_user(user.id)">

Also note that using jquery for DOM manipulation in angular app is generally not a good approach.