diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d7ea4dbcc..9da938891 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,121 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { BasicAutoComponent } from './basic/basic-auto.component'; +import { BasicFixedComponent } from './basic/basic-fixed.component'; +import { FullScreenComponent } from './basic/fullscreen.component'; +import { InlineEditComponent } from './basic/inline.component'; +import { VirtualScrollComponent } from './basic/virtual.component'; +import { ResponsiveComponent } from './basic/responsive.component'; +import { DynamicHeightComponent } from './basic/dynamic-height.component'; +import { PagingScrollingNoVirtualizationComponent } from './paging/paging-scrolling-novirtualization.component'; +import { ColumnFlexComponent } from './columns/column-flex.component'; +import { ColumnToggleComponent } from './columns/column-toggle.component'; +import { ColumnStandardComponent } from './columns/column-standard.component'; +import { ColumnForceComponent } from './columns/column-force.component'; +import { ColumnReorderComponent } from './columns/column-reorder.component'; +import { HorzVertScrollingComponent } from './basic/scrolling.component'; +import { MultipleTablesComponent } from './basic/multiple.component'; +import { RowDetailsComponent } from './basic/row-detail.component'; +import { LiveDataComponent } from './basic/live.component'; +import { RowCssComponent } from './basic/css.component'; +import { DragDropComponent } from './drag-drop/drag-drop.component'; +import { DisabledRowsComponent } from './basic/disabled-rows.component'; +import { FullScreenTreeComponent } from './tree/fullscreen.component'; +import { RowGroupingComponent } from './basic/row-grouping.component'; +import { ClientPagingComponent } from './paging/paging-client.component'; +import { ServerPagingComponent } from './paging/paging-server.component'; +import { ServerScrollingComponent } from './paging/scrolling-server.component'; +import { VirtualPagingComponent } from './paging/paging-virtual.component'; +import { ClientSortingComponent } from './sorting/sorting-client.component'; +import { DefaultSortingComponent } from './sorting/sorting-default.component'; +import { ServerSortingComponent } from './sorting/sorting-server.component'; +import { CellSelectionComponent } from './selection/selection-cell.component'; +import { SingleSelectionComponent } from './selection/selection-single.component'; +import { MultiSelectionComponent } from './selection/selection-multi.component'; +import { MultiClickSelectionComponent } from './selection/selection-multi-click.component'; +import { InlineTemplatesComponent } from './templates/template-dom.component'; +import { ColumnPinningComponent } from './columns/pinning.component'; +import { SummaryRowSimpleComponent } from './summary/summary-row-simple.component'; +import { SummaryRowCustomTemplateComponent } from './summary/summary-row-custom-template.component'; +import { SummaryRowServerPagingComponent } from './summary/summary-row-server-paging.component'; +import { SummaryRowInlineHtmlComponent } from './summary/summary-row-inline-html.component'; +import { ScrollingDynamicallyComponent } from './basic/scrolling-dynamically.component'; +import { FilterComponent } from './basic/filter.component'; +import { TabsDemoComponent } from './basic/tabs.component'; +import { RxDemoComponent } from './basic/rx.component'; +import { ContextMenuDemoComponent } from './basic/contextmenu.component'; +import { FooterDemoComponent } from './basic/footer.component'; +import { BasicEmptyComponent } from './basic/empty.component'; +import { DarkThemeComponent } from './basic/dark-theme.component'; +import { BootstrapThemeComponent } from './basic/bootstrap.component'; +import { ClientTreeComponent } from './tree/client-tree.component'; +import { SortingComparatorComponent } from './sorting/sorting-comparator.component'; +import { MultiDisableSelectionComponent } from './selection/selection-disabled.component'; +import { CheckboxSelectionComponent } from './selection/selection-chkbox.component'; +import { CustomCheckboxSelectionComponent } from './selection/selection-chkbox-template.component'; +import { MultiClickCheckboxSelectionComponent } from './selection/selection-multi-click-chkbox.component'; +import { TemplateRefTemplatesComponent } from './templates/template-obj.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: BasicAutoComponent }, + { path: 'basic-fixed', component: BasicFixedComponent }, + { path: 'full-screen', component: FullScreenComponent }, + { path: 'inline-edit', component: InlineEditComponent }, + { path: 'virtual-scroll', component: VirtualScrollComponent }, + { path: 'horz-vert-scrolling', component: HorzVertScrollingComponent }, + { path: 'scrolling-dynamically', component: ScrollingDynamicallyComponent }, + { path: 'multiple-tables', component: MultipleTablesComponent }, + { path: 'row-details', component: RowDetailsComponent }, + { path: 'responsive', component: ResponsiveComponent }, + { path: 'filter', component: FilterComponent }, + { path: 'hidden', component: TabsDemoComponent }, + { path: 'live', component: LiveDataComponent }, + { path: 'rx', component: RxDemoComponent }, + { path: 'contextmenu', component: ContextMenuDemoComponent }, + { path: 'css', component: RowCssComponent }, + { path: 'dynamic', component: DynamicHeightComponent }, + { path: 'footer', component: FooterDemoComponent }, + { path: 'empty', component: BasicEmptyComponent }, + { path: 'drag-drop', component: DragDropComponent }, + { path: 'disabled', component: DisabledRowsComponent }, + { path: 'dark', component: DarkThemeComponent, data: { dark: true } }, + { path: 'bootstrap', component: BootstrapThemeComponent }, + { path: 'fullscreen-tree', component: FullScreenTreeComponent }, + { path: 'client-tree', component: ClientTreeComponent }, + { path: 'row-grouping', component: RowGroupingComponent }, + { path: 'client-paging', component: ClientPagingComponent }, + { path: 'server-paging', component: ServerPagingComponent }, + { + path: 'paging-scrolling-novirtualization', + component: PagingScrollingNoVirtualizationComponent + }, + { path: 'server-scrolling', component: ServerScrollingComponent }, + { path: 'virtual-paging', component: VirtualPagingComponent }, + { path: 'client-sorting', component: ClientSortingComponent }, + { path: 'default-sorting', component: DefaultSortingComponent }, + { path: 'server-sorting', component: ServerSortingComponent }, + { path: 'comparator-sorting', component: SortingComparatorComponent }, + { path: 'cell-selection', component: CellSelectionComponent }, + { path: 'single-selection', component: SingleSelectionComponent }, + { path: 'multi-selection', component: MultiSelectionComponent }, + { path: 'multi-click-selection', component: MultiClickSelectionComponent }, + { path: 'multidisable-selection', component: MultiDisableSelectionComponent }, + { path: 'chkbox-selection', component: CheckboxSelectionComponent }, + { path: 'chkbox-selection-template', component: CustomCheckboxSelectionComponent }, + { path: 'multi-click-chkbox-selection', component: MultiClickCheckboxSelectionComponent }, + { path: 'templateref', component: TemplateRefTemplatesComponent }, + { path: 'inline', component: InlineTemplatesComponent }, + { path: 'flex', component: ColumnFlexComponent }, + { path: 'toggle', component: ColumnToggleComponent }, + { path: 'fixed', component: ColumnStandardComponent }, + { path: 'force', component: ColumnForceComponent }, + { path: 'pinning', component: ColumnPinningComponent }, + { path: 'reorder', component: ColumnReorderComponent }, + { path: 'simple-summary', component: SummaryRowSimpleComponent }, + { path: 'custom-template-summary', component: SummaryRowCustomTemplateComponent }, + { path: 'paging-summary', component: SummaryRowServerPagingComponent }, + { path: 'inline-html-summary', component: SummaryRowInlineHtmlComponent } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index ff6619ec7..aec7d416b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ -
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2d5466c07..79344f580 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, signal, ViewEncapsulation } from '@angular/core'; import { HashLocationStrategy, Location, LocationStrategy } from '@angular/common'; import packageInfo from 'projects/ngx-datatable/package.json'; +import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', @@ -22,11 +23,11 @@ import packageInfo from 'projects/ngx-datatable/package.json'; ] }) export class AppComponent { - state: any; - version = packageInfo.version; - constructor(location: Location) { - this.state = location.path(true); + dark = signal(false); + + routeActivate(outlet: RouterOutlet): void { + this.dark.set(outlet.activatedRoute.snapshot.data.dark); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 61da83b04..c3986bf53 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,7 +14,7 @@ import { MultipleTablesComponent } from './basic/multiple.component'; import { FullScreenComponent } from './basic/fullscreen.component'; import { RowDetailsComponent } from './basic/row-detail.component'; import { ResponsiveComponent } from './basic/responsive.component'; -import { FilterBarComponent } from './basic/filter.component'; +import { FilterComponent } from './basic/filter.component'; import { TabsDemoComponent } from './basic/tabs.component'; import { LiveDataComponent } from './basic/live.component'; import { RxDemoComponent } from './basic/rx.component'; @@ -76,7 +76,7 @@ import { SummaryRowServerPagingComponent } from './summary/summary-row-server-pa import { SummaryRowInlineHtmlComponent } from './summary/summary-row-inline-html.component'; import { AppRoutingModule } from './app-routing.module'; import { CommonModule } from '@angular/common'; -import { ScollingDynamicallyComponent } from './basic/scrolling-dynamically.component'; +import { ScrollingDynamicallyComponent } from './basic/scrolling-dynamically.component'; import { DragDropComponent } from './drag-drop/drag-drop.component'; import { DragDropModule } from '@angular/cdk/drag-drop'; @@ -91,7 +91,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; InlineEditComponent, VirtualScrollComponent, HorzVertScrollingComponent, - ScollingDynamicallyComponent, + ScrollingDynamicallyComponent, MultipleTablesComponent, RowDetailsComponent, ResponsiveComponent, @@ -114,7 +114,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; ColumnForceComponent, ColumnPinningComponent, ColumnReorderComponent, - FilterBarComponent, + FilterComponent, VirtualPagingComponent, DarkThemeComponent, TabsDemoComponent, diff --git a/src/app/basic/filter.component.ts b/src/app/basic/filter.component.ts index 1fd76aa70..f4ed95715 100644 --- a/src/app/basic/filter.component.ts +++ b/src/app/basic/filter.component.ts @@ -39,7 +39,7 @@ import { Employee } from '../data.model';
` }) -export class FilterBarComponent { +export class FilterComponent { rows: Employee[] = []; temp: Employee[] = []; diff --git a/src/app/basic/scrolling-dynamically.component.ts b/src/app/basic/scrolling-dynamically.component.ts index 215947f16..def44776c 100644 --- a/src/app/basic/scrolling-dynamically.component.ts +++ b/src/app/basic/scrolling-dynamically.component.ts @@ -87,7 +87,7 @@ import { Employee } from '../data.model'; ` }) -export class ScollingDynamicallyComponent { +export class ScrollingDynamicallyComponent { editing: Record = {}; rows: Employee[] = []; diff --git a/src/assets/app.css b/src/assets/app.css index 4f9f7ddb7..cc1a0d2de 100644 --- a/src/assets/app.css +++ b/src/assets/app.css @@ -186,7 +186,7 @@ nav h4 a { color: #000; } -content { +main { margin-left: 200px; height: 100vh; display: block; @@ -194,7 +194,7 @@ content { padding-bottom: 0px; } -content h3 { +main h3 { padding-left: 35px; }