6-es5.29d09b4acf96e95ddb54.js

!function(){function e(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function n(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{G7lC:function(t,o,a){"use strict";a.r(o),a.d(o,"GuideModule",function(){return p});var c,i,r=a("An66"),l=a("1VvW"),b=a("5Q2+"),s=a("kZht"),d=a("1ZKX"),u=((i=function(){function t(){e(this,t),this.rowData=[{make:"Toyota",model:"Celica",price:35e3},{make:"Ford",model:"Mondeo",price:32e3},{make:"Porsche",model:"Boxter",price:72e3}]}var o,a,c;return o=t,(a=[{key:"ngAfterViewInit",value:function(){document.querySelectorAll("pre code").forEach(function(e){hljs.highlightBlock(e)})}}])&&n(o.prototype,a),c&&n(o,c),t}()).\u0275fac=function(e){return new(e||i)},i.\u0275cmp=s.Ib({type:i,selectors:[["guide"]],decls:78,vars:1,consts:[[1,"main__wrap"],[1,"plaintext"],[1,"javascript"],[1,"typescript"],[3,"source"],["routerLink","samples/guide"],[1,"guide"],["src","assets/img/pipeline.png","alt",""]],template:function(e,n){1&e&&(s.Vb(0,"div",0),s.Gc(1,"\n    "),s.Vb(2,"h1"),s.Gc(3,"Guide overview"),s.Ub(),s.Gc(4,"\n\n    "),s.Vb(5,"p"),s.Gc(6,"\n        The "),s.Vb(7,"strong"),s.Gc(8,"ngx-table-builder"),s.Ub(),s.Gc(9," provides a styled data-table that can be used to display rows of data.\n        The "),s.Vb(10,"strong"),s.Gc(11,"ngx-table-builder"),s.Ub(),s.Gc(12," is an customizable data-table with a fully-templated API, dynamic\n        columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own\n        tailored data-table experience.\n    "),s.Ub(),s.Gc(13,"\n\n    "),s.Vb(14,"pre"),s.Vb(15,"code",1),s.Gc(16,"\n  $ npm install --save @angular-ru/ng-table-builder\n\n"),s.Ub(),s.Ub(),s.Gc(17,"\n\n    "),s.Vb(18,"p"),s.Vb(19,"strong"),s.Gc(20,"Benefits:"),s.Ub(),s.Qb(21,"br"),s.Ub(),s.Gc(22,"\n    "),s.Vb(23,"ul"),s.Gc(24,"\n        "),s.Vb(25,"li"),s.Gc(26,"Outstanding Performance;"),s.Ub(),s.Gc(27,"\n        "),s.Vb(28,"li"),s.Gc(29,"Simple use and setup;"),s.Ub(),s.Gc(30,"\n        "),s.Vb(31,"li"),s.Gc(32,"Customisable Appearance;"),s.Ub(),s.Gc(33,"\n        "),s.Vb(34,"li"),s.Gc(35,"State Persistence;"),s.Ub(),s.Gc(36,"\n        "),s.Vb(37,"li"),s.Gc(38,"Filtering;"),s.Ub(),s.Gc(39,"\n        "),s.Vb(40,"li"),s.Gc(41,"Sorting;"),s.Ub(),s.Gc(42,"\n        "),s.Vb(43,"li"),s.Gc(44,"Selection;"),s.Ub(),s.Gc(45,"\n    "),s.Ub(),s.Gc(46,"\n\n    "),s.Vb(47,"p"),s.Gc(48,"\n        After a few seconds of waiting, you should be good to go. Let's get to the actual coding! As a first step, let's\n        add the Angular table builder module to our app module (src/app.module.ts):\n    "),s.Ub(),s.Gc(49,"\n\n    "),s.Vb(50,"pre"),s.Vb(51,"code",2),s.Pb(),s.Gc(52,"\n    import { TableBuilderModule } from '@angular-ru/ng-table-builder';\n\n    @NgModule({\n       imports: [\n          TableBuilderModule.forRoot()\n       ],\n       ...\n    })\n    export class AppModule { }\n    "),s.Wb(),s.Ub(),s.Ub(),s.Gc(53,"\n\n    "),s.Vb(54,"p"),s.Gc(55,"Next, let's declare the basic grid configuration. Edit src/app.component.ts:"),s.Ub(),s.Gc(56,"\n\n    "),s.Vb(57,"pre"),s.Vb(58,"code",3),s.Gc(59,"\n    import { Component } from '@angular/core';\n    import { MyData } from './my-data.interface';\n\n    @Component({\n      selector: 'app-root',\n      template: `<ngx-table-builder [source]=\"data\"></ngx-table-builder>`\n    })\n    export class AppComponent {\n      public data: MyData[] = [\n          { make: 'Toyota', model: 'Celica', price: 35000 },\n          { make: 'Ford', model: 'Mondeo', price: 32000 },\n          { make: 'Porsche', model: 'Boxter', price: 72000 }\n      ];\n    }\n    "),s.Ub(),s.Ub(),s.Gc(60,"\n\n    "),s.Qb(61,"ngx-table-builder",4),s.Gc(62,"\n\n    "),s.Vb(63,"p"),s.Gc(64,"\n        For more information on the interface and a detailed look at how the table is implemented, see the\n        "),s.Vb(65,"a",5),s.Gc(66,"guide"),s.Ub(),s.Gc(67,".\n    "),s.Ub(),s.Gc(68,"\n\n    "),s.Vb(69,"div",6),s.Gc(70,"\n        "),s.Vb(71,"h2"),s.Gc(72,"Rendering pipeline"),s.Ub(),s.Gc(73,"\n        "),s.Qb(74,"img",7),s.Gc(75,"\n    "),s.Ub(),s.Gc(76,"\n"),s.Ub(),s.Gc(77,"\n")),2&e&&(s.Cb(61),s.oc("source",n.rowData))},directives:[d.a,l.a],encapsulation:2,changeDetection:0}),i),p=((c=function n(){e(this,n)}).\u0275fac=function(e){return new(e||c)},c.\u0275mod=s.Mb({type:c}),c.\u0275inj=s.Lb({imports:[[r.b,b.a,l.b.forChild([{path:"",component:u}])]]}),c)}}])}();