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.

Hi, Rafi. Please grant a githab access to Gas-pra. Thanks

Can you request github access here? https://ui-lib.com/github-access/

Access received. Many thanks!

Hi there!

We are trying to update our template to the last version. is there any documentation you can point us to what steps should we follow?

Thank you!

best regards! Harold L.

You can but I don’t recommend, because it can become easily a mess. If you’ve customized the template it would become more messy.

The template core is the “shared” folder and scss files in assets. So you can try updating these files in your projects. Don’t forget to keep backup of your project.

Hi Rafi, How can i dynamic add sidebar menu items? thanks

navigation.service.ts has an observable “menuItems”, You can set new menu items by calling next method this.menuItems.next(myCustomItems)

How do I change the word “Egret” this is displayed at the end of the string displayed in the browser tab?

In “app.component.ts” change the variable “appTitle”

npm install fails: ls-remote -h -t ssh://git@github.com/angular/web-animations-js.git

Have you tried installing packages after deleting node_modules folder and package-lock.json ?

Hi I cannot figure out what is going, I can not get the root path to work no matter what I do. useHash set to true or false. I have simple component redirect, I do no lazing loading of modules. This all I have in my App Routing:

{
  path: '',
  component: TestComponent,
  pathMatch: 'full'
}

TestComponent is part of the AppModule declarations. I have also done redirectTo routes that I know work and that does not work either. I am completely stumped and I know this is related to your code base. I can create a new angular application and not have this issue be reproduced

There is nothing exceptional for this template. Can you share your app.routing file?

That is my app.routing file in my previous comment, for testing, I reduced my app.routing to simply:

{ path: ’’, component: TestComponent, pathMatch: ‘full’ }

And test component would not load when going to localhost:4200

Here is my current app.routing to work around: export const rootRouterConfig: Routes = [ // { // path: ’’, // redirectTo: ‘home’, // pathMatch: ‘full’, // }, { path: ‘home’, loadChildren: () => import(’./views/home/home.module’).then(m => m.HomeModule), data: { title: ‘Welcome to Big Money Shot’ }, }, { path: ‘start’, //hack because path:’’ not redirecting, works for detecting and redirecting a logged in user anyways, AppCoponent brute force redirects to start route component: StartComponent, canActivate: [LandingGuard] }, { path: ’’, component: AuthLayoutComponent, children: [ { path: ‘sessions’, loadChildren: () => import(’./views/sessions/sessions.module’).then(m => m.SessionsModule), data: { title: ‘Session’ } } ] }, { path: ’’, component: AdminLayoutComponent, canActivate: [AuthGuard], children: [ { path: ‘dashboard’, loadChildren: () => import(’./views/dashboard/dashboard.module’).then(m => m.DashboardModule), data: { title: ‘Dashboard’, breadcrumb: ‘DASHBOARD’ } } ] }, { path: ’**’, redirectTo: ‘sessions/404’ } ];

In AppComponent I test the route for root and the force it to a route: ngOnInit() { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { if (event.url == ’/’) { this.router.navigate([‘start’]); } } }); }

Hi, I tried to inspect your code by copy & pasting in a ts file. I didn’t get anything from that. If you are still having the issue, can you share your routing file using tool like https://stackblitz.com/

Hello, I have this error : An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-server

I started with the seed-project and added a new module called dashboards. I added a MenuItem and it is properly routing to a component in the dashboard module. The problem is that top toolbar and side navbar disappear. How do I get the toolbar and navbar to show up in my new components?

inside app.routing.ts, have you added your new module as a child of “AdminLayoutComponent”?

That worked, Thanks!

Hi,

I have a problem with the DOM update after a http request or a file upload, i see you have the same problem in your demo http://egret.ui-lib.com/forms/upload, when i upload a file, after move the mouse to the sidebar for trigger the DOM update.

my github user is ivalenzuela, if you have an update, this will be great

Hi, Egret is so good, can it support ag-grid ? https://github.com/ag-grid/ag-grid

Hi Sir, I use ag-grid has confusing page layout, do you have a sample code?

I figure out some solutions, thanks.

Great!

I´m looking to buy this template , but I found on error in the calendar. pleas access from android s9+ the demo page Form basic and try to pick on date in the calendar . the month days display one single long list not ‘scrollable’ and i really cant select one date. Please fix it . The calendar is essential . I can send the print screen if you like

Please share a screenshot

