ng-matero / ng-matero

Angular Material admin dashboard template.

NG-MATERO

Ng-Matero is an Angular admin template made with Material components.

✨ Features

• Material Extensions
• Schematics support
• Modern design style
• Multiple admin layout
• Powerful color system
• Rich CSS helpers
• Dark mode support
• RTL support
• Internationalization
• Authentication
• HTTP interceptors
• Permissions management

📖 Documentation

English ｜简体中文

📦 Compatibility

Which version to use?

Angular	Material	Ng-Matero	Extensions
v17	v17	17.x.x	17.x.x
v16	v16	16.3.0	16.3.2
v15	v15	15.3.0	15.6.1
v14	v14	14.3.0	14.8.2
v13	v13	13.1.1	13.3.3
v12	v12	12.8.0	12.10.3
v11	v11	11.3.2	11.5.2
v10	v10	10.4.1	10.16.6
v9	v9	9.7.2	9.11.14
v8	v8	0.16.0	0.9.3

🔧 Installation

The project has support ng add yet.

$ ng new <project-name>
$ cd <project-name>
$ ng add ng-matero

You can also git clone the starter repo to start. But it's not recommended.

$ git clone --depth=1 [email protected]:ng-matero/starter.git <project-name>
$ cd <project-name>
$ npm install

⚙️ Schematics

You can use the ng-matero schematics to generate a module or a page.

Module schematic

Generate a lazy loaded module.

$ ng g ng-matero:module <module-name>

The new module will be created in routes folder, it will be added in routes.module and its route declaration will be added in routes-routing.module automaticly.

Page schematic

Generate a page component in the module.

$ ng g ng-matero:page <page-name> -m=<module-name>

Generate a entry component in the page component.

$ ng g ng-matero:page <page-name>/<entry-component-name> -m=<module-name> -e=true

Example

Just two steps after initializing the project, you can get a route page.

$ ng g ng-matero:module abc
$ ng g ng-matero:page def -m=abc

Take a look at http://localhost:4200/#/abc/def, enjoy it!

💻 Development

$ git clone [email protected]:ng-matero/ng-matero.git
$ cd ng-matero
$ npm install
$ npm run hmr

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

🗺 Roadmap

Check projects to know the develop plans.

🤝 Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

📃 License

MIT

ng-matero's Issues

helers.scss的一些想法

我在研究https://github.com/ng-matero/ng-matero/blob/master/src/styles/helpers.scss#L20这段代码时候，
我觉得应该把

 $properties: map-get($utility, property);
    $property-class-prefix: map-get($utility, class);
    $property-class-prefix-hyphen: if(
      $property-class-prefix== '',
      $property-class-prefix,
      $property-class-prefix + '-'
    );
    @if type-of($properties) == 'string' {
      $properties: append((), $properties);
   } 

放在第一个@each里，而不是在第二个@each。
这样子是不是编译性能会更好些？

我本地简单测试过，没有发现明显的bug

Multilevel Menu

I am trying to create multilevel menu but sub menus are not working after third level.Attached menu.json for reference purpose

{
  "menu": [
    {
      "route": "dashboard",
      "name": "dashboard",
      "type": "link",
      "icon": "dashboard"
    },
    {
      "route": "master",
      "name": "master",
      "type": "sub",
      "icon": "question_answer",
      "children": [
        {
          "route": "masterMenu",
          "name": "menuMaster",
          "type": "link"
        },
        {
          "route": "masterUser",
          "name": "menuUser",
          "type": "link"
        }
      ]
    },
    {
      "route": "category",
      "name": "category",
      "type": "sub",
      "icon": "question_answer",
      "children": [
        {
          "route": "standard",
          "name": "standard",
          "type": "sub",
          "icon": "question_answer",
          "children": [
            {
              "route": "flanges",
              "name": "flanges",
              "type": "sub",
              "icon": "question_answer",
              "childern":[
                {
                  "route": "slipOnFlange",
                  "name": "slipOnFlange",
                  "icon": "question_answer",
                  "type": "link"
                }
              ]
            },
            {
              "route": "masterUser",
              "name": "fitting",
              "icon": "question_answer",
              "type": "link"
            }
          ]
        },
        {
          "route": "masterUser",
          "name": "Customized",
          "icon": "question_answer",
          "type": "link"
        },
        {
          "route": "masterUser",
          "name": "Development",
          "icon": "question_answer",
          "type": "link"
        },
        {
          "route": "masterUser",
          "name": "Calculation",
          "icon": "question_answer",
          "type": "link"
        },
        {
          "route": "masterUser",
          "name": "Converter",
          "icon": "question_answer",
          "type": "link"
        }
      ]
    }
  ]
}

