angular-directives
  1. Directives
  2. ContenteditableDirective

File

src/lib/contenteditable.directive.ts

Metadata

Selector [rxapContenteditable]
Standalone true

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners

Constructor

constructor(elementRef: ElementRef)
Defined in src/lib/contenteditable.directive.ts:41
Parameters :
Name Type Optional
elementRef ElementRef No

Inputs

initial
Type : string
Defined in src/lib/contenteditable.directive.ts:41
parameters
Type : any
Defined in src/lib/contenteditable.directive.ts:38
rxapContenteditable
Type : Method<any | ContenteditableEvent>
Defined in src/lib/contenteditable.directive.ts:31

Outputs

rxapContenteditable
Type : EventEmitter
Defined in src/lib/contenteditable.directive.ts:35

HostBindings

attr.contenteditable
Type : boolean
Default value : true
Defined in src/lib/contenteditable.directive.ts:25
attr.spellcheck
Type : boolean
Default value : false
Defined in src/lib/contenteditable.directive.ts:28

HostListeners

click
Arguments : '$event'
Defined in src/lib/contenteditable.directive.ts:47
input
Arguments : '$event'
Defined in src/lib/contenteditable.directive.ts:53

Methods

Public onClick
onClick($event: Event)
Decorators :
@HostListener('click', ['$event'])
Defined in src/lib/contenteditable.directive.ts:47
Parameters :
Name Type Optional
$event Event No
Returns : void
Public Async onInput
onInput($event: any)
Decorators :
@HostListener('input', ['$event'])
@DebounceCall(1000)
Defined in src/lib/contenteditable.directive.ts:53
Parameters :
Name Type Optional
$event any No
Returns : any

Properties

Public contenteditable
Default value : true
Decorators :
@HostBinding('attr.contenteditable')
Defined in src/lib/contenteditable.directive.ts:25
Public spellcheck
Default value : false
Decorators :
@HostBinding('attr.spellcheck')
Defined in src/lib/contenteditable.directive.ts:28
 
import {
  Directive,
  ElementRef,
  EventEmitter,
  HostBinding,
  HostListener,
  Input,
  Output,
} from '@angular/core';
import { DebounceCall } from '@rxap/utilities';
import { Method } from '@rxap/pattern';

export interface ContenteditableEvent {
  value: string;
  parameters?: any;
}

@Directive({
  selector: '[rxapContenteditable]',
  standalone: true,
})
export class ContenteditableDirective {

  @HostBinding('attr.contenteditable')
  public contenteditable = true;

  @HostBinding('attr.spellcheck')
  public spellcheck = false;

  @Input('rxapContenteditable')
  public method?: Method<any, ContenteditableEvent>;

  @Output('rxapContenteditable')
  // eslint-disable-next-line @angular-eslint/no-output-native
  public change = new EventEmitter<ContenteditableEvent>();

  @Input()
  public parameters?: any;

  @Input()
  public initial?: string;

  constructor(private readonly elementRef: ElementRef) {
  }

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

  @HostListener('input', [ '$event' ])
  @DebounceCall(1000)
  public async onInput($event: any) {
    const value = (($event.target as HTMLElement).textContent)?.trim();
    if (value && value.length >= 2) {
      const event: ContenteditableEvent = {
        value,
        parameters: this.parameters,
      };
      this.change.emit(event);
      const result = await this.method?.call(event);
      if (result && typeof result === 'string') {
        this.initial = this.elementRef.nativeElement.innerText = result;
      } else if (this.initial) {
        this.elementRef.nativeElement.innerText = this.initial;
      }
    }
  }

}

results matching ""

    No results matching ""