Ng-Matero Extensions

The grid supports both row and cell selection.

Row Selection:

• multiSelectable: Enable multiple row selection (default: true).
• rowSelectable: Whether rows are selectable (default: false).
• rowSelected: Array of currently selected items.
• rowSelectionFormatter: Use MtxGridRowSelectionFormatter to disable specific rows or hide checkboxes.
• rowSelectedChange: Event emitted when selection changes.

Cell Selection:

• cellSelectable: Whether cells are selectable (default: true).
• cellSelectedChange: Event emitted when a cell is selected.

The MtxGrid directive provides built-in support for client-side pagination and sorting.

Pagination Options:

• pageOnFront: Whether to paginate on the front end (default: true).
• showPaginator: Whether to show the paginator UI (default: true).
• pageSize: Number of items per page (default: 10).
• pageSizeOptions: Available page size options (default: [10, 50, 100]).
• page: Output event emitted when page size or index changes.

Sorting Options:

• sortOnFront: Whether to sort on the front end (default: true).
• sortActive: The ID of the currently sorted column.
• sortDirection: The current sort direction ('asc' or 'desc').
• sortChange: Output event emitted when sort state changes.

To use the progress components in your Angular application, you must import the MtxProgressModule from the @ng-matero/extensions/progress package.

import { MtxProgressModule } from '@ng-matero/extensions/progress';

To use the Datetimepicker components and directives, import MtxDatetimepickerModule from @ng-matero/extensions/datetimepicker into your Angular module or component.

import { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';

To use the loader component in your Angular application, you must import the MtxLoaderModule from the @ng-matero/extensions/loader package.

import { MtxLoaderModule } from '@ng-matero/extensions/loader';

To use the Material Extensions Tooltip component in your Angular application, you must import the MtxTooltipModule from the @ng-matero/extensions/tooltip package.

import { MtxTooltipModule } from '@ng-matero/extensions/tooltip';

To use the Popover component and its directives, import MtxPopoverModule from @ng-matero/extensions/popover into your Angular module or component.

import { MtxPopoverModule } from '@ng-matero/extensions/popover';

Ng-Matero Extensions is an extended component library for Angular Material. Before installing the extensions, ensure you have already installed and set up Angular Material in your project.

$ npm install @ng-matero/extensions --save

To use specific components, import their corresponding modules into your Angular @NgModule. For example, to use the data grid and select components, import MtxGridModule and MtxSelectModule from their respective sub-paths.

import { MtxGridModule } from '@ng-matero/extensions/grid';
import { MtxSelectModule } from '@ng-matero/extensions/select';

@NgModule({
  ...
  imports: [MtxGridModule, MtxSelectModule, ...],
  ...
})
export class YourAppModule {
}

To use the Material Extensions Drawer, import MtxDrawerModule from @ng-matero/extensions/drawer into your Angular module or component.

import { MtxDrawerModule } from '@ng-matero/extensions/drawer';

To use the Photoviewer component in your Angular application, you must import the MtxPhotoviewerModule from the @ng-matero/extensions/photoviewer package.

import { MtxPhotoviewerModule } from '@ng-matero/extensions/photoviewer';