Upgrade ngx-progressbar to version 6

Upgrade ngx-progressbar to version 6

Memory issue

使用chrome打开页面每个菜单点击多次后，等待一段时间。再次点击菜单，菜单的响应速度明显变慢，通过f11开发者工具查看 发现memory持续增加。

执行ng add ng-matero报错

执行ng add ng-matero报错

Error: Error on worker #5: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions,
        // tslint:disable-next-line:max-line-length
        breakpoints = []) {
            return {
                ngModule: FlexLayoutModule,
                providers: configOptions.serverLoaded ?
                    [
                        { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                        { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                        { provide: SERVER_TOKEN, useValue: true },
                    ] : [
                    { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                    { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                ]
            };
        }.
    at ModuleWithProvidersAnalyzer.resolveNgModuleReference (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\analysis\module_with_providers_analyzer.js:178:23)
    at ModuleWithProvidersAnalyzer.getDtsModuleWithProvidersFunction (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\analysis\module_with_providers_analyzer.js:165:33)
    at E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\analysis\module_with_providers_analyzer.js:46:43
    at Array.forEach (<anonymous>)
    at E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\analysis\module_with_providers_analyzer.js:39:28
    at Array.forEach (<anonymous>)
    at ModuleWithProvidersAnalyzer.analyzeProgram (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\analysis\module_with_providers_analyzer.js:37:23)
    at Transformer.analyzeProgram (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\packages\transformer.js:132:45)
    at Transformer.transform (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\packages\transformer.js:75:27)
    at E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\execution\create_compile_function.js:48:42
    at ClusterMaster.onWorkerMessage (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:194:27)
    at E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:54:95
    at ClusterMaster.<anonymous> (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:292:57)
    at step (E:\angular\cmmp-manager\node_modules\tslib\tslib.js:141:27)
    at Object.next (E:\angular\cmmp-manager\node_modules\tslib\tslib.js:122:57)
    at E:\angular\cmmp-manager\node_modules\tslib\tslib.js:115:75
    at new Promise (<anonymous>)
    at Object.__awaiter (E:\angular\cmmp-manager\node_modules\tslib\tslib.js:111:16)
    at EventEmitter.<anonymous> (E:\angular\cmmp-manager\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:286:32)
    at EventEmitter.emit (events.js:310:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-08-18T04_01_11_283Z-debug.log
× Package install failed, see above.
The Schematic workflow failed. See above.

Angular 9

I tried to create a route page in Angular 9:

$ ng g ng-matero:module abc
$ ng g ng-matero:page def -m=abc

I have following exception when executes the first command:

[error] Error: Could not find module "ng-matero" from "C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9".
at Object.resolve (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular-devkit\core\node\resolve.js:154:11)
at NodeModulesEngineHost._resolvePackageJson (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular-devkit\schematics\tools\node-module-engine-host.js:28:21)
at NodeModulesEngineHost._resolveCollectionPath (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular-devkit\schematics\tools\node-module-engine-host.js:69:40)
at NodeModulesEngineHost.createCollectionDescription (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular-devkit\schematics\tools\file-system-engine-host-base.js:115:27)
at SchematicEngine._createCollectionDescription (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular-devkit\schematics\src\engine\engine.js:147:40)
at SchematicEngine.createCollection (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular-devkit\schematics\src\engine\engine.js:140:43)
at GenerateCommand.getCollection (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular\cli\models\schematic-command.js:128:35)
at GenerateCommand.initialize (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular\cli\models\schematic-command.js:44:37)
at async GenerateCommand.initialize (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular\cli\commands\generate-impl.js:12:9)
at async GenerateCommand.validateAndRun (C:\Users\Paolo\Documents\Projects\badgeMeAngular\matero9\node_modules@angular\cli\models\command.js:124:9)

angular 9 depredations. entryComponents

entryComponents is deprecated since version 9.0.0 with Ivy and is no longer necessary.

What do you think? Should we remove it?

Error executing 'ng add ng-matero' command

Execute the 'ng add ng-matero' command to report the following error：

# ng add ng-matero
Skipping installation: Package already installed
? Choose a prebuilt layout template: Dynamic
? Choose a prebuilt navigation type: Top Navigation
? Choose a prebuilt theme style: Light
? Choose a prebuilt direction option: LTR
? Set up browser animations for Angular Material? Yes
UPDATE package.json (836 bytes)
√ Packages installed successfully.
Cannot find module '@schematics/angular/utility/config'
Require stack:
- E:\Code\Gitee\ngtest\node_modules\@angular\cdk\schematics\utils\ast.js
- E:\Code\Gitee\ngtest\node_modules\@angular\cdk\schematics\utils\index.js
- E:\Code\Gitee\ngtest\node_modules\@angular\cdk\schematics\index.js
- E:\Code\Gitee\ngtest\node_modules\ng-matero\ng-add\setup-project.js
- E:\Code\Gitee\ngtest\node_modules\@angular-devkit\schematics\tools\export-ref.js
- E:\Code\Gitee\ngtest\node_modules\@angular-devkit\schematics\tools\index.js
- E:\Code\Gitee\ngtest\node_modules\@angular\cli\utilities\json-schema.js
- E:\Code\Gitee\ngtest\node_modules\@angular\cli\models\command-runner.js
- E:\Code\Gitee\ngtest\node_modules\@angular\cli\lib\cli\index.js
- D:\User\Documents\node\prefix\node_modules\@angular\cli\lib\init.js
- D:\User\Documents\node\prefix\node_modules\@angular\cli\bin\ng

@angular/cli version: @11.1.0

feat: update angular version 9

angular 9 is release. So please add angular 9 support

Angular 11

Are there any plans to upgrade the template to support Angular 11?

Thank you!

Be able to change menus at any point

Currently, changing menus after app initialization doesn't reflect in frontend.
Implement menu.service to use BehaviorSubject.

changing theme color doesn't work in AppSettings

Hi when I change the theme from 'light' to 'dark' in the settings.ts (default) it doesn't work
after save and reload the app (ng serve)
in the previous version, it was working

Form submission canceled because the form is not connected

/src/app/routes/sessions/login/login.component.html
line:24 <button class="w-full" mat-raised-button color="primary" (click)="login()"....

type="button"

menu routing using absolute path

Thanks for the great project,
I have a question/issue
Within the menu 'menu.json' I need the "children" nodes to route to different absolute paths?
e.g.
"children": [ { "state": /organizations/manage-organizations", "name": "Manage", "icon": "people", "type": "link" },

Is this possible since setting an empty "state" on the parent menu item does not work
Many thanks

The sidebar menu didn't collapse when hovering.

Hey, I'm glad it's a specific solution expect the PrimeNG for Angular.
It's a great job for all the components was been designed and implemented by yourself.

Here's a tiny issue for the sidebar behavior. You can see when the sidebar menu collapse but the sub level menu didn't collapse which looks strange.

Does not support with angular 10.

Feature: Can we have angular fullcalendar with material design

This app is more better then any other paid template. Mordern and updated. I tried to add https://github.com/fullcalendar/fullcalendar-angular in project but stuck in showing popover on events with details. If you can add this library in current project with material theme then it will look awesome.

Let me know what you think, Angular 9 is still not supported in fullcalendar as of now.

after change theme still light theme for mat menu

how can i fix it?

is this file /ng-matero/schematics/utils/theming.ts auto generated?

hi, i plan to add a small feature for quick-search-and-locate mod-com-srv-dir-pipe in ng-matero , but i am NOT sure this file :
**/ng-matero/schematics/utils/theming.ts**
is it auto generated by angular-cli ?
i need to modify one function in it to implement this small feature

Infinite loading screen loop on login/register pages

Try to refresh "login" or "register" the loading page started and never ended

using app.component.html

Hi

I have a need to put some other logic in my application,
so I try to do the following

my code here....

but when I do this the the left menu is presented based on the content and not on the full screen,

why?

thanks,

不兼容IE11 格式和图标有问题

Datepicker in Formly form

I am trying to use date pciker in dynamic form example with formly form. It is not working. The error is there is not type datepicker. According to formly form datepicler is an allowed type fpr date picker.

Here is the FormlyFieldConfig I used.

fieldGroup: [
        {
          className: 'col-sm-3',
          key: 'date1',
          type: 'datetimepicker',
          templateOptions: {
            label: 'Date 1',
          }
        },
      ],

ERROR Error: [Formly Error] There is no type by the name of "datepicker"
    at FormlyConfig.getType (ngx-formly-core.js:452)
    at FormlyConfig.resolveFieldTypeRef (ngx-formly-core.js:504)
    at CoreExtension.getFieldComponentInstance (ngx-formly-core.js:3085)
    at CoreExtension.prePopulate (ngx-formly-core.js:2926)
    at ngx-formly-core.js:664
    at Array.forEach (<anonymous>)
    at FormlyFormBuilder._buildForm (ngx-formly-core.js:660)
    at ngx-formly-core.js:675
    at Array.forEach (<anonymous>)
    at FormlyFormBuilder._buildForm (ngx-formly-core.js:671)
defaultErrorLogger @ core.js:5882
handleError @ core.js:5935
(anonymous) @ core.js:42716
invoke @ zone-evergreen.js:365
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:41113
tick @ core.js:42713
(anonymous) @ core.js:42553
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41277
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:41052
next @ core.js:42550
schedulerFn @ core.js:36880
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36842
checkStable @ core.js:41191
onHasTask @ core.js:41298
hasTask @ zone-evergreen.js:420
_updateTaskCount @ zone-evergreen.js:441
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:570
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:553
scheduleTask @ zone-evergreen.js:389
onScheduleTask @ zone-evergreen.js:273
scheduleTask @ zone-evergreen.js:379
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:841
resolvePromise @ zone-evergreen.js:787
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ badge-badge-module.js:1
core.js:5882 ERROR Error: [Formly Error] There is no type by the name of "datepicker"
    at FormlyConfig.getType (ngx-formly-core.js:452)
    at FormlyField.renderField (ngx-formly-core.js:1248)
    at FormlyField.triggerHook (ngx-formly-core.js:1272)
    at FormlyField.ngOnChanges (ngx-formly-core.js:1197)
    at FormlyField.wrapOnChangesHook_inPreviousChangesStorage (core.js:26866)
    at callHook (core.js:3945)
    at callHooks (core.js:3905)
    at executeInitAndCheckHooks (core.js:3846)
    at refreshView (core.js:11802)
    at refreshDynamicEmbeddedViews (core.js:13149)
defaultErrorLogger @ core.js:5882
handleError @ core.js:5935
(anonymous) @ core.js:42716
invoke @ zone-evergreen.js:365
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:41113
tick @ core.js:42713
(anonymous) @ core.js:42553
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41277
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:41052
next @ core.js:42550
schedulerFn @ core.js:36880
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36842
checkStable @ core.js:41191
onLeave @ core.js:41352
onInvokeTask @ core.js:41261
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:481
invokeTask @ zone-evergreen.js:1596
globalZoneAwareCallback @ zone-evergreen.js:1622
load (async)
customScheduleGlobal @ zone-evergreen.js:1735
scheduleTask @ zone-evergreen.js:386
onScheduleTask @ zone-evergreen.js:273
scheduleTask @ zone-evergreen.js:379
scheduleTask @ zone-evergreen.js:211
scheduleEventTask @ zone-evergreen.js:237
(anonymous) @ zone-evergreen.js:1907
desc.set @ zone-evergreen.js:1263
requireEnsure @ bootstrap:148
loadChildren @ routes-routing.module.ts:72
loadModuleFactory @ router.js:6446
load @ router.js:6422
(anonymous) @ router.js:4619
_tryNext @ mergeMap.js:46
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ map.js:16
subscribe @ Observable.js:23
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ take.js:22
subscribe @ Observable.js:23
call @ throwIfEmpty.js:13
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ map.js:16
subscribe @ Observable.js:23
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ take.js:22
subscribe @ Observable.js:23
call @ throwIfEmpty.js:13
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ takeLast.js:22
subscribe @ Observable.js:23
call @ throwIfEmpty.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ switchMap.js:46
_next @ switchMap.js:36
next @ Subscriber.js:49
notifyNext @ switchMap.js:70
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
(anonymous) @ subscribeToPromise.js:5
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41277
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:851
invokeTask @ zone-evergreen.js:400
onInvokeTask @ core.js:41255
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:570
invokeTask @ zone-evergreen.js:485
invokeTask @ zone-evergreen.js:1596
globalZoneAwareCallback @ zone-evergreen.js:1633
load (async)
customScheduleGlobal @ zone-evergreen.js:1735
scheduleTask @ zone-evergreen.js:386
onScheduleTask @ zone-evergreen.js:273
scheduleTask @ zone-evergreen.js:379
scheduleTask @ zone-evergreen.js:211
scheduleEventTask @ zone-evergreen.js:237
(anonymous) @ zone-evergreen.js:1907
(anonymous) @ http.js:2603
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
(anonymous) @ startup.service.ts:21
ZoneAwarePromise @ zone-evergreen.js:872
load @ startup.service.ts:12
(anonymous) @ app.module.ts:18
runInitializers @ core.js:40330
(anonymous) @ core.js:42211
_callAndReportToErrorHandler @ core.js:42378
(anonymous) @ core.js:42205
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41277
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:41052
bootstrapModuleFactory @ core.js:42180
(anonymous) @ core.js:42256
invoke @ zone-evergreen.js:365
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:851
invokeTask @ zone-evergreen.js:400
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:570
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:553
scheduleTask @ zone-evergreen.js:389
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:841
then @ zone-evergreen.js:967
bootstrapModule @ core.js:42252
bootstrap @ main.ts:15
./src/main.ts @ main.ts:25
__webpack_require__ @ bootstrap:84
0 @ main.ts:26
__webpack_require__ @ bootstrap:84
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 180 more frames
core.js:5882 ERROR Error: Cannot find control with unspecified name attribute
    at _throwError (forms.js:3479)
    at setUpControl (forms.js:3303)
    at FormControlDirective.ngOnChanges (forms.js:7266)
    at FormControlDirective.wrapOnChangesHook_inPreviousChangesStorage (core.js:26866)
    at callHook (core.js:3945)
    at callHooks (core.js:3905)
    at executeInitAndCheckHooks (core.js:3846)
    at selectIndexInternal (core.js:9609)
    at Module.ɵɵadvance (core.js:9570)
    at FormlyFieldCheckbox_Template (ngx-formly-material-checkbox.js:60)

Support for Angular Universal

Hi,
Will there will be any support for angular universal. I am thinking to use your template for website development.

BR,
Saurabh

user login & register form submit functions

As I saw there contains login and register form with submit button.
However, in login submit function cannot find the part of posting HTTP auth requests and handling returned jwt in code.
Also didn't see the register submit function.
May suggest the place to change or how to implement that out? Thanks a lot.

Material Extensions Library

If you have any questions about the Material Extensions library, please submit the issue at Extensions Repo.

后退的时候能否不刷新上个页面

后退的时候能否不刷新上个页面

How can I add FontAwesome?

Hi there,

when I tried to add FontAwesome, it says that:

src/app/routes/dashboard/dashboard.component.html:5:12 - error NG8002: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.

Below are my steps to add:

$ ng add @fortawesome/angular-fontawesome

// dashboard.component.ts
// ... 
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
export class DashboardComponent {
  faCoffee = faCoffee;
  // and others
}

// dashboard.component.html
<fa-icon [icon]="faCoffee"></fa-icon>

Reference: https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Thanks

notification 相关组件

现在 material 组件里感觉没有 notification 相关的组件，类似于微信小程序里的 toast 通知

之前做的一个比较简单的基于 weui 的 toast, https://weihanli.github.io/mini_toast/

Is the template available for commerical case?

thanks advance for clarification

可以支持使用OpenAPI3.0的schema来生成http api吗？

因为OpenAPI3.0的schema描述api很方便，而且ng也有一些支持使用它生成api的工具（比如 https://github.com/cyclosproject/ng-swagger-gen ），所以如果能添加根据schema生成api的工具就更好了。
ng水平很差，ts水平很差，所以没法自己写，抱歉。。。

Empty content with sidenav collapsed and menu expanded

Hi Zongbin, how are you.

First, thanks and congratulations for this awesome template.

The issue is about when sidenav is collapsed and the menu is expanded, the sidenav content sometimes appears empty, In part because the submenu items have no icons. This cause in my opinion, a loss of context. I attach some reference images

Do you have some tip to avoid this, some style/structure advice.

Thanks 🙂

Is it possible not to use external resource links

<link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">

Some areas cannot access the googleapis domain.
And it is possible to deploy the project in an environment without an external network.

Advanced search table is not taking into account [length] config

For the below html and config even if you pass [length] different than [data] size has no effect.

<mtx-grid
      *ngIf="list.length > 0"
      class="mat-elevation-z1"
      [data]="list"
      [columns]="gridColumns"
      [length]="total"
      [loading]="isLoading"
      [pageIndex]="query.page"
      [pageSize]="query.limit"
      [pageSizeOptions]="[5, 10, 20, 100]"
      (page)="getNextPage($event)"
      [frontPage]="true"
      (changeSelect)="changeSelect($event)"
    >

Example:

  [length]="total" // 20
  [data]="list" // list.length = 5

Current behaviour

Correct behaviour

1-5 of 20 and arrow bar activated.

Hi,where to find the document for extensions?

Need attributes usage guide

ls -l /opt/JS/GPFORM_/ng-matero/node_modules/@ng-matero/extensions/bundles/ | egrep "umd.js$"
-rw-r--r-- 1 root root 9048 Oct 26 1985 extensions.umd.js
-rw-r--r-- 1 root root 6218 Oct 26 1985 mtxAlert.umd.js
-rw-r--r-- 1 root root 10362 Oct 26 1985 mtxCheckboxGroup.umd.js
-rw-r--r-- 1 root root 26501 Oct 26 1985 mtxColorPicker.umd.js
-rw-r--r-- 1 root root 20708 Oct 26 1985 mtxDialog.umd.js
-rw-r--r-- 1 root root 78697 Oct 26 1985 mtxGrid.umd.js
-rw-r--r-- 1 root root 6138 Oct 26 1985 mtxProgress.umd.js
-rw-r--r-- 1 root root 33082 Oct 26 1985 mtxSelect.umd.js
-rw-r--r-- 1 root root 86397 Oct 26 1985 mtxSplit.umd.js
-rw-r--r-- 1 root root 5014 Oct 26 1985 mtxText3d.umd.js

Got an error when follow installation instruction

I followed installation instruction. When I ran command

ng add ng-matero

I got an error below

Cannot find module '@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript'

Could you suggest how to solve this error. Thank you.

matero-sidemenu vertical scroll

Hi ,

first thank you for this agreeable template

a have juste one issue i need to add a vertical scroll in left matero-sidemenu especially when i have a muliple levels

Best regard

Hi, I updated yours product and mat-line not working(

Feature: Parent-Child Table Grid

It will be great if we can have Parent-Child Table Grid for enterprise level usage.

2021 Roadmap

• schematics: generate component
• add permission management and integrate ngx-permissions
• refactor error page routes
• add reuse routing
• replace TSLint with ESLint
• update docs
• add refresh token

V10 Roadmap

• Update to Angular v10 and Material v10
• authentication
• http interceptors
• permissions
• more examples
  • datetimepicker

On Hover or multiselect of rows action button and row data get mixed up

V9 Roadmap

• Schematics Support
  • ng add
  • ng generate
  • ng update (unavailable)
• Material Extentions
  • Alert
  • Checkbox Group
  • Color Picker
  • Data Grid
  • Dialog
  • Progress
  • Select
• Internationalization (i18n)

Extra icon sidebar

Can we add extra sidebar on extreme left with 60px width which contains only icons like in score. Need to dynamically alter sidebar menu based on icon clicked. Thanks in advance.

Flex layout for formly

Node12 依赖安装失败

20630 verbose type version
20631 verbose stack @ng-matero/extensions: No matching version found for @ng-matero/[email protected]
20631 verbose stack at pickManifest (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\npm-pick-manifest\index.js:101:11)
20631 verbose stack at D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\pacote\lib\fetchers\registry\manifest.js:24:14
20631 verbose stack at tryCatcher (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
20631 verbose stack at Promise._settlePromiseFromHandler (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
20631 verbose stack at Promise._settlePromise (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
20631 verbose stack at Promise._settlePromiseCtx (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\promise.js:606:10)
20631 verbose stack at _drainQueueStep (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\async.js:142:12)
20631 verbose stack at _drainQueue (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\async.js:131:9)
20631 verbose stack at Async._drainQueues (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\async.js:147:5)
20631 verbose stack at Immediate.Async.drainQueues [as _onImmediate] (D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
20631 verbose stack at processImmediate (internal/timers.js:439:21)
20632 verbose cwd D:\dev\learn\Ng-Matero\matero\ng-matero
20633 verbose Windows_NT 10.0.18363
20634 verbose argv "D:\Tools\laragon\bin\nodejs\node-v12\node.exe" "D:\Tools\laragon\bin\nodejs\node-v12\node_modules\npm\bin\npm-cli.js" "i"
20635 verbose node v12.5.0
20636 verbose npm v6.9.0
20637 error code ETARGET
20638 error notarget No matching version found for @ng-matero/[email protected]
20639 error notarget In most cases you or one of your dependencies are requesting
20639 error notarget a package version that doesn't exist.
20639 error notarget
20639 error notarget It was specified as a dependency of 'ng-matero'
20640 verbose exit [ 1, true ]

How to make the below mat-card fixed when user scrolls

can you please tell me the css for If i want to make the below shown mat-card fixed and if the content is more than allow scroll within the content size. Many thanks for the great project.

新建模块建议放在app下面

每个模块在app下面一个目录多好， 图片这样感觉怪怪的

installation problem in the project with sub-projects

when i tries to perform the following sequence:
ng new app --createApplication=false
cd app
ng new subapp
ng add ng-matero

I get the following error:
Skipping installation: Package already installed
? Choose a prebuilt layout template: Dynamic
? Choose a prebuilt navigation type: Side Navigation
? Choose a prebuilt theme style: Light
? Choose a prebuilt direction option: LTR
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1329 bytes)
√ Packages installed successfully.
Main file (projects/subapp/src/main.ts) not found

file projects/subapp/src/main.ts exists on disk

The interaction with the application is a bit slow.

Hi, Excellent job.
I would like to tell you that browsing the application is a bit slow. It takes 2 or 3 seconds sometimes to access other routes. What can be?