ngx-zalo
Version:
Use Zalo SDK with Angular5~ (https://developers.zalo.me/docs/sdk/javascript-sdk/tai-lieu)
107 lines (89 loc) • 1.94 kB
Markdown
# Ngx Zalo
This module is used for [Angular 5](https://angular.io/).
This module help you to use [Zalo SDK](https://developers.zalo.me/docs/sdk/javascript-sdk/tai-lieu) as service.
[Demo Ngx Zalo](https://github.com/teamcancode/demo-ngx-zalo).
How to use:
-------------
### Installation:
```html
npm install ngx-zalo
```
### Import service:
Edit in `src/app/app.module.ts`:
```typescript
//...
import { NgxZaloModule, NgxZaloService } from 'ngx-zalo';
const zaloConfigs = {
version: '2.0',
appId: '<appId>',
redirectUrl: '<redirectUrl>',
};
@NgModule({
//...
imports: [
//...
NgxZaloModule,
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(ngxZaloService: NgxZaloService) {
ngxZaloService.init(zaloConfigs);
}
}
```
And call in component:
```typescript
constructor(private _ngxZaloService: NgxZaloService) {
}
```
### Login
```html
<!-- Using directive -->
<p ngxLoginZalo>Login Zalo</p>
```
```typescript
//Using controller
login() {
this._ngxZaloService.login();
}
```
### Logout
```html
<!-- Using directive -->
<p ngxLogoutZalo (successEvent)="logoutSuccessfullyAction()">Logout Zalo</p>
```
```typescript
//Using controller
logout() {
this._ngxZaloService.logout().subscribe();
}
```
### Update login info - Call this function in redirect page to store zalo info
```typescript
constructor(private _router: Router, private _ngxZaloService: NgxZaloService) {
this._ngxZaloService.updateLoginInfo().subscribe(() => {
this._router.navigate(['/']);
});
}
```
### Check login status
```typescript
checkLoginStatus() {
console.log('Login status:', this._ngxZaloService.isLogin);
}
```
### Get my profile
```typescript
getMyProfile() {
this._ngxZaloService.getMyProfile().subscribe(result => {
console.log('My profile:', result);
});
}
```
### Get access token
```typescript
getAccessToken() {
console.log(this._ngxZaloService.accessToken);
}
```