0

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!

  • Are you trying to bind the style of a button to the wether or not an image has loaded? Whatever your exact needs are though you don't want to go down the path you've laid out here. You're going to what to do that in the component, not the template. – Rip Ryness Nov 19 '19 at 23:02
  • Thank you for the reply! Exactly I want to underline the menu button if a specific component with a specific id is in . Could you give me please advice how to do this? –  Nov 19 '19 at 23:17

1 Answers1

0

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

acandylevey
  • 315
  • 2
  • 14