feature(EJ2-3474): angular samples for pagesizes feature

Author: pipeline

src/common/samplelist.ts

@@ -15,6 +15,7 @@ import { circulargaugeAppRoutes } from '../circulargauge/circulargauge.module';
 import { lineargaugeAppRoutes } from '../lineargauge/lineargauge.module';
 import { textboxesAppRoutes } from '../textboxes/textboxes.module';
 import { tooltipAppRoutes } from '../tooltip/tooltip.module';
+import { maskedTextBoxAppRoutes } from '../maskedtextbox/maskedtextbox.module';
 import { timePickerAppRoutes } from '../timepicker/timepicker.module';
 export let samplesList: any = [
     {
@@ -70,5 +71,8 @@ export let samplesList: any = [
     },
     {
         'name': 'Tooltip', 'category': 'Layout', 'order': '04', 'path': 'tooltip', 'samples': tooltipAppRoutes
+    },
+    {
+        'name': 'MaskedTextBox', 'category': 'Editors', 'order': '03', 'path': 'maskedtextbox', 'samples': maskedTextBoxAppRoutes, "type": "new"
     }
 ];

src/common/sb.router.ts

@@ -18,6 +18,7 @@ import { TextboxesModule } from '../textboxes/textboxes.module';
 import { TooltipSampleModule } from '../tooltip/tooltip.module';
 import { CircularGaugeSampleModule } from '../circulargauge/circulargauge.module';
 import { LinearGaugeSampleModule } from '../lineargauge/lineargauge.module';
+import { MaskedTextBoxSampleModule } from '../maskedtextbox/maskedtextbox.module';
 
 const appRoutes: any = [
     { path: 'chart', loadChildren: ChartSampleModule },
@@ -38,6 +39,7 @@ const appRoutes: any = [
     { path: 'textboxes', loadChildren: TextboxesModule },
     { path: 'toolbar', loadChildren: ToolbarSampleModule },
     { path: 'tooltip', loadChildren: TooltipSampleModule },
+    { path: 'maskedtextbox', loadChildren: MaskedTextBoxSampleModule },
     { path: '', redirectTo: 'material/chart/line', pathMatch: 'full' }
 ];
 
@@ -61,6 +63,7 @@ const appRoutes: any = [
         DialogSampleModule,
         ToolbarSampleModule,
         TooltipSampleModule,
+        MaskedTextBoxSampleModule,
         RouterModule.forRoot(appRoutes)
     ],
 

src/grid/grid.module.ts

@@ -39,7 +39,7 @@ import { ColumnResizingComponent } from './column/columnresizing.component';
 export const gridRouteConfig: Object[] = [
     { 'path': ':theme/grid/default', component: DefaultComponent, 'name': 'Default Functionalities', order: '01', category: 'Grid' },
     { 'path': ':theme/grid/gridlines', component: GridLinesComponent, 'name': 'Grid Lines', order: '01', category: 'Grid' },
-    { 'path': ':theme/grid/paging', component: PageComponent, name: 'Paging', order: '01', category: 'Grid' },
+    { 'path': ':theme/grid/paging', component: PageComponent, name: 'Paging', order: '01', category: 'Grid', type: 'update' },
     { 'path': ':theme/grid/filtering', component: FilterComponent, name: 'Filtering', order: '01', category: 'Grid' },
     { 'path': ':theme/grid/grouping', component: GroupComponent, name: 'Grouping', order: '01', category: 'Grid' },
     { 'path': ':theme/grid/sorting', component: SortComponent, name: 'Sorting', order: '01', category: 'Grid' },

src/grid/paging-plnkr.json

@@ -11,6 +11,6 @@ export class PageComponent implements OnInit {
 
     ngOnInit(): void {
         this.data = data;
-        this.initialPage = { pageSize: 9, pageCount: 8 };
+        this.initialPage = { pageSizes: true, pageCount: 4 };
     }
 }

src/grid/paging.component.ts

@@ -9,24 +9,28 @@
         </e-columns>
     </ej-grid>
     <div id="description">
-        <p>Paging allows you to display the contents of the Grid component in page segments. The number of items on a page is
-            determined by the <code><a target="_blank" class="code"
+        <p>Paging allows you to display the contents of the Grid in page segments. By default, paging is disabled. To enable
+            paging, set <code><a target="_blank" class="code"
+            href="http://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#allowpaging-boolean">
+            allowPaging
+            </a></code> property to true.
+            <code><a target="_blank" class="code"
         href="http://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#pagesettings-pagesettingsmodel">
-        pageSettings->pageSize
-        </a></code> property. If no value is specified for the <code><a target="_blank" class="code"
-        href="http://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#pagesettings-pagesettingsmodel">
-        pageSettings->pageSize
-        </a></code> property, the Grid will display 12 items on a page. By default, paging is disabled. To enable paging, set <code><a target="_blank" class="code"
-        href="http://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#allowpaging-boolean">
-        allowPaging
-        </a></code> property to true.</p>
+        pageSettings->pageSizes
+        </a></code> property enables a dropdown in pager which allows you to change the number of records in
+            Grid dynamically.
+        </p>
         <p>
-        In this demo, the Grid is rendered with its default page settings, also the 
-        <code><a target="_blank" class="code"
+            In this demo, the Grid is rendered with
+            <code><a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#pagesettings-pagesettingsmodel">
+        pageSettings->pageSizes
+        </a></code>set to true, and
+            <code><a target="_blank" class="code"
         href="http://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#pagesettings-pagesettingsmodel">
         pageSettings->pageCount
-        </a></code> is set to 5.
-    </p>
+        </a></code>set to 4.
+        </p>
         <br>
         <p style="font-weight: 500">Injecting Module</p>
         <p>