web-social-share is built using Stencil (stenciljs.com/docs/angular). Therefore after npm install you need to:
i) update the relevant module (e.g. home.module) with schemas : [CUSTOM_ELEMENTS_SCHEMA]
ii) update main.ts with a "defineCustomElements" call.
Typically you may add these 2 lines:
import {defineCustomElements} from 'web-social-share/dist/loader';
defineCustomElements();
However, in practice, you probably already have a defineCustomElements e.g. if you're using pwa-elements. So you need to do something like:
import * as socialShare from 'web-social-share/dist/loader';
socialShare.defineCustomElements();
As stated in the documents using the "display:block" attribute within the web-social-share element is important - don't skip that.
If you're using ionicons you will probably need to add a "size=large" attribute.
As hinted in the docs: you would want to include an "import {WebSocialShareInput} from 'web-social-share';" so that you can specify the type of your shareOptions object i.e. if you activate the element via a line like "webshare.share = share", then "share" should have been defined as type WebSocialShareInput.
I think we should add "Angular" next to "Ionic". This hasn't to be done, or has to be done differently, with other frameworks but, beside that, coolio 🤙.
We can maybe provide these notes in the repo in a separate new markdown file, like IONIC.md and add a note in the README.md like "For Ionic find more information here" or something which points to this specific doc.
What do you think? If that works for you, can you even send a PR?
Sweet happy to hear it worked out!
Sure if you don't mind compiling your observations, never against.
Thanks for giving it a try and for the feedback 😀.
Wasn't sure how best to send this so I'm just putting it here and you decide how best to use it.
SOME NOTES ON USING WEB-SOCIAL-SHARE IN IONIC VIA NPM
Typically you may add these 2 lines:
import {defineCustomElements} from 'web-social-share/dist/loader';
defineCustomElements();
However, in practice, you probably already have a defineCustomElements e.g. if you're using pwa-elements. So you need to do something like:
import * as socialShare from 'web-social-share/dist/loader';
socialShare.defineCustomElements();
As stated in the documents using the "display:block" attribute within the web-social-share element is important - don't skip that.
If you're using ionicons you will probably need to add a "size=large" attribute.
As hinted in the docs: you would want to include an "import {WebSocialShareInput} from 'web-social-share';" so that you can specify the type of your shareOptions object i.e. if you activate the element via a line like "webshare.share = share", then "share" should have been defined as type WebSocialShareInput.
Really nice @phkla1 👍
I think we should add "Angular" next to "Ionic". This hasn't to be done, or has to be done differently, with other frameworks but, beside that, coolio 🤙.
We can maybe provide these notes in the repo in a separate new markdown file, like
IONIC.mdand add a note in theREADME.mdlike "For Ionic find more information here" or something which points to this specific doc.What do you think? If that works for you, can you even send a PR?
Hi @daviddalbusco . Yes, good idea on PR. I'll do that shortly.
❤️