Discussion on Egret - Angular 19+ Admin Dashboard Template

Discussion on Egret - Angular 19+ Admin Dashboard Template

By
Cart 2,755 sales
Well Documented

ui-lib supports this item

Supported

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

822 comments found.

When the using the eCommerce shop layout on mobile. Clicking the toggle button for the sidebar pushes the Header out of the view port. We want to alter this feature so as to keep the header in the view-port.

http://egret.ui-lib.com/shop

On mobile it’s look like this https://prnt.sc/ojzcdd I don’t see any issues

Hi! i have some problems with EGRET template. So components visible on pages when I do Event on other components e.g. sidebar or topbar. What I did wrong?

I don’t understand what you are try to explain. Probably change detection issue, Please try this https://themeforest.net/item/egret-angular-4-material-design-admin-template/20161805/comments?page=25&filter=all#comment_22326113

if possible, share a screen record. Thanks!

it helped for me. thank you.

Hello! I have some question.

I have three modules: home, account, and dashboard. Each module uses a different layout as following: home – landing (fixed topbar, no sidebar) account – with sidebar dashboard – with sidebar

account and dashboard sidebar menu items are different.

Have you any suggestion for this?

You can change layout by using “LayoutService”, please check “ngOnInit” method of “views/dashboard/dashboard-dark/dashboard-dark.component.ts” to see how I changed layout options.

Available layout options http://demos.ui-lib.com/egret-doc/#layout

you can also change navigation items using “NavigationService”. modify “publishNavigationChange” method in that service. Then import & inject “NavigationService” in your account and dashboard components, then call “publishNavigationChange” in “ngOnInit”

Hi there. I used your template to make a page similar to your crud table in the sample. I have 2 questions

1) Interestingly , the data on the Material table refreshes only if i move the mouse over on the page.. I verified this by monitoring the console.log ( where i had printed the data ). If I dont move the mouse the data never gets populated /Refreshed . How to fix this ?

2) Which component is responsible for the “Loading” effect ? I have seen that in the dashboard for the demo url. when you create an entry or delete an entry, before the page refreshes with the updated data, there is a “Loader Revolving “Component appearing.. I dont see the same in my version.. Would you please help ?

thanks Vinod

1) You need to detect changes,

constructor(
    private dataService: MyDataService
    private cdr: ChangeDetectorRef
  ) {}
When something changes in component call this method this.cdr. detectChanges()

2) You need to use “AppLoaderService” for showing spinner loader. Please check out “views/cruds/crud-ngx-table/crud-ngx-table.component.ts” for how to use

