CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
J.G.Sable
J.G.Sable

Reputation: 1408

Dynamically position an element relative to another element with Angular

If I have a grid row of several elements like this. Each element is a col-lg-3 with a mouseenter function. When mouseenter is triggered, we display the div with the class "popover", but given the div's position in the html, it always displays at the end of the row (the for loop). I want to display the div that has the class popover directly adjacent to the div hovered over. To do that, I need to get the position of the hovered over element and adjust the x,y coordinates, height, width, and other css properties of the div with the class "popover". Any thoughts on how this is done with Renderer2?

<div class="row">
  <div class="card col-lg-3" *ngFor="let x of apples"
    (mouseenter)="displayPopover()">
    <div card-body">
      stuff here
    </div>
  </div>
  <div class="popover" *ngIf="showPopover">
    <p>position me</p>
  </div>
</div>

In my typescript file I have a function like so:

displayPopover() {
     this.showPopover = true;
     // dynamically position the popover next to the div that was hovered over
}

Right now, the

Upvotes: 0

Views: 5047

Answers (1)

Shashi
Shashi

Reputation: 474

Typically you will follow the concept of the parent having position: relative and child being position: absolute followed by top bottom left right properties. This will keep the element inside the parent, now to pull them out, you have to play with negative margin values.

Also, play with z-index in case the element goes behind some other element.

Now, for the Dynamic part, you don't need to do it dynamically, just have a pre-defined class and it should work. Still, want to do it dynamically? core javascript style functions work fine and can be used at proper component lifecycle event.

Also, more Angular way would be to have the classes rebuilt with properties and then just add class-based on flags wherever you want.

Hope this helps!

Upvotes: 0

Related Questions