Discussion on Egret - Angular 19+ Admin Dashboard Template

Discussion on Egret - Angular 19+ Admin Dashboard Template

By
Cart 2,749 sales
Well Documented

ui-lib supports this item

Supported

This author's response time can be up to 2 business days.

822 comments found.

Hello, I got below error when trying to use command “npm install”. Please advise!

npm WARN deprecated core-js@2.4.1: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno ENOENT
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://git@github.com/uilibrary/css-star-rating.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.

In my application, depending on your user group certain menu items may or may not be available to you. My question is, once authenticated, I will know which menu items to show/hide. If I wait to build these menuitems until that point, how can I inform the navigation service to add the array (i.e. from a separate service)?

You need to define multiple menuItems array then send that menu items to navigation like that this.menuItems.next(this.menuForGuest);

Please check “publishNavigationChange” method in navigation.service.ts

Hello,

I have some question as below: 1. Can i request to add some feature? 2. Is it one time license?

Hi, Please check out How envato support works https://www.youtube.com/watch?v=NJ5qm2FnSX4&feature=emb_logo

License FAQs https://themeforest.net/licenses/faq#main-differences-licenses-a

You need to buy license for each project. If you charge your end users you need to buy an extended license.

Hi, In the CrudNgxTableComponent I get an error in openPopUp method : The ‘Object’ type is assignable to very few other types. Did you mean to use the ‘any’ type instead? Here is the method code: openPopUp(data: any = {}, isNew?) { let title = isNew ? ‘Add new member’ : ‘Update member’; let dialogRef: MatDialogRef<any> = this.dialog.open(NgxTablePopupComponent, { width: ‘720px’, disableClose: true, data: { title: title, payload: data } }) dialogRef.afterClosed() .subscribe(res => { if(!res) { // If user press cancel return; } this.loader.open(); if (isNew) { this.crudService.addItem(res) .subscribe(data => { this.items = data; this.loader.close(); this.snack.open(‘Member Added!’, ‘OK’, { duration: 4000 }) }) } else { this.crudService.updateItem(data._id, res) .subscribe(data => { this.items = data; // <- Error here this.loader.close(); this.snack.open(‘Member Updated!’, ‘OK’, { duration: 4000 }) }) } }) }

it’s a type error. check which variable is causing this and use type “any” for that variable.

Can the template be upgraded to anngular9?

Yeah, I’ve already to upgraded to angular 9. you can get latest update from github http://githubaccess.ui-lib.com/

Hello, I added two new components, then started to see console error: Cannot read property ‘navigationPos’ of undefined pointing to AdminLayoutComponent.html:1 What do I need to do, please ?

Angular 9 was just released. When do you anticipate have a version of Egret that works with that? Thank you.

I think I can release update with a week.

Thank you

The first time I build it, everything looks fine. As soon as I make a change, all of the styles for the buttons and button clicks go away. So far the only way I can get them back is to start over with a fresh copy. Is there a simple fix for this that I am missing?

I just read some of the other comments and it does seem to be directly related to the signin page. When refreshed we lose the styles on the buttons, checkboxes, button click animation, etc. This is a problem if you have authguard enabled and the redirect is to signin2. Doesn’t matter what you do, the styles are lost. To recreate:

auth.guard.ts: change isAuthenticated = false in canActivate add this.router.navigate([’/sessions/signin2’]);

Can you add “egret-navy” CSS class to body tag in index.html? <body class="egret-navy">

Perfect, that did the trick! Thank you for the quick reply

Hello,

On this page,

http://localhost:4200/sessions/signin2

the “agree” checkbox does not work. Below are some details about my system. Can you advise?

Regards.

Angular CLI: 8.3.23 Node: 12.14.1 OS: win32×64 Angular: 8.0.0 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router

Package Version

@angular-devkit/architect 0.803.23 @angular-devkit/build-angular 0.803.23 @angular-devkit/build-optimizer 0.803.23 @angular-devkit/build-webpack 0.803.23 @angular-devkit/core 7.3.8 @angular-devkit/schematics 8.3.23 @angular/cdk 8.0.1 @angular/cli 8.3.23 @angular/flex-layout 8.0.0-beta.26 @angular/material 8.0.1 @angular/material-moment-adapter 8.2.3 @ngtools/webpack 8.3.23 @schematics/angular 8.3.23 @schematics/update 0.803.23 rxjs 6.5.2 typescript 3.4.5 webpack 4.39.2

Please check that checkbox is disabled. also check body tag has this class “egret-navy” in index.html

Mat-Table is not Responsive .For example (Invoice List) , Please Help …

Hi, Mat table is not mobile responsive by default. But there are lots of css solutions for it. Can you follow this example “Table with sticky columns” of http://egret.ui-lib.com/material/table or https://stackoverflow.com/questions/55334935/floating-horizontal-scrollbar-with-mat-table-in-angular

Hi Rafi,

Previously you were using a json file to expose navigation items to the app, now you are using a service class to do that, but in that service read the comments but I still cannot understand well why you are using 3 sections it:

iconMenu: IMenuItem[] separatorMenu: IMenuItem[] plainMenu: IMenuItem[]

When side bar is folded (not completely hidden) items are show as icons, is that what you call iconMenu, or only the 3 horizontally aligned icons on the top of the side bar ?

If we want to add, modify, or supress an item do we have to do that in each section ?

you don’t have to edit all of them, I added those for just demo purpose. You need to use only one.

Find this line at the bottom of navigation.service menuItems = new BehaviorSubject<IMenuItem[]>(this.iconMenu);

And check which is active. For above code iconMenu is active & you need to update iconMenu.

Template is not working in Internet Explore. I had downloaded on 1/27/2020. Please help.

You need to use polyfills. please check https://angular.io/guide/browser-support

Hi,

I am getting the following below when running “npm install” for the “seed” project. Does this work with Angular 8 (or Angular Material)?

Can you pls advise on how to fix?

I already ran “npm audit fix” once …

Regards.

NOTE: I did run “npm start” and the project started – I am just concerned about any problems I might run into in the future

npm WARN agm/<redpre#0> requires a peer of @angular/common4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN agm/<redpre#1> requires a peer of @angular/core4.0.0 || 5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @angular/material-moment-adapter@8.2.3 requires a peer of @angular/material@8.2.3 but none is installed. You must install peer dependencies yourself. npm WARN ngu/<redpre#4> requires a peer of @angular/common6.0.0-rc.0 || 6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ngu/<redpre#5> requires a peer of @angular/core6.0.0-rc.0 || 6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-calendar@0.26.4 requires a peer of angular/animations>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-calendar@0.26.4 requires a peer of angular/common>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-calendar@0.26.4 requires a peer of angular/core>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-in-memory-web-api@0.8.0 requires a peer of angular/common>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-in-memory-web-api@0.8.0 requires a peer of angular/core>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-star-rating@4.0.0-beta.3 requires a peer of angular/core4.0.0 || 5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-star-rating@4.0.0-beta.3 requires a peer of angular/forms4.0.0 || 5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-star-rating@4.0.0-beta.3 requires a peer of rxjs@5.1.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-star-rating@4.0.0-beta.3 requires a peer of zone.js@0.8.4 but none is installed. You must install peer dependencies yourself. npm WARN codelyzer@5.2.1 requires a peer of tslint@5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ng2-charts@2.2.2 requires a peer of angular/common7.2.0 but none is installed. You must install peer dependencies yourself. npm WARN ng2-charts@2.2.2 requires a peer of angular/core7.2.0 but none is installed. You must install peer dependencies yourself. npm WARN ng2-charts@2.2.2 requires a peer of chart.js@2.7.3 but none is installed. You must install peer dependencies yourself. npm WARN ngx-quill@4.8.0 requires a peer of angular/common5.0.0 || 6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ngx-quill@4.8.0 requires a peer of angular/core5.0.0 || 6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ngx-quill@4.8.0 requires a peer of angular/forms5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {os“} (current: {os“})

+ quill@1.3.7 + npm@6.13.6 + @angular-devkit/build-angular@0.803.23 added 184 packages from 85 contributors, removed 35 packages and updated 105 packages in 176.028s

8 packages are looking for funding run `npm fund` for details

fixed 53 of 74 vulnerabilities in 33373 scanned packages 1 vulnerability required manual review and could not be updated 3 package updates for 20 vulnerabilities involved breaking changes (use `npm audit fix—force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

Also, please note, the Material versions seem to differ based upon the commands typed

For example:

C:\WorkEnvironment\Development>ng—version

SHOWS: @angular/material 8.0.1

C:\WorkEnvironment\Development>npm -v

SHOWS 6.13.4 (for the Material version)

NOTE: I did run: npm update @angular/material @angular/cdk

Regards.

Hello again,

I have resolved the issue above using this message:

https://stackoverflow.com/questions/59946926/angular-material-versions-differ-on-the-same-installation-after-upgrade

But the problem I have now encountered is different.

When typing “npm list”, I get:

npm ERR! peer dep missing: angular/animations>=6.0.0 <8.0.0, required by angular-calendar@0.26.4 npm ERR! peer dep missing: angular/common4.0.0 || ^5.0.0, required by @agm/core@1.0.0-beta.2 npm ERR! peer dep missing: angular/common6.0.0-rc.0 || 6.0.0, required by @ngu/carousel@1.5.4 npm ERR! peer dep missing: angular/common>=6.0.0 <8.0.0, required by angular-calendar@0.26.4 npm ERR! peer dep missing: angular/common>=6.0.0 <8.0.0, required by angular-in-memory-web-api@0.8.0 npm ERR! peer dep missing: angular/common7.2.0, required by ng2-charts@2.2.2 npm ERR! peer dep missing: angular/common5.0.0 || ^6.0.0 || ^7.0.0, required by ngx-quill@4.8.0 npm ERR! peer dep missing: angular/core4.0.0 || 5.0.0, required by @agm/core@1.0.0-beta.2 npm ERR! peer dep missing: angular/core6.0.0-rc.0 || 6.0.0, required by @ngu/carousel@1.5.4 npm ERR! peer dep missing: angular/core>=6.0.0 <8.0.0, required by angular-calendar@0.26.4 npm ERR! peer dep missing: angular/core>=6.0.0 <8.0.0, required by angular-in-memory-web-api@0.8.0 npm ERR! peer dep missing: angular/core4.0.0 || 5.0.0, required by angular-star-rating@4.0.0-beta.3 npm ERR! peer dep missing: angular/core7.2.0, required by ng2-charts@2.2.2 npm ERR! peer dep missing: angular/core5.0.0 || ^6.0.0 || ^7.0.0, required by ngx-quill@4.8.0 npm ERR! peer dep missing: angular/forms4.0.0 || 5.0.0, required by angular-star-rating@4.0.0-beta.3 npm ERR! peer dep missing: angular/forms5.0.0 || 6.0.0 || ^7.0.0, required by ngx-quill@4.8.0 npm ERR! peer dep missing: @angular/material@8.2.3, required by @angular/material-moment-adapter@8.2.3 npm ERR! peer dep missing: chart.js@2.7.3, required by ng2-charts@2.2.2 npm ERR! peer dep missing: rxjs@5.1.0, required by angular-star-rating@4.0.0-beta.3 npm ERR! peer dep missing: tslint@5.0.0, required by codelyzer@5.2.1 npm ERR! peer dep missing: zone.js@0.8.4, required by angular-star-rating@4.0.0-beta.3 npm ERR! peer dep missing: rxjs@5.1.0, required by angular-star-rating@4.0.0-beta.3

Can you pls advise?

Regards.

Is there a way to use “npm install <github_location> —save” so that one can add this theme to an already existing Angular Material project?

Hi, getting error below when extracting file: themeforest-8Y2oME7Q-egret-angular-4-material-design-admin-template

Error: path too long

scrollable-dialog-overview.component.spec Type TS file Size 756 Bytes

How do I fix this?

Thanks!

OK – never mind. just changed zip file name and was able to extract it

Also, I am using Angular 8 – will the code work with this version? If not, can you note the additional steps needed to fix it so that it will?

Yeah, it supports angular 8. I think you don’t need any additional steps.

Hello, I have a doubt about what type of license to buy, can you please guide? We have a cloud (AWS) hosted Web Application that provides some services to end users. End users have to subscribe to license of our web app to use it. There are individual users as well as corporate’s that buy our licenses for their users. Given this, what type of license we would be required to purchase?

Thanks, Vivek

Hello, You need to buy an extended license for it. Because your user are charged.

Hello,

My translation works for the left side bar, and I want to make it work for the top header menu too, so I’ve defined translation

in assets/i18n/en.json “SIGNOUT”: “Sign Out”

and in assets/i18n/es.json “SIGNOUT”: “Deconnectar”

Then in header-top menu button I used {{ ‘Sign out’ | translate }}

but still could not get it to translate, what am I missing please ?

You need to use {{ ‘ SIGNOUT’ | translate }} instead of {{ ‘Sign out’ | translate }}

Thank you, and how to use it without curly barces e.g.:

iconTypeMenuTitle: string = “Frequently Accessed”;

How can we disable animation in this template ? Because we use this application in Remote.

Yes, you can. You need to remove “[@animate]” from each template. For example you can find [@animate] in app/views/dashboard/analytics/analytics.component.html” line 4

HI i want to show datepicker with Date and Time, but in the template I am not getting time selection option in datepicker, Please help

Material datepicker only provides date https://material.angular.io/components/datepicker/examples

You need to use another package for time picker. You can try this package https://github.com/DanielYKPan/date-time-picker#readme

Hi,

Can you help me in adding footer component? I dont see footer in admin layout html file also.

Thanks for the quick response. i have downloaded latest files but i did not find anything related to footer. please help me.

Hi, this is the footer folder location “src/app/shared/components/footer/”

Thanks. now it is available now.

When i using IE11 open the dashboard ,it is blank page,it have some error in the console

Hi, you need to use polyfills for ie support https://angular.io/guide/browser-support

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey