Is it possible to change model variable value in view/ HTML in Angular?

Question

I want to use <ngui-in-view> in my project but not in order to display or not an image but in order to activate/deactivate a style for a specific button. This means I want to change the value of a variabe only if <ngui-in-view> is in the view:

Instead of

<ngui-in-view>
  <img *ngIf src="https://picsum.photos/800/300.jpg>
</ngui-in-view>

I want to use something like:

<ngui-in-view>
  <img *ngIf [code to change variable status]>
</ngui-in-view>

where status would be a variable declared in the component? I would appreciate any ideas.

Thank you!

Answer 1

There are inview and notInview outputs that the ngui-in-view component that allow you to know whenever an item has come into view or is out of view. I would tie them to a specific variable if it's only the single element, or keep track of which elements are in view and not in view via an array or dictionary.

<ngui-in-view (inview)="imgVisible = true" (notInview)="imgVisible = false">
  <img *ngIf [ngClass]="{'classToShowWhenNotInView': !imgVisible}">
</ngui-in-view>

More information on the specific components outputs can been seen here: Documentation