node_modules\css-star-rating\scss\_elements.scss 297:15 root stylesheet i got this error with package.json { “name”: “egret”, “version”: “8.0.0”, “license”: “https://themeforest.net/licenses/terms/regular”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “serveProd”: “ng serve—environment=prod”, “build”: “ng build—prod=true—aot=true—extractCss=true—optimization=true”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { ”@agm/core”: “1.0.0-beta.7”, ”@angular/common”: “8.1.2”, ”@angular/compiler”: “8.1.2”, ”@angular/flex-layout”: “8.0.0-beta.26”, ”@angular/forms”: “8.1.2”, ”@angular/material-moment-adapter”: “8.0.1”, ”@angular/platform-browser”: “8.1.2”, ”@angular/platform-browser-dynamic”: “8.1.2”, ”@angular/router”: “8.1.2”, ”@ngu/carousel”: “1.5.5”, ”@ngx-translate/core”: “11.0.1”, ”@ngx-translate/http-loader”: “4.0.0”, ”@swimlane/ngx-datatable”: “15.0.2”, “angular-calendar”: “0.27.13”, “angular-in-memory-web-api”: “0.8.0”, “angular-star-rating”: “4.0.0-beta.3”, “chart.js”: “2.8.0”, “classlist.js”: “1.1.20150312”, “core-js”: “3.1.4”, “css-star-rating”: “1.2.4”, “date-fns”: “1.30.1”, “echarts”: “4.2.1”, “flag-icon-css”: “3.3.0”, “hammerjs”: “2.0.8”, “highlight.js”: “9.15.8”, “hopscotch”: “0.3.1”, “install”: “0.13.0”, “moment”: “2.24.0”, “ng2-charts”: “2.3.0”, “ng2-dragula”: “2.1.1”, “ng2-file-upload”: “1.3.0”, “ng2-validation”: “4.2.0”, “ngx-color-picker”: “8.1.0”, “ngx-echarts”: “4.2.1”, “ngx-pagination”: “4.1.0”, “ngx-perfect-scrollbar”: “8.0.0”, “ngx-quill”: “7.1.0”, “npm”: “6.10.1”, “perfect-scrollbar”: “1.4.0”, “quill”: “1.3.6”, “rxjs”: “6.5.2”, “rxjs-compat”: “6.5.2”, “web-animations-js”: “2.3.2”, “zone.js”: “0.9.1” }, “devDependencies”: { ”@angular-devkit/build-angular”: “0.801.2”, ”@angular-devkit/core”: “8.1.2”, ”@angular/animations”: “8.1.2”, ”@angular/cdk”: “8.1.1”, ”@angular/cli”: “8.1.2”, ”@angular/compiler-cli”: “8.1.2”, ”@angular/core”: “8.1.2”, ”@angular/language-service”: “8.1.2”, ”@angular/material”: “8.1.1”, ”@types/hopscotch”: “0.2.30”, ”@types/jasmine”: “3.3.14”, ”@types/node”: “12.6.8”, “codelyzer”: “5.0.1”, “copy-webpack-plugin”: “5.0.3”, “enhanced-resolve”: “4.1.0”, “jasmine-core”: “3.4.0”, “jasmine-spec-reporter”: “4.2.1”, “karma”: “4.2.0”, “karma-chrome-launcher”: “3.0.0”, “karma-cli”: “2.0.0”, “karma-coverage-istanbul-reporter”: “2.0.6”, “karma-jasmine”: “2.0.1”, “karma-jasmine-html-reporter”: “1.4.2”, “node-sass”: “4.12.0”, “protractor”: “~5.4.2”, “ts-node”: “8.3.0”, “tslint”: “5.18.0”, “typescript”: “^3.4.1” } }

What is the error message saying?

I have Egret 8 and the Evelynn Angular landing page I have integrated together. The default route is routed to home with is routed to HomeOneComponent. The landing page comes up correctly but the back button isn’t working as expected. If I select something off the home page menu to navigates correctly to that section but if I hit the back button it goes to the page before the landing page. If I hit the forward button it goes to the section on the home page it was on before hitting the back button. Any ideas?

export const rootRouterConfig: Routes = [ { path: ’’, redirectTo: ‘home’, pathMatch: ‘full’ }, { path: ‘home’, loadChildren: () => import(’./views/home/home.module’).then(m => m.HomeModule), data: {title: ‘Home’} },

Seeming something similar in just the Landing Page project (Evelynn). Start by selecting version 1 on the demo page. It navigates correctly to that version of the landing page. Then selects works from the top menu and it navigates to the works section correctly. If you then hit the back button it goes back to the demo page.

Top menu has two types of items, one with “scrollTo” directive & another with “routerLink” directive.

“scrollTo” directive scrolls to a specific section without modifying URL, it uses browser scroll API, that’s why clicking on browser back button don’t scroll back to previous section, instead it get back to previous URL.

I purchased the Egret component – Angular 8+ Material Design Admin Template on 7/17, but so far I have not received the invite to Github. I performed the walkthrough described in https://ui-lib.com/github-access/ but unfortunately I do not receive the invitation.

Please help me

Hi, Please check your email.

Hello, would you please take a look at this issue. https://github.com/mh-rafi/egret-angular/issues/16

Hello i’m interested if the template supports AOT ?

Yeah, Egret supports AOT.

Hello, i’m interested if the template supports AOT ?

Hi, I bought this template for mobile app implementation with Cordova. When I try to generate the mobile app based on this template, I have the loader with an empty page. It seems that during the build of the angular project there are some packages that haven’t be imported. So I want to know, if there are any other command that I need to execute to build this template. If it is possible can you give me all steps need to generate a mobile app based on your template.

Probably lazy loading is causing that issue. I’m not sure cordova supports angular lazy loading.

you can try removing lazy loading by adding all the child routes to app.routing, you also need to import modules from views to appModule. don’t forget to export child components from their parent modules in views.

Hi I have purchased Egret admin template, do I need to purchase <Evelynn – Material Design Angular App Landing Page> seperately?

Yeah, you need to purchase that separately.

Getting the same error <error enoent undefined ls-remote -h -t ssh://git@github.com/angular/web-animations-js.git> on npm install

Probably you need to set git.exe at the environment path variable.

Getting this error <error enoent undefined ls-remote -h -t ssh://git@github.com/angular/web-animations-js.git> on npm install

When did you get this error? during “ng serve” or “npm install”?

during npm install. Solved it by setting git.exe at the environment path variable.

Great!

I want to convert this Web App to a Mobile App with Cordova but it stilsl loading. Please suggest us to proceed further.

Probably lazy loading is causing that issue. I’m not sure cordova supports angular lazy loading.

you can try removing lazy loading by adding all the child routes to app.routing, you also need to import modules from views to appModule. don’t forget to export child components from their parent modules in views.

I got this error during ng-serve

ERROR in ./src/assets/styles/app.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js\\./node_modules/sass-loader/lib/loader.js??ref—13-3!./src/assets/styles/app.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js): Consider `@extend .star, .direction-rtl` instead. See http://bit.ly/ExtendCompound for details. 297 │ @extend .star.direction-rtl; │ ^^^^^^^^^ ╵ node_modules\css-star-rating\scss\_elements.scss 297:15 root stylesheet in D:\Mitra Adi Perkasa\Projects\Website\Angular\Centralized\node_modules\css-star-rating\scss\_elements.scss (line 297, column 15) ERROR in ./src/polyfills.ts Module not found: Error: Can’t resolve ‘core-js/es6/reflect’ in ‘D:\Mitra Adi Perkasa\Projects\Website\Angular\Centralized\src’ ERROR in ./src/polyfills.ts Module not found: Error: Can’t resolve ‘core-js/es7/reflect’ in ‘D:\Mitra Adi Perkasa\Projects\Website\Angular\Centralized\src’

Solved

Hello, I just buying your template, but i have one question whats different between folder full & seed-project? where should i go for development ?

Solved

Hi Rafi,

Is there a way to show the sub menu in compact style?

Our project required the left menu to be always remain in compact style, which we had customized the template to make it.

However, we found the compact style always shows the top level menu item only, is there any ‘mouseover’ or ‘click’ event to show the sub menu?

Regards, Adrien

You can do that. You need to add ‘mouseover’ or ‘click’ event listener at line 38 of “shared/components/sidenav/sidenav.template.html”,

There are few ways to show child menu without sidebar expanding.

You can show existing child items(which are hidden when sidebar is compact) by setting position absolute. And remove scrollbar, scrollbar makes sidebar overflow:hidden, cut off outside contents.

or

You can get child items inside component by passing them to the listener (click)=”showChildItems(item.sub)” then insert them where mouse clicked.

for both cases, you need to customize/add CSS. Thanks!

Hi,

I am integrating our application with this admin egret and angular landing. Mostly works but one of my lazy-loaded pages seems to be blocked after calling a backend service. The application works when outside the views tree but when added in - the page appears - use a stepper to gather relevant parameters - make a http call which returns an observable - the spinner is triggered - then boom after the data returns from the backend the spinner remains on the page. the new data does not appear until I move the mouse out of the right hand side and hover over the side menu.

There are no errors anywhere – none on the backend. none on the browser console. Do you know what might be causing this?

You need to detect change using “ChangeDetectorRef” when http call returns data.

constructor(
    private cdr: ChangeDetectorRef,
    ...
  ) 
this.dataService.getData().subscribe((response) => {
   this.cdr.markForCheck();
})

thank you very much. that sorted it for me.

much appreciated. keep up the good work.

Great! :)

Hello Mr. i hope you are doing ok, i have a doubt, what is the difference between the regular and the extended license? thank you!

If your users are going to pay for using the product you will build, then you need an extended license. And regular license can be used where users will not be charged. Thanks!

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