how to add social share button in angular 4

Question

I have run the command "npm install --save ng2-social-share".

and then add into app.module.ts:-

import { CeiboShare } from 'ng2-social-share';

@NgModule({
  imports: [
    CeiboShare
  ]
});

and then i add into my home.component.ts:-

import { CeiboShare } from 'ng2-social-share';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  directives: [CeiboShare]
})

webpack: Compiling... ERROR in src/app/home/home.component.ts(16,3): error TS2345: Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; directives: typeof CeiboShare[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

Date: 2018-02-27T09:02:42.288Z - Hash: bedb972b22f9a72ebb59 - Time: 2832ms 5 unchanged chunks chunk {main} main.bundle.js (main) 367 kB [initial] [rendered]

webpack: Compiled successfully.

Answer 1

The simple way for you is to import in your app.modules.ts like this 1) import {CeiboShare} from 'ng2-social-share';

@NgModule({

declarations: [ AppComponent, CeiboShare ] })

2) and then in your home.component.ts

you need to just only define the url sharing link and image url sharing if you want like this:

//vars used only for example, put anything you want :)

public repoUrl = ' https://www.egozola.com '; public imageUrl = 'https://avatars2.githubusercontent.com/u/10674541?v=3&s=200 ';

3. the in your home.component.html the you can call sharing easily like this

   button ceiboShare [facebook]="{u: repoUrl}">Facebook Linkedin Google Plus Twitter Pinterest

4. good all thing is working well

Answer 2

What you could do is to use these functions on your typescript file and call it from the template.

Providing here 5 Social Media Share - Facebook, Pinterest, Twitter, GooglePlus, LinkedIn

  // Facebook share won't work if your shareUrl is localhost:port/abc, it should be genuine deployed url 
  shareOnFacebook(shareUrl: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`, 'sharer');
  }

  shareOnPinterest(shareUrl: string, img: string, desc: string) {
    shareUrl = encodeURIComponent(shareUrl);
    img = encodeURIComponent(img);
    desc = encodeURIComponent(desc);
    window.open(`https://www.pinterest.com/pin/create/button?url=${shareUrl}&media=${img}&description=${desc}`, 'sharer');
  }

  shareOnTwitter(shareUrl: string, desc: string) {
    shareUrl = encodeURIComponent(shareUrl);
    desc = encodeURIComponent(desc);
    window.open(`https://twitter.com/intent/tweet?url=${shareUrl}&text=${desc}`, 'sharer');
  }

  shareOnGooglePlus(shareUrl: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://plus.google.com/share?url=${shareUrl}`, 'sharer');
  }
  
  // LinkedIn share won't work if your shareUrl is localhost:port/abc, it should be genuine deployed url
  shareOnLinkedIn(shareUrl: string, title: string, summary: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://www.linkedin.com/shareArticle?url=${shareUrl}&title=${title}&summary=${summary}`, 'sharer');
  }

Hope this will help you or somebody else. Thanks!

Answer 3

remove that directives: [CeiboShare] from @component decorator. It is not supported in angular 4 and you don't even need to import it into your component. Just Import into Ngmodule as below,

import { CeiboShare } from 'ng2-social-share';

@NgModule({
 imports: [
  CeiboShare.forRoot()
 ]
});

This would suffice to get it working in any component as attribute directives.