Angular Component For ng4. select,scrollbar,datepicker,Infinite Scroll,Pagination
npm install ng-kux typescript
import { KuxSelectModule } from 'ng-kux';
@NgModule({
imports: [
KuxSelectModule
,...
],
declarations: [...]
})
export class SomeModule { }
`#### In Component Template
` html
`
#### In Component
` typescript
export class SomeComponent{ public selected = -1;
public options:any[]=[
{
name: "选择下面一项",
value: -1
}, {
name: "第一项",
value: 0
}, {
name: "第二项",
value: 1
}, {
name: "第三项",
value: 2
}, {
name: "第四项",
value: 3
}, {
name: "第五项",
value: 4
}
]
}
`
#### Optional Parameters
Param | Type | Default | description
------------|---------|---------|-------------------
width | string | 205px | select wdith
optwdith | string | 205px | option width
maxHeight | string | null | option max height
placeholder | string | null | you know it
disabled | boolean | false | you know it---
ScrollBar
#### In NgModule
` typescript
import { KuxScrollBarModule } from 'ng-kux';
@NgModule({
imports: [
KuxScrollBarModule
,...
],
declarations: [...],
...
})
export class SomeModule { }
`#### In Component Template
` html
...
`
#### Optional Parameters
Param | Type | Default | description
---------|---------|---------|--------------------------
autoHide | boolean | true | auto hide x&y scroll bar#### In Parant Component You Can...
` typescript
import { KuxScrollbarComponent } from 'ng-kux';
@Component({...})
export class ParentComponent implements AfterViewInit {
@ViewChild(KuxScrollbarComponent) private scrollBox: KuxScrollbarComponent
constructor() { }
ngAfterViewInit() { this.scrollBox.scrollTop=100; //set scrollTop
console.log(this.scrollBox.scrollTop); //get scrollTop
this.scrollBox.scrollLeft=100; //set scrollLeft
console.log(this.scrollBox.scrollLeft); //get scrollLeft
this.scrollBox.isScrollToBottom(); //is scroll box scroll to the bottom
this.scrollBox.isScrollToRight(); //is scroll box scroll to the right
this.scrollBox.refresh(); //refresh scroll bar
}
}
`---
Datepicker
#### In NgModule
`typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { KuxDatepickerModule } from 'ng-kux';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
KuxDatepickerModule
,...
],
declarations: [...],
...
})
export class SomeModule { }
`#### In Component Template
`html
`
#### Optional Parameters
Param | Type | Default | description
---------|--------|------------|-----------------------------
disabled| boolean| false|you know it
panleFmt | string | MM/dd/yyyy | format Date on panle
fmt | string | MM/dd/yyyy | format Date on form element
placement|string \| Array|['bottom','left'] | panle placement -bottom \| top \| left \| right
min|Date|null|Minimum allowed date for selection
max|Date|null|Maximum allowed date for selection
step|Number|3|3-pickday 2-pickmonth 1-pickyear
---
Scroll
$3
#### In NgModule
`typescript
import { KuxScrollModule } from 'ng-kux'
...@NgModule({
imports: [
KuxScrollModule,
...
],
...
})
export class SomeModule { }
`
#### In Component
`typescript
import { KuxScrollComponent } from 'ng-kux/scroll/scroll.component';
...@Component({
templateUrl: './some.html',
...
})
export class SomeComponent implements OnInit {
@ViewChild(KuxScrollComponent) kuxScroll: KuxScrollComponent;
private AllData:any[] //some big Array
sync(){
this.kuxScroll.sync().then(() => { //synchronize the arr of kuxScroll from AllData
...
})
}
ngOnInit() {
let num = 0;
this.kuxScroll.getData = (begin, length) => {
let list = [];
for (let i = begin; i < begin + length; i++) {
let item = this.AllData[i];
if (item !== undefined) {
list.push(item)
}
}
return list
}
}
}
`
#### In Component Template
`html
- {{item.name}}
`
---
Pagination
#### In NgModule
`typescript
import { KuxPaginationModule } from 'ng-kux';
@NgModule({
imports: [
CommonModule,
KuxPaginationModule,
....
],
declarations: [...]
})
export class SomeModule { }
`
#### In Component Template
`html
``