- [Vicoders Angular Common Module](#vicoders-angular-common-module) - [Install](#install) - [How to use](#how-to-use) - [Pipes](#pipes) - [hasItem](#hasitem) - [isArray](#isarray) - [length](#length) - [orderBy](#orderby)
npm install @vicoders/angular- Vicoders Angular Common Module
- Install
- How to use
- Pipes
- hasItem
- isArray
- length
- orderBy
- sumBy
- timeFormat
- Directives
- custom-selection
- length-aware-paginator
- per-page
- search-form
- sort-by-field
- Use Activity Log Component
Download package form npm
```
yarn add @vicoders/angular
or
``
npm install @vicoders/angular
javascript
import { PipesModule } from "@vicoders/angular";@NgModule({
declarations: [AppComponent],
imports: [PipesModule]
})
export class YourModule {}
`#### hasItem
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
``html
users has item
`#### isArray
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
``html
users variable is array
`#### length
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
``html
{{ users | length }}
`#### orderBy
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
``html
ID: {{ item.id }}
Name: {{ item.name }}
`#### sumBy
`javascript
export class Component {
public products = [
{
id: 1,
name: 'Laptop',
price: 2000
},
{
id: 2,
name: 'Mobile',
price: 1000
}
];
}
``html
{{ products | sumBy: 'price' }}
`#### timeFormat
`javascript
export class Component {
public birth_date = '2018-01-30';
}
``html
{{ birth_date | timeFormat: 'DD/MM/YYYY' }}
`$3
Import module
`javascript
import { DirectivesModule } from "@vicoders/angular";@NgModule({
declarations: [AppComponent],
imports: [DirectivesModule]
})
export class YourModule {}
`#### custom-selection
`javascript
export class Component {
public UserStatus = [
{
label: 'Pending',
value: 1
},
{
label: 'Activated',
value: 2
},
{
label: 'Banned',
value: 3
},
{
label: 'Deleted',
value: 4
}
]; public users = [
{
id: 1,
name: 'Andy',
status: 1
},
{
id: 1,
name: 'John',
status: 2
}
];
changeUserStatus(user) {
console.log('changeUserStatus ', user);
}
}
``html
ID
Name
Status
{{ item.id }}
{{ item.name }}
`#### length-aware-paginator
`javascript
import { ApiService } from '../../../api/api.service';
import { HttpClient, HttpParams } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import User from '../../../models/User';
import LengthAwarePaginator from '../../../models/LengthAwarePaginator';export class Component {
public fetched = false;
public pagination;
constructor(private router: Router, private api: ApiService, private http: HttpClient) {
const url = 'https://vinaco.local/api/admin/users';
this.getUsers(url, { per_page: 2, page: 1 }).subscribe(
response => {
this.fetched = true;
this.pagination = response.pagination;
},
error => {
throw error;
}
);
}
getUsers(url, params: {}) {
const queryParams = new HttpParams({ fromObject: params });
return this.http.get(url, { params: queryParams }).pipe(
map(result =>
_.assign(
{},
{
items: (result as any).data.map(item => new User(item)),
pagination: new LengthAwarePaginator((result as any).meta.pagination)
}
)
),
catchError(error => {
throw error;
})
);
}
}
``html
`#### per-page
`html
`#### search-form
`html
`#### sort-by-field
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
``html
ID
Name
{{ item.id }}
{{ item.name }}
`$3
Import module`javascript
import { VicodersActivityLogModule } from "@vicoders/angular";@NgModule({
declarations: [AppComponent],
imports: [VicodersActivityLogModule]
})
export class YourModule {}
``javascript
export class Component {
public activity_logs = {
fetched: true,
items: [
{
id: 1,
event: 'UserCreated',
description: 'Người dùng đăng nhập với email: admin@vicoders.com',
timestamps: {
created_at: {
date: '2018-12-11 10:15:02.000000',
timezone: 'UTC',
timezone_type: 3
}
}
},
{
id: 2,
event: 'UserLoggedIn',
description: 'Người dùng đăng nhập với email: admin@vicoders.com',
timestamps: {
created_at: {
date: '2018-12-11 10:15:02.000000',
timezone: 'UTC',
timezone_type: 3
}
}
}
]
};
}
``html
[(activity_log_data)]="activity_logs"
>
``