### File

`src/lib/confirm/confirm.directive.ts`

### Implements

`OnDestroy`

### Metadata

Selector | `[rxapConfirm]`
Standalone | `true`

### Index

###### Properties

- Protected isOverlyOpen
- Protected Optional positionStrategy

###### Methods

- Public onClick
- Protected onConfirmed
- Protected onUnconfirmed
- Protected openConfirmOverly

###### Inputs

- rxapConfirm

###### Outputs

- confirmed
- unconfirmed

###### HostListeners

- click

###### Accessors

- eventValue

### Constructor

`constructor(overlay: Overlay, elementRef: ElementRef)`
Defined in src/lib/confirm/confirm.directive.ts:52

Parameters :

Name | Type | Optional
overlay | `Overlay` | No
elementRef | `ElementRef` | No

### Inputs

rxapConfirm
Type : `T | string`
Defined in src/lib/confirm/confirm.directive.ts:32

### Outputs

confirmed
Type : `EventEmitter`
Defined in src/lib/confirm/confirm.directive.ts:39

unconfirmed
Type : `EventEmitter`
Defined in src/lib/confirm/confirm.directive.ts:42

### HostListeners

click
Arguments : `'$event'`
Defined in src/lib/confirm/confirm.directive.ts:75

### Methods

Public onClick
`onClick($event?: Event)`
Decorators : `@HostListener('click', ['$event'])`
Defined in src/lib/confirm/confirm.directive.ts:75

Parameters :

Name | Type | Optional
$event | `Event` | Yes

Returns : `void`

Protected onConfirmed
`onConfirmed(eventValue?: T)`
Defined in src/lib/confirm/confirm.directive.ts:138

Parameters :

Name | Type | Optional
eventValue | `T` | Yes

Returns : `void`

Protected onUnconfirmed
`onUnconfirmed(eventValue?: T)`
Defined in src/lib/confirm/confirm.directive.ts:142

Parameters :

Name | Type | Optional
eventValue | `T` | Yes

Returns : `void`

Protected openConfirmOverly
`openConfirmOverly()`
Defined in src/lib/confirm/confirm.directive.ts:84
Returns : `void`

### Properties

Protected isOverlyOpen
Default value : `false`
Defined in src/lib/confirm/confirm.directive.ts:52

Protected Optional positionStrategy
Type : `PositionStrategy`
Defined in src/lib/confirm/confirm.directive.ts:50

### Accessors

eventValue
set `eventValue(value: T | string)`
Defined in src/lib/confirm/confirm.directive.ts:32

Parameters :

Name | Type | Optional
value | `T | string` | No

Returns : `void`

    import {
      Overlay,
      OverlayRef,
      PositionStrategy,
    } from '@angular/cdk/overlay';
    import { ComponentPortal } from '@angular/cdk/portal';
    import {
      Directive,
      ElementRef,
      EventEmitter,
      HostListener,
      Inject,
      Input,
      OnDestroy,
      Output,
    } from '@angular/core';
    import { Subscription } from 'rxjs';
    import {
      take,
      tap,
    } from 'rxjs/operators';
    import { ConfirmComponent } from './confirm.component';

    @Directive({
      selector: '[rxapConfirm]',
      standalone: true,
    })
    export class ConfirmDirective<T = any> implements OnDestroy {
      // use a set input to allow auto import detection if the eventValue
      // is not set
      @Input('rxapConfirm')
      public set eventValue(value: T | '') {
        if (value !== '') {
          this._eventValue = value;
        }
      }

      @Output()
      public confirmed = new EventEmitter<T | undefined>();

      @Output()
      public unconfirmed = new EventEmitter<T | undefined>();

      private subscription: Subscription | null = null;

      private overlayRef?: OverlayRef;

      private _eventValue?: T;

      protected positionStrategy?: PositionStrategy;

      protected isOverlyOpen = false;

      constructor(
        @Inject(Overlay)
        protected readonly overlay: Overlay,
        @Inject(ElementRef)
        protected readonly elementRef: ElementRef,
      ) {
        this.positionStrategy = this.overlay
                                    .position()
                                    .flexibleConnectedTo(this.elementRef.nativeElement)
                                    .withPositions([
                                      {
                                        originX: 'start',
                                        originY: 'bottom',
                                        overlayX: 'start',
                                        overlayY: 'top',
                                      },
                                    ])
                                    .withDefaultOffsetY(10);
      }

      @HostListener('click', [ '$event' ])
      public onClick($event?: Event) {
        this.openConfirmOverly();
      }

      public ngOnDestroy() {
        this.subscription?.unsubscribe();
        this.overlayRef?.dispose();
      }

      protected openConfirmOverly() {
        if (this.isOverlyOpen) {
          return;
        }
        this.isOverlyOpen = true;
        this.overlayRef = this.overlay.create({
          scrollStrategy: this.overlay.scrollStrategies.close(),
          positionStrategy: this.positionStrategy,
        });
        const componentPortal = new ComponentPortal(ConfirmComponent);
        const componentRef = this.overlayRef.attach(componentPortal);

        this.subscription?.unsubscribe();
        this.subscription = new Subscription();

        this.subscription.add(
          componentRef.instance.confirmed
                      .pipe(
                        take(1),
                        tap(() => this.onConfirmed(this._eventValue)),
                        tap(() => this.overlayRef?.dispose()),
                        tap(() => this.isOverlyOpen = false),
                        tap(() => (this.subscription = null)),
                        tap(() => this.subscription?.unsubscribe()),
                      )
                      .subscribe(),
        );

        this.subscription.add(
          componentRef.instance.unconfirmed
                      .pipe(
                        take(1),
                        tap(() => this.onUnconfirmed(this._eventValue)),
                        tap(() => this.overlayRef?.dispose()),
                        tap(() => this.isOverlyOpen = false),
                        tap(() => (this.subscription = null)),
                        tap(() => this.subscription?.unsubscribe()),
                      )
                      .subscribe(),
        );

        this.subscription.add(
          this.overlayRef
              .detachments()
              .pipe(
                take(1),
                tap(() => this.isOverlyOpen = false),
                tap(() => (this.subscription = null)),
                tap(() => this.subscription?.unsubscribe()),
              )
              .subscribe(),
        );
      }

      protected onConfirmed(eventValue?: T) {
        this.confirmed.emit(eventValue);
      }

      protected onUnconfirmed(eventValue?: T) {
        this.unconfirmed.emit(eventValue);
      }

    }

# results matching ""

# No results matching ""