Problem using slotted icons using ionic 4

[fmendoza]

Hi there,

I followed the instructions for Ionic 4 but still I can't get the ionicons show correctly. Any advice?

Code:

public webSocialShare: { show: boolean, config: any, onClosed: any } = {
    show: false,
    config: [{
      facebook: {
        socialShareUrl: 'https://fluster.io',
        socialSharePopupWidth: 300,
        socialSharePopupHeight: 500
      }
    },{
      twitter: {
        socialShareUrl: 'https://fluster.io',
        socialSharePopupWidth: 300,
        socialSharePopupHeight: 500
      }
    }],
    onClosed: () => {
      this.webSocialShare.show = false;
    }
};

Template:

<web-social-share
    (closed)="webSocialShare.onClosed()"
    [show]="webSocialShare.show"
    [share]="webSocialShare.config">
    <ion-icon name="logo-facebook" slot="facebook"></ion-icon>
    <ion-icon name="logo-twitter" slot="twitter"></ion-icon>
</web-social-share>

[peterpeterparker]

@fmendoza are you using v3.0.1? could I checkout your projet to give it a try?

  <web-social-share show="false">
    <ion-icon name="logo-twitter" slot="twitter"></ion-icon>
  </web-social-share>

<script type="text/javascript">

    // Show / hide

    function show(showValue) {
      const elem = document.getElementsByTagName('web-social-share');
      if (elem && elem.length > 0) {
        elem[0].show = showValue;
      }
    }

    // Share options

    const share = {
      displayNames: true,
      config: [{
        twitter: {
          socialShareUrl: 'https://fluster.io',
          socialSharePopupWidth: 300,
          socialSharePopupHeight: 400
        }
      }]
    };

    document.addEventListener("DOMContentLoaded", function(event) {
      const elem = document.getElementsByTagName('web-social-share');
      if (elem && elem.length > 0) {
        elem[0].share = share;
      }
    });
  </script>

just work fine for me

[peterpeterparker]

@fmendoza maybe I noticed something, config isn't an array but an object respectively the input property share is an object. could you try instead of your code

public webSocialShare: { show: boolean, config: any, onClosed: any } = {
    show: false,
    config: [{
      facebook: {
        socialShareUrl: 'https://fluster.io',
        socialSharePopupWidth: 300,
        socialSharePopupHeight: 500
      }
    },{
      twitter: {
        socialShareUrl: 'https://fluster.io',
        socialSharePopupWidth: 300,
        socialSharePopupHeight: 500
      }
    }],
    onClosed: () => {
      this.webSocialShare.show = false;
    }
};

the following

public webSocialShare: { show: boolean, config: any, onClosed: any } = {
    show: false,
    config: {
        displayNames: false,
        config:  [{
      facebook: {
        socialShareUrl: 'https://fluster.io',
        socialSharePopupWidth: 300,
        socialSharePopupHeight: 500
      }
    },{
      twitter: {
        socialShareUrl: 'https://fluster.io',
        socialSharePopupWidth: 300,
        socialSharePopupHeight: 500
      }
    }]
    }, 
    onClosed: () => {
      this.webSocialShare.show = false;
    }
};

[fmendoza]

I just tried your suggestion and it seems it works with the first icon but the second still have the style issue.

I deployed a branch with the issue, you can test it here: https://stoic-saha-5ff1aa.netlify.com/1/home/places/1RkEDawEws/lavo-nightclub

Just be sure to turn on emulation mode because I use another package to show the share buttons on desktop.

[peterpeterparker]

@fmendoza could you show me your current configuration's code?

It seems the problem isn't the icon but rather that the second button aka second sub-component isn't added respectively I found only one web-social-share-target in your dom. As these are generated with a forEach according the configuration, maybe there is a glitch somewhere.

Furthermore that sub-component got a style class "facebook" and "twitter", like if both config where provided for the same node...

[fmendoza]

I'm using the following config:

public webSocialShare: { show: boolean, config: any, onClosed: any } = {
    show: false,
    config: {
      config: [{
        facebook: {
          socialShareUrl: 'https://fluster.io',
        },
        twitter: {
          socialShareUrl: 'https://fluster.io',
        }
      }]
    },
    onClosed: () => {
      this.webSocialShare.show = false;
    }
};

template:

<web-social-share
    (closed)="webSocialShare.onClosed()"
    [show]="webSocialShare.show"
    [share]="webSocialShare.config">
    <ion-icon name="logo-facebook" style="font-size:48px" slot="facebook"></ion-icon>
    <ion-icon name="logo-twitter" style="font-size:48px" slot="twitter"></ion-icon>
</web-social-share>

[peterpeterparker]

@fmendoza it's late here, I think there is a typo in your config. I'll try/test tomorrow and ping you afterwards 😉

[fmendoza]

Damn I think my brain is not working after a week of full coding 😂 You're right let's review tomorrow.

[peterpeterparker]

@fmendoza I tried your config and I think it's effectively the config which isn't correct, each social target should be contained in its particular object and not one object containing all social target

config: [{
        facebook: {
          socialShareUrl: 'https://fluster.io',
        },
},{ // <------------------------- missing
        twitter: {
          socialShareUrl: 'https://fluster.io',
        }
      }]

could you try (I also suggest to rename the variable config):

public webSocialShare: { show: boolean, share: any, onClosed: any } = {
    show: false,
    share: {
      config: [{
          facebook: {
            socialShareUrl: 'https://fluster.io'
          }
        },{
          twitter: {
            socialShareUrl: 'https://fluster.io'
          }
        }]
    },
    onClosed: () => {
      this.webSocialShare.show = false;
    }
};

<web-social-share
    (closed)="webSocialShare.onClosed()"
    [show]="webSocialShare.show"
    [share]="webSocialShare.share">
    <ion-icon name="logo-facebook" style="font-size:48px" slot="facebook"></ion-icon>
    <ion-icon name="logo-twitter" style="font-size:48px" slot="twitter"></ion-icon>
</web-social-share>

[fmendoza]

That was it! 👍 Problem solved :)

[peterpeterparker]

Coolio @fmendoza 👍

Ping me for any questions, issues or features requests