ng-navigator-share
Version:
Lightweight Angular wrapper on Web Share API to share PWA apps, Text, URL.
85 lines (64 loc) • 2.52 kB
Markdown
# ng-navigator-share
Lightweight Angular wrapper on Web Share API to share PWA apps, Text, URL.
## Why ng-navigator-share?
This library will save you from checking and writing all the cases for [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share), if ```Navigator.share()``` API is available in your browser or not. So instead of writing all that, you can use this wrapper.
## Demo
Check the ng-navigator-share in action, [click here](https://ng-navigator-share-b75a7.firebaseapp.com/).
## Installation
You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.
#### NPM
```
npm install --save ng-navigator-share
```
#### YARN
```
yarn add --save ng-navigator-share
```
## Usage
Follow below steps to add multi level list in your project
#### 1. Import ```NgNavigatorShareService``` in your component class
You need to import the ```NgNavigatorShareService``` in your component class, where you want to use it. Then use the ```this.ngNavigatorShareService.share()``` method, which will return Promise as shown below.
```typescript
import { Component } from '@angular/core';
import { NgNavigatorShareService } from 'ng-navigator-share';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private ngNavigatorShareService: NgNavigatorShareService;
constructor(
ngNavigatorShareService: NgNavigatorShareService
) {
this.ngNavigatorShareService = ngNavigatorShareService;
}
title = 'app';
share() {
if (!this.ngNavigatorShareService.canShare()) {
alert(`This service/api is not supported in your Browser`);
return;
}
this.ngNavigatorShareService.share({
title: 'My Awesome app',
text: 'hey check out my Share button',
url: 'https://developers.google.com/web'
}).then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
}
}
```
#### 2. In your Markup
```html
<u>
<strong (click)='share()'>share</strong>
</u>
```
## Contribution
I welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at [github repository](https://github.com/ShankyTiwari/ng-navigator-share/issues).
## Leicense
MIT