@ngx-popovers/floating NPM

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

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]
})