822 comments found.
Getting this error: ERROR in src/app/views/dashboard/analytics/analytics.component.ts(40,23): error TS2339: Property ‘onThemeChange’ does not exist on type ‘ThemeService’
Also Tinycolor2 package was not included in packages.json
Tinycolor2 is in package.json. are you using seed project?
Hi, using seed-project, I am not able to set the sidebar color to slate. Kindly let me know how to do it.
UPDATE: solved by adding some colors from full->_colors.scss
Great! 
Hi, I wish to move breadcrumb to the top navbar alongside sidebar toggle. Currently when I insert <app-breadcrumb> in navbar, nothing is shown in breadcrumb. Please suggest how can I do it.
Hi, open “breadcrumb.component.ts” and add this line inside constructor this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
something like this
constructor(
private router: Router,
private routePartsService: RoutePartsService,
private activeRoute: ActivatedRoute,
public layout: LayoutService
) {
this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
this.routerEventSub = this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((routeChange) => {
...
Thanks
Hi, Thanks for the reply, but I am using seed-project which already has the above code in breadcrumb component. The issue is when I move the <app-breadcrumb> component from admin-layout component to header-side component, I can see the <app-breadcrumb> in the generated html but there is no content in it. Kindly suggest.
The breadcrumb component does not have that line in constructor, that’s why you don’t see any content when move that to header.
this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
UPDATE: sorry my bad, I think layout component does not get navigation events for child routes, let me check if I can solve this.
The above line is also in the constructor, below is the breadcrumb component constructor code;
this.routerEventSub = this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((routeChange) => {
this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
// generate url from parts
this.routeParts.reverse().map((item, i) => {
item.breadcrumb = this.parseText(item);
item.urlSegments.forEach((urlSegment, j) => {
if(j === 0)
return item.url = `${urlSegment.path}`;
item.url += `/${urlSegment.path}`
});
if(i === 0) {
return item;
}
// prepend previous part to current part
item.url = `${this.routeParts[i - 1].url}/${item.url}`;
return item;
});
});
SOLVED: changed the breadcrumb component as you suggested (removed router event subscribe). Thanks for the support.
If I mean that the columns are cut, not the table in general. In the tabal that I have is the scrol horizontaly the vertial, but the full name column is cut.If I mean that the columns are cut, not the table in general. In the tabal that I have is the scrol horizontaly the vertial, but the full name column is cut.
I just added a demo of adding horizontal bar to table. please check http://egret.ui-lib.com/material/table
My table does not fit on the screen. so some columns appear cut.
You can enable horizontal scrollbar of ngx-datatable, if you are using mat-table you can follow this example to enable horizontal scrollbar https://stackblitz.com/edit/angular-mdxik6-gnpzuh
ngx datatable does not show the data is automatically loaded from the service, so move the cursor to appear.
Hi, You need to use changeDetection. Please check this previous comment https://themeforest.net/item/egret-angular-4-material-design-admin-template/20161805/comments?page=25&filter=all#comment_22326113
Responsive Issue
I brought your theme, which looks like very nice. I have an issue with the material table in responsive mode. issue description – when Make the template in mobile view the material colum name changed to ID, NAME, COLOR, COLOR, COLOR. But I have a different Colum name.which is correct in normal view, but in the mobile view, it looks like this “ID, NAME, COLOR, COLOR, COLOR.”
You can delete all the css from src/assets/styles/scss/components/_mat-table.scss, and table structure will be same on mobile
thanks, .its worked. but now I can’t get the table rows one below the other as in previous in mobile view.
Actually that wasn’t the standard view for table. it’s better if you use horizontal scrollbar. please check the first example and code http://egret.ui-lib.com/material/table
Hello rafi,
getting 404 error while conecting service call, its working in Postman, i removed the InMemoryWebApiModule and InMemoryDataService from app.module, stil tis same, could you please help to solve this ?
If you remove InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true}) from app.module, service call should hit your server. Have checked in browser console’s network tab that request URL is correct.
Yes Its correct , this is the function which i use for POST
this.authservice.userAusthentication(this.signupForm.value).subscribe((data: any) => {service call//////
userAusthentication(obj){
var data=obj;return this.http.post(this.baseApiUrl+'/api/user/authenticate',data,httpOptions)}Thanks, issue solved , spell mistake in parameter, thanks for support.
Great!
hello rafi,
i am unable to access github, no recived email for access, please help
Have you requested github access here? https://ui-lib.com/github-access/
yes i requested , but not received any mail or no any action ..
yes i requested , but not received any mail or no any action ..
I don’t see your submitted request. can you give me your github username?
faisalkkv
Please check https://github.com/mh-rafi/egret-angular
hello rafi
i am not receiving github access email when i register. please helpHello rafi,
Could you please tell how can i use http interceptor, any ref link ?
You can follow this article https://medium.com/better-programming/angular-http-interceptors-what-are-they-and-how-to-use-them-52e060321088
Hi,
I am trying to make my mat-table responsive just like your material-table page. http://egret.ui-lib.com/tables/mat-tablehowever on a mobile screen all the columns are squashed to the right. when I delete the css in the _mat-table.scss the first two columns appear but I can’t scroll horizontally.
I would like to replicate the behaviour of the material-table page. Can you confirm how I can replicate this?
thanks.
Thanks for the response.
How did you accomplish the behaviour in your material-table page? The table columns on a desktop appear as rows when on a mobile screen.
That table is made responsive by _mat-table.scss, you can inspect that file.
Really? Then I must be doing something wrong. It pushes everything to the right except the first column. When I clear out the _mat-table.scss file it looks better but not converting the columns to rows. So somehow the _mat-table.scss does not work for my table.
Horizontal scrollbar is better on mobile. I’m going to follow this example for mobile https://stackblitz.com/edit/angular-mdxik6-gnpzuh
thanks for the link.
For anyone else that might want to replicate the behaviour of material-table remember to use data-label. This is required.
In my case, I ended up following the link mentioned above. Horizontal scrolling was much better for my situation.
Hi, I have integrated an http interceptor to avoid repeating the base url declaration at each service request, but failed to find the location where to fix the following Request URL: http://localhost:5000/api//assets/i18n/en.json, please kindly show me where I can find it.
that request is made by ngx-translate, you need to tell interceptor when the request url have assets/i18n don’t add /api in front of that.
It works only if I specify the file name at the end like this: /assets/i18n/en.json, and it is also needed for other languages files, would it be fine if I exclude the whole assets folder content, I have tried /assets/i18n/.json and /assets/i18n/.* and /assets/i18n/** and /assets/i18n/, but they don’t work.
You can check request url has ”/assets” if(req.url.indexOf("/assets") !== -1) { return next.handle(req); }
Hi Rafi, there is a problem with google maps since a couple of days… Do you have a quick fix for this issue ? Many thanks
I checked that. I need to pay google for maps api. I just finished free quota.
Hi, I receive a tslint warning pointing to navigation.service.ts IMenuItem array: Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface. (member-ordering). Please how can we put this array in an external json file and access it from the navigation service ?
You can keep external json file inside assets folder then get the json content by HTTP GET call. You can also keep the navigation data in your server.
Yes that what I meant, so can you please share a snippet to read the navigation data from a json file inside assets folder ?
constructor(private http: HttpClient) {
this.http.get('/assets/navigation.json').subscribe((data) => {
this.menuItems.next(data)
})
}
It worked, thanks !!
It works but with noticeable decrease loading performance, menu is reloaded with some delay each time a page is refreshed.
delay is because http request takes some time. And the menu reloading problem I can not understand what happening if don’t see the demo. Can you share demo in my email?
Hi, Newly added modules are not shown inside the template layout, they look independent, no top bar and no side bar are shown. Please how can I initiate the new modules to integrate the template layout ?
Okay, I just saw that it needs to be under AdminLayoutComponent in app.routing, but do I need to put HomeModule (Landing page) under AuthLayoutComponent ?
Hi, You don’t need to put HomeModule under authLayout or any other module. just add that inside rootRouterConfig.
Hi, As soon as I add a module that I had developed earlier, top bar buttons of the landing page start to have blue border line around them. I guess that this happens because the module uses Bootstrap. Please kindly either update the template to avoid conflicting with Bootstrap or provide me with a workaround for this situation. I cannot upload screenshot here, but I’ll send it in your email address.
Have you managed to solve this issue? you can share screenshot here https://prnt.sc/
Still could not fix it, here is the screenshot with the blue line that surrounds every clicked button: https://prnt.sc/pe2x28
maybe bootstrap added that outline or border
add this css
.hometop-btn {
outline: none !important;
border: none !important;
}
I have added your css to header.component.scss, and now the landing page is showing correctly, but the Egret buttons still have the same issue, where can I apply the same css ?
You need to target material buttons, try adding this css
.mat-button, .mat-raised-button, .mat-stroked-button, .mat-icon-button {
outline: none !important;
border: none !important;
}
I’ve entered the above code and sent you the result by mail, please kindly check it and advise what’s remain to do.
Documentation is scarce. And when you buy it says “well documented.”
Hi, we are here to help
ok. Thanks.
error when add a datatable material angular v7.3.1 (https://v7.material.angular.io/components/table/examples).
ERROR Error: Uncaught (in promise): Error: Template parse errors: Can’t bind to ‘dataSource’ since it isn’t a known property of ‘table’. (“
Hi, You may need to initialize “dataSource” inside ngOnInit() method
thanks, work now.
I am testing this them and on my laptop touch screen pc, the side menu does not scroll up or down.
seems like it’s a perfectScrollbar(which is used for sidebar scroll) issue, It works fine on mobile.
This item was featured on ThemeForest
Elite Author
Contact the Envato Market Help Team
