Facebook TypeScript SDK for Angular 9.*
npm install ngx-fbThis is a wrapper for the official Facebook JavaScript SDK. It makes it easier to use Facebook SDK with Angular 9.* by providing components, providers and types.
#### 1. Install via NPM:
``shell`
npm i --save ngx-fb
#### 2. Add the Facebook JavaScript SDK to your index.html
`html`
#### 3. Import FacebookModule into your app's root module`typescript
import { FacebookModule } from 'ngx-fb';
@NgModule({
...
imports: [
FacebookModule.forRoot()
],
...
})
export class AppModule { }
`
If you only want to use FacebookService only, without using the other components, then you can import it in your app's module instead of FacebookModule.
#### 4. Inject FacebookService and call the init method (optional):login
This method must be called before using or api methods. It is not required for other methods/components.
`typescript
import { FacebookService, InitParams } from 'ngx-fb';
...
export class MyComponentOrService {
constructor(private fb: FacebookService) {
let initParams: InitParams = {
appId: '1234566778',
xfbml: true,
version: 'v2.8'
};
fb.init(initParams);
}
}
`
You can view our example project here and/or view its source code here
`typescript
import { FacebookService, LoginResponse } from 'ngx-fb';
@Component(...)
export class MyComponent {
constructor(private fb: FacebookService) { }
loginWithFacebook(): void {
this.fb.login()
.then((response: LoginResponse) => console.log(response))
.catch((error: any) => console.error(error));
}
}
`
typescript
import { FacebookService, UIParams, UIResponse } from 'ngx-fb';...
share(url: string) {
let params: UIParams = {
href: 'https://github.com/zyra/ngx-facebook',
method: 'share'
};
this.fb.ui(params)
.then((res: UIResponse) => console.log(res))
.catch((e: any) => console.error(e));
}
`
$3
html
`
$3
#### Basic video component usage:
html
`#### Advanced video component usage:
html
`
typescript
import { Component, ViewChild } from '@angular/core';
import { FBVideoComponent } from 'ngx-fb';@Component(...)
export class MyComponent {
@ViewChild(FBVideoComponent) video: FBVideoComponent;
ngAfterViewInit() {
this.video.play();
this.video.pause();
this.video.getVolume();
}
onVideoPaused(ev: any) {
console.log('User paused the video');
}
}
``