typescript - wrapping a click event into a *ngIf in Angular 2 -

what best way use (click) when screen size less 768 px in width using angular 2. have (click)="isclassvisible = !isclassvisible;" want put in *ngif="screenwidth < 769 {(click)="isclassvisible = !isclassvisible;"}". not sure how accomplish in angular 2. know isn't valid. nav item has secondary drop down should expand on hover on desktop, , contract when mouse leaves. on mobile want them click nav item open, close if click again. can it, can't figure out how make click event visible in responsive mode.

you have 2 approaches:

1) create 2 separate elements, 1 click event , 1 without. add specific media query enabled classes each element, 1 of them hidden when screen < 768px , other hidden when screen > 768px

2) on onclick event call function in controller instead of directly setting values in ng-click expression. in function in controller can check screen size window object using (window.innerwidth). can tricky sometimes, you'll have lot of testing.

i use first approach, though there technically repeat in markup easier follow.