Custom Buttons (legacy)

First, you need to know that there are two types of buttons in this plugin.

• A button that executes a link click.
• A button that executes a function.

A button that executes a link click

constructor(private share: ShareService) {
}

ngOnInit() {
  this.share.addButton('myLinkButton', {
    type: 'myLinkButton',
    text: 'My Portfolio Link',
    color: '#FF4040',
    icon: ['far', 'grin-stars'],
    params: {},
    share: {
      desktop: 'https://murhaf-portfolio-c9f10.web.app/'
    },
  });
}

A button that executes a function

constructor(private share: ShareService) {
}

ngOnInit() {
  this.share.addButton('myFunctionButton', {
    type: 'myFunctionButton',
    text: 'My Function Button',
    color: '#008080',
    icon: ['fas', 'grin-stars'],
    func: () => of({}).pipe(tap(() => alert('Custom button works!'))),
  });
}

Displaying the buttons after defining them

In case of using <share-buttons> component, they will be displayed out of the box.

In case of using <share-button> component, pass the button key you used to define your custom button, like:

<share-button
  button="myFunctionButton"
  showText="true"
  theme="material-dark"
></share-button>

<share-button
  button="myLinkButton"
  showText="true"
  theme="material-dark"
></share-button>

In case of using [shareButton] directive, pass the button key you used to define your custom button, like:

<button shareButton="myFunctionButton">My function button</button>
<button shareButton="myLinkButton">My link button</button>

Here is an example stackblitz

For further reference, have a look here where the default share buttons properties are defined