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.

See Demo

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.

See Demo

Usage

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>

You also can display the portal content on an element you want:

<div #portalWillBeInsideMe>
  <p>Portal content will be rendered after this tag</p>
  <!-- Here -->
</div>

<ngx-portal [bindTo]="portalWillBeInsideMe">
    <p>It will be displayed as the last child of the div</p>
</ngx-portal>

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

ClickOutside directive

The click outside directive handles clicks inside and outside HTMLElement. This directive is used by the ngx-floating component

See Demo

Usage

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

@Component({
  selector: 'ngx-click-outside-example',
  standalone: true,
  imports: [ClickOutsideDirective],
  template: `
    <div
      ngxClickOutside
      (inside)="onInsideClicked($event)"
      (outside)="onOutsideClicked($event)"
    ></div>
  `
})
export class ClickOutsideExample {
  onInsideClicked(el: EventTarget) {
    console.log('Inside click!', el);
  }

  onOutsideClicked(el: EventTarget) {
    console.log('Outside click!', el);
  }
}

floating

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

See Demo

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'"
  [middleware]="middleware"
>
  <div class="floating">
    <p>Floating content</p>
  </div>
</ngx-floating>

API

@Input() placement

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

@Input() middleware

list of middleware from floating-ui

@Input() autoUpdate

updates floating element automatically. Default true

@Input() bindTo

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

@Output() clickedOutside($event: Element)

emits when user clicks outside the floating element. $event - element which was clicked

@Output() clickedInside($event: Element)

emits when user clicks inside the floating element. $event - element which was clicked

@Output() computePositionReturn($event: ComputePositionReturn)

emits every time when the floating component calls computePosition.

$event - floating-ui computePosition event

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

The arrow component adds arrow to the floating component.

<div #trigger>Trigger</div>

<ngx-floating
  [trigger]="trigger"
>
  <p>Floating content</p>
  
  <ngx-arrow padding="10" />
</ngx-floating>

See Demo

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_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