core

This library was generated with Nx and floating-ui for Angular apps.

Note

I strongly recommend not using this library until its stable version is released.

Usage

FloatingService

Before using you should add this service to providers list

import { FloatingService } from '@ngx-popovers/core';

@Component({
  standalone: true,
  providers: [FloatingService],
  template: '',
  styles: ''
})
export class AppComponent {
}

(method) computePosition

The computePosition method is a proxy for computePosition from floating-ui

(method) autoUpdate

The autoUpdate method is a proxy for autoUpdate from floating-ui

floatingService = inject(FloatingService);

this.floatingService.computePosition(trigger, floating);

You also can import all types and methods of floating-ui from this package

import { 
  Derivable, 
  FlipOptions, 
  OffsetOptions, 
  Placement, 
  ShiftOptions 
} from '@ngx-popovers/core';

portal

This library was generated with Nx for Angular apps.

Portal

The <ngx-portal/> component displays the content on the body.

<ngx-portal>
    <p>It will be displayed as the last child of the body</p>
</ngx-portal>

This component is required to display tooltips correctly without overlapping with other elements on the page.

floating

This library was generated with Nx using floating-ui for Angular apps

Note I strongly recommend not using this library until its stable version is released.

The Floating component implements the floating-ui library for Angular

Usage

See more information about the properties in the official documentation floating-ui

<div #trigger>
    <p>Trigger content</p>
</div>

<ngx-floating
  [trigger]="trigger"
  [placement]="'bottom'"
  [offset]="10"
  [flip]="{mainAxis: false}"
  [shift]="{mainAxis: true}"
>
  <div class="floating">
    <p>Floating content</p>
  </div>
</ngx-floating>

Inputs

@Input() placement

controls the position of the floating relative to the trigger (docs)

@Input() flip

changes the placement of the floating element to keep it in view (docs)

@Input() shift

shifts the floating element to keep it in view (docs)

@Input() offset

translates the floating element along the specified axes (docs)

@Input() arrow

Adds arrow to floating

@Input() arrowPadding

If your floating element has border-radius, this will prevent it from overflowing the corners. (more)

@Input() autoUpdate

updates floating element automatically. Default true

@Input() bindTo

renders floating element as last child of bindTo. Default is body.

Configuration

There is a configuration token NGX_FLOATING_CONFIG. Please, use the NgxFloatingConfig class to change the default floating properties.

export const FloatingConfigProvider: Provider = {
  provide: NGX_FLOATING_CONFIG,
  useValue: new NgxFloatingConfig({
    placement: 'top-end',
    arrow: true
  })
};

Arrow custom component

You can provide your own component for arrow visualization

A custom arrow component:

@Component({
  standalone: true,
  template: `
    <div
      style="
        width: 5px;
        height: 5px;
        transform: rotate(45deg);
        background: indianred;
      "
    ></div>
  `
})
export class CustomArrow extends FloatingArrowBase {
}

export const ArrowProvider: Provider = {
  provide: NGX_FLOATING_ARROW_COMPONENT,
  useValue: CustomArrow
};

Any module:

@Component({
  standalone: true,
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers: [ArrowProvider]
})

Sources

This package is a major dependency for other packages:

• popover
• tooltip