Mate material table breaks, everything gets pushed to the right, when page width is 959 and smaller. Table contains 5 columns, how can this be fixed?

clearing things from _mat-table.scss helped

Hi! this is alex from México, in your Egret template (TablesMaterial Table) when you are on full screen (desktop) you can get table header horizontal , but if we change to any mobile (cellphone)—>header go to VERTICAL, on which file you make the trick?, thanks

This this the file that makes table header vertical on mobile, “assets/styles/scss/components/_mat-table.scss”

You can comment out everything in that file.

Hello good night, I would like to ask for help with a problem in ngx-datatable. At the time of making an http get request, the array of items is updated but these changes are not reflected in the table, however when clicking again on the search button, the data is updated, I think the ngx-datatable does not persist the changes made in the row array. Best regards.

Hello, I have upgraded our app to Egret 8 and it created an issue. When my service gets data from api and passes it to component with material table in it. Table will refresh only when something on the interface of Egret is clicked or sidebar is hidden/shown. The code of our modules is the same in Egret 7 and Egret 8.

Do you know what could be causing it? Regards, Alex

Looked at the earlier comments and using cdr fixes the issue.

private cdr: ChangeDetectorRef this.cdr.markForCheck();

Regards, Alex

Because my compupter was i3 ,kindly support app.css not the app.scss , so i can quick jump to code using your masterpiece. thank you sir.

All the styles are written in SCSS, What you can do is compiling all the SCSS to CSS by gulp/grunt then add compiled css to template.

As far as I know core i3 should work fine.

i use this grunt file sir. and the seed-project i changed a little bit., https://drive.google.com/open?id=12kw2Jx4vgtuuZeSWrBkLAt9PIcUHxY02

Sorry, I’ve been too busy to look at your project. You just need one time compilation, watch youtube video how to compile scss to css.

You are going to compile ‘src/assets/styles/scss/app.scss’, app.scss is root, after compiling you’ll get a bundled file app.css

keep app.css inside style folder. Add app.css inside “angular.json” line 24,

You are done and you don’t need “src/assets/styles/scss” anymore.

css-star-rating from 3 party vendor was error, and when using css-star-rating scss for compile time is so long , it can takes 30 minutes or less. if i change to css for css-star-rating then the error is in top bar navigation is not showing property full page. kindly check this issue, i will use this for my first project with angular. Thank You So Much.

Hello! There is a bug when using admin-layout:

app-blank.component.ts

@Component({ selector: ‘app-blank’, templateUrl: ’./app-blank.component.html’, styleUrls: [’./app-blank.component.css’] }) export class AppBlankComponent implements OnInit { isTrue = false; }

constructor() { }
ngOnInit() {
  setTimeout(() => { this.isTrue = true; }, 500);
}

app-blank.component.html

{{isTrue}}

This is a blank component.

isTrue always false and paragraph not rendered. If you hover mouse to any link or area then isTrue property value changes to true and paragraph also will render.

Please, check this and contact me as soon as possible.

It works! Thanks

Hello, first of all, congrats for your theme, realy nice, i loved it…

In this v8 version i had a problem navigating to dashboard, or sessions pages, i was taking a redirect to home always, to make it possible i needed to remove:

{ path: ’’, redirectTo: ‘home’, pathMatch: ‘full’ }, { path: ‘home’, loadChildren: () => import(’./views/home/home.module’).then(m => m.HomeModule), data: { title: ‘Choose A Demo’ } },

another problem, i was using your angular v7 version, now i am trying to update to angular v8 downloading your update, but my url is getting a hashtag always… something like, localhost:4200/#/dashboard i need it to be localhost:4200/dashboard, like in your v7 version that i was using.

thanks .

Hello, about the first issue, i was trying to access dashboard and sessions routes, but i was getting redirected to home…

when I set useHash to false, as you said, solved both problems, thanks.

You should consider setting useHash false as default in the theme.

Another thing I wanted to discuss about is the use of perfect scroll, is there any specific reason why you use it? Is it to support very old browsers?

thanks

Actually perfect scrollbar is only used for aesthetic purpose, you can disable this if you want. Thanks!

in fact I had already removed it, I am speaking this more as an advice for you to improve your base theme.

thanks for the help.

I’m having a problem with change detection, it does work when i call it explicitly, but for mt project i need it to work constantly.

You can disable manual change detection by commenting line 19 in ”/shared/components/layouts/admin-layout/admin-layout.component.ts”

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