-
Notifications
You must be signed in to change notification settings - Fork 0
/
6-es2015.29d09b4acf96e95ddb54.js
1 lines (1 loc) · 4.14 KB
/
6-es2015.29d09b4acf96e95ddb54.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{G7lC:function(e,n,t){"use strict";t.r(n),t.d(n,"GuideModule",function(){return b});var o=t("An66"),c=t("1VvW"),a=t("5Q2+"),r=t("kZht"),i=t("1ZKX");let l=(()=>{class e{constructor(){this.rowData=[{make:"Toyota",model:"Celica",price:35e3},{make:"Ford",model:"Mondeo",price:32e3},{make:"Porsche",model:"Boxter",price:72e3}]}ngAfterViewInit(){document.querySelectorAll("pre code").forEach(e=>{hljs.highlightBlock(e)})}}return e.\u0275fac=function(n){return new(n||e)},e.\u0275cmp=r.Ib({type:e,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&&(r.Vb(0,"div",0),r.Gc(1,"\n "),r.Vb(2,"h1"),r.Gc(3,"Guide overview"),r.Ub(),r.Gc(4,"\n\n "),r.Vb(5,"p"),r.Gc(6,"\n The "),r.Vb(7,"strong"),r.Gc(8,"ngx-table-builder"),r.Ub(),r.Gc(9," provides a styled data-table that can be used to display rows of data.\n The "),r.Vb(10,"strong"),r.Gc(11,"ngx-table-builder"),r.Ub(),r.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 "),r.Ub(),r.Gc(13,"\n\n "),r.Vb(14,"pre"),r.Vb(15,"code",1),r.Gc(16,"\n $ npm install --save @angular-ru/ng-table-builder\n\n"),r.Ub(),r.Ub(),r.Gc(17,"\n\n "),r.Vb(18,"p"),r.Vb(19,"strong"),r.Gc(20,"Benefits:"),r.Ub(),r.Qb(21,"br"),r.Ub(),r.Gc(22,"\n "),r.Vb(23,"ul"),r.Gc(24,"\n "),r.Vb(25,"li"),r.Gc(26,"Outstanding Performance;"),r.Ub(),r.Gc(27,"\n "),r.Vb(28,"li"),r.Gc(29,"Simple use and setup;"),r.Ub(),r.Gc(30,"\n "),r.Vb(31,"li"),r.Gc(32,"Customisable Appearance;"),r.Ub(),r.Gc(33,"\n "),r.Vb(34,"li"),r.Gc(35,"State Persistence;"),r.Ub(),r.Gc(36,"\n "),r.Vb(37,"li"),r.Gc(38,"Filtering;"),r.Ub(),r.Gc(39,"\n "),r.Vb(40,"li"),r.Gc(41,"Sorting;"),r.Ub(),r.Gc(42,"\n "),r.Vb(43,"li"),r.Gc(44,"Selection;"),r.Ub(),r.Gc(45,"\n "),r.Ub(),r.Gc(46,"\n\n "),r.Vb(47,"p"),r.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 "),r.Ub(),r.Gc(49,"\n\n "),r.Vb(50,"pre"),r.Vb(51,"code",2),r.Pb(),r.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 "),r.Wb(),r.Ub(),r.Ub(),r.Gc(53,"\n\n "),r.Vb(54,"p"),r.Gc(55,"Next, let's declare the basic grid configuration. Edit src/app.component.ts:"),r.Ub(),r.Gc(56,"\n\n "),r.Vb(57,"pre"),r.Vb(58,"code",3),r.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 "),r.Ub(),r.Ub(),r.Gc(60,"\n\n "),r.Qb(61,"ngx-table-builder",4),r.Gc(62,"\n\n "),r.Vb(63,"p"),r.Gc(64,"\n For more information on the interface and a detailed look at how the table is implemented, see the\n "),r.Vb(65,"a",5),r.Gc(66,"guide"),r.Ub(),r.Gc(67,".\n "),r.Ub(),r.Gc(68,"\n\n "),r.Vb(69,"div",6),r.Gc(70,"\n "),r.Vb(71,"h2"),r.Gc(72,"Rendering pipeline"),r.Ub(),r.Gc(73,"\n "),r.Qb(74,"img",7),r.Gc(75,"\n "),r.Ub(),r.Gc(76,"\n"),r.Ub(),r.Gc(77,"\n")),2&e&&(r.Cb(61),r.oc("source",n.rowData))},directives:[i.a,c.a],encapsulation:2,changeDetection:0}),e})(),b=(()=>{class e{}return e.\u0275fac=function(n){return new(n||e)},e.\u0275mod=r.Mb({type:e}),e.\u0275inj=r.Lb({imports:[[o.b,a.a,c.b.forChild([{path:"",component:l}])]]}),e})()}}]);