ng2-encrm-components/components/bs4-table/bs4-table.component.ts

angular 2 components

import {
    Component, OnInit, Input, ContentChildren, OnDestroy,
    ViewChildren, QueryList, AfterViewInit, AfterContentInit,
    ViewEncapsulation, AfterViewChecked
} from '@angular/core';


import { Bs4TableRow } from './bs4-table-row';
import { Bs4TableDetails } from './bs4-table-details';
import { Table, SortType, TableHeader, Page } from './model';
import { ExampleRowInterface } from './example';


@Component({
    selector: 'bs4-table',
    template: require(`./bs4-table.component.html`),
    styles: [require(`./bs4-table.component.scss`)],
    encapsulation: ViewEncapsulation.None
})
export class Bs4Table implements OnInit, OnDestroy, AfterContentInit {

    sortType = SortType;
    @ContentChildren(Bs4TableRow) rowsContent: QueryList<Bs4TableRow>;
    @ContentChildren(Bs4TableDetails) rowsDetails: QueryList<Bs4TableDetails>;

    @Input() id: string;
    @Input() firstText = 'First';
    @Input() lastText = 'Last';
    @Input() nextText = 'Next';
    @Input() prevText = 'Prev';

    changePage(e) {
        this.table.page.number = e.page;
        this.table.changePage();
    }

    table: Table<any> = new Table<ExampleRowInterface>('Imie', 'Nazwsko', 'Data')
        .addRow({ name: 'asdasd', age: 12, date: new Date() })
        .addRow({ name: ' asdasd', age: 13 });

    use(table: Table<any>) {
        this.table = table;
        this.table.changePage();
    }

    static get(bs4TableId: string): Promise<Bs4Table> {
        return new Promise<Bs4Table>((resolve, reject) => {
            setTimeout(() => {
                if (Bs4Table.instances === undefined ||
                    Bs4Table.instances[bs4TableId] === undefined)
                    reject('Bs4Table: no instance with id: ' + bs4TableId);
                resolve(Bs4Table.instances[bs4TableId]);
            });
        });
    }
    static instances = {};

    constructor() {
    }

    ngOnInit() {
        Bs4Table.instances[this.id] = this;

    }

    ngOnDestroy() {
    }

    ngAfterContentInit() {

    }

    sortBy = (head: TableHeader) => {
        head.sortBy();
        this.table.changePage();
    }



}