File

src/lib/share-button.directive.ts

Metadata

Index

Methods
Inputs
HostListeners

Constructor

constructor(shareService: ShareService)
Parameters :
Name Type Optional
shareService ShareService No

Inputs

files
Type : ReadonlyArray<File>
text
Type : string
title
Type : string
Required :  true
url
Type : string

HostListeners

click

Methods

Public share
share()
Decorators :
@HostListener('click')
Returns : void
import {
  Directive,
  HostListener,
  Injectable,
  Input,
} from '@angular/core';
import { Required } from '@rxap/utilities';

@Injectable({ providedIn: 'root' })
export class ShareService {

  public async share(data: { url?: string, text?: string, title?: string, files?: ReadonlyArray<File> }) {

    if (this.isShareSupported()) {

      if ((navigator as any).canShare(data)) {

        await (navigator as any).share(data);

      } else {
        console.debug('share data:', data);
        throw new Error('Can not share data. Data is invalid!');
      }

    } else {
      alert('Native share is not supported!');
    }

  }

  private isShareSupported(): boolean {
    return !!(navigator as any).share;
  }

}

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

  @Input()
  public url!: string;

  @Input()
  public text!: string;

  @Input({ required: true })
  public title!: string;

  @Input()
  public files?: ReadonlyArray<File>;

  constructor(private readonly shareService: ShareService) {
  }

  @HostListener('click')
  public share() {
    this.shareService.share({
          url: this.url,
          text: this.text,
          files: this.files,
          title: this.title,
        })
        .then(() => console.log('share successfully'))
        .catch(err => console.error('share failed', err.message));
  }

}


results matching ""

    No results matching ""