219 comments found.
Hi, look like awesome, where can I see RTL demo version?
clink on settings buttons at bottom right corner then scroll down to bottom, you’ll see RTL option there. Thanks!
Hi Rafi, Is there any functions available for the data on a table such as: sorting, filter, grouping, export, etc. Thanks for your response.
Hi, ngx-datatable has sorting & filtering but I’m not sure about grouping & export.
Here is the data table documentation https://swimlane.github.io/ngx-datatable/
Data path ”.builders[‘app-shell’]” should have required property ‘class’. How to fix this error ?
Can you provide a screenshot? here is my email mhrafi.dev@gmail.com
Hi mh_rafi, i just fixed this error by changing ”@angular-devkit/build-angular”and ”@angular/cli” versions in package.json file.
Thanks for your response. Have a nice day !
Great, Thanks!
Hi, how are you? its possible to get a skeleton proyect without all the demos. i want empty proyect and have the posibility to add only what i need, for example in some cases no sidebar.
cheers!!!
You can delete everything in views folder & you will have skeleton project.
For removing sidebar you need to edit this file “shared/components/layouts/admin-layout-sidebar-compact/admin-layout-sidebar-compact.component.html”
Thanks
Hello, what the different between this template and this https://themeforest.net/item/gull-bootstrap-laravel-admin-dashboard-template/23101970?s_rank=4
I thought I bought the Angular 7+ ones but didn’t know there are two GULL templates and end up bought the wrong one.
If you have bought this template https://themeforest.net/item/gull-bootstrap-laravel-admin-dashboard-template/23101970
You’ll also find the angular version in downloaded file.
Thanks!
Anyone tried to use / install it with plesk? Because there is no documentation for that.
Hi, this is a standard angular project. You can ask assistance (how to install nodejs and angular) on plesk forum or from plesk support. I just searched on google “plesk angular” and found this https://talk.plesk.com/threads/angular-install.345792/
Hello, does this theme include Lazy loading?
Yes, This template includes Lazy loading.
Hello, can you please add angular 8 support?
yeah, I’m going to update to Angular version 8 soon, Hopefully next week.
Hello, Please i created a new module and component in the view folder and have added it route to my app.routing.ts file I need to add a menu but the menu is throwing error
ERROR TypeError: Cannot read property ‘name’ of undefined at Object.eval [as updateRenderer] (SidebarCompactComponent.html:37) at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458) at checkAndUpdateView (core.js:19833) at callViewAction (core.js:20069) at execComponentViewsAction (core.js:20011) at checkAndUpdateView (core.js:19834) at callViewAction (core.js:20069) at execComponentViewsAction (core.js:20011) at checkAndUpdateView (core.js:19834) at callViewAction (core.js:20069)
And the menu got scattered whenever i access the route Here’s my configuration
adminMenu: IMenuItem[] = [
{
name: 'Dashboard',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
type: 'dropDown',
icon: 'i-Bar-Chart',
sub: [
{ icon: 'i-Clock-3', name: 'Dashboard', state: '/systemadmin/dashboard', type: 'link' },
{ icon: 'i-Clock-4', name: 'Version 2', state: '/dashboard/v2', type: 'link' },
{ icon: 'i-Over-Time', name: 'Version 3', state: '/dashboard/v3', type: 'link' },
{ icon: 'i-Clock', name: 'Version 4', state: '/dashboard/v4', type: 'link' },
]
},
{
name: 'Doc',
type: 'extLink',
tooltip: 'Documentation',
icon: 'i-Safe-Box1',
state: 'http://demos.ui-lib.com/gull-doc'
},
{
name:'Systemadmin',
type:'dropdown',
description:'System administrator link',
icon:'i-home',
sub:[
{ icon: 'i-home', name: 'Systemadmin', state: '/systemadmin/dashbaord', type: 'link' },
]
}
];
Here’s my app.routing.ts file
{ path:’’, component:AdminLayoutSidebarCompactComponent, children:[ { path:’systemadmin’, loadChildren:’./views/system-admin/system-admin.module#SystemAdminModule’ } ] },
Do you have child route for SystemAdminModule? without child route this won’t work
Yes
menuItems = new BehaviorSubject<IMenuItem[]>(this.defaultMenu);
// navigation component has subscribed to this Observable
menuItems$ = this.menuItems.asObservable();
Hi, I changed the default purple to blue theme, but the chart color do not change. e.g pie chart , line charts and others. How can I go about that?
Hi, Chart colors are coming from js options(same options form where data is coming). You need to update the value of js option in component.
Thanks!
Okay, Thanks
Hi,
Your basic form demo shows vertically aligned radio buttons. Can you please help me with aligning radio buttons horizontally?
Many thanks.
You can put radio buttons in a div and use “d-flex flex-row” classed like this <div class="d-flex flex-row">Radio buttons.....</div>
Any way to make the submenu pinned (always visible) on the Angular bootstrap theme?
yeah, you need to change a bit of css.
Any plans to do React version of this?
Yeah, I’ll build a react version. Can’t say exact release time, hopefully within few months.
Cool, thanks!
Tell me how to connect to OpenCart and make the integration? Worth buying? if not, what do you recommend?
Can you answer the mail dossov@capital-holding.kz?
You can but it won’t be cost efficient. Also you will face a lot of issue when angular & openCart will release new updates. If you want to use openCart you should buy a openCart template.
Thanks
It is very necessary, when to expect updates?
Hi, i am new to Angular. It’s a nice theme, I hope to be able to use it. I want to style each sidebar element. For example I want to add a color for Dashboard text and background and another for UI Kits and also change the color when hover, focus and active. How can I achive that? I found _layout-sidebar-large.scss, but the changes made there are for all elements of the sidebar together. Second question is how can I add some images to the secondary sidenav and then drag and drop them to main content in the right. Third question: I want to use material design icons in the sidenav, how can I do that? Thank you!
1. You need to add a new property at IMenuItem in navigation.service.ts . That property will store different class names for different menu items, these classes needed to be defined in css also needed to be added to each menuitem in sidebar-large.component.html or sidebar-compact.component.html
2. You need to use https://material.angular.io/cdk/drag-drop/overview or any drag and drop third-party library.
3. add this in head section of index.html <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
use icon like this
<i class="material-icons">face</i>
For 1 & 2 you need heavy customization. You can hire an expert for that. Good luck!
Hi, Two custom themes are included.
lite-purple lite-blue These files are located in src/assets/styles/themes
Open _custom.scss (Location: src/assets/styles/themes/lite-purple/_custom.scss) and and change the color variables
I can’t find the location of the file _custom.scss in the folder I downloaded.. Please how can I customize the color variables?
Hi, You need to update “src/assets/styles/themes/_lite-purple.scss”. Few day ago I changed folder structure a bit. I’m going to update documentation.
Thanks!
Hi, I just brought this beautiful theme. I just need help in creating new component. I’m trying to create customer-list & customer-details. first I run ng g component views/customer/customer-list and ng g component views/customer/customer-details What i’m lost at is how do I create a Files main menu and Customer-list sub-menu. Where should I put the menu entry and what other files should I create for this to work. Thanks in advance!
You need to create customerModule in views folder before creating components “ng g m views/customer—routing”. Please learn about “angular lazy loading module”.
And side menu items are served by “navigation.service.ts”. Please check out documentation http://demos.ui-lib.com/gull-doc/#navigation
Thanks
Thanks for the reply. I would like to add a floating vertical bar on the right. Initially it will contain icons such as Calendar & Chat. When a user click on it, A container will expand (preferably with animation) and will container Calendar/chat. What would you suggest how I would implement this?
Take a look inside <app-customizer> component and it’s css “assets/styles/app/globals/components/_customizer.scss”. I’m toggling “open” class onClick.
You need to create a component in shared/components folder and add that component in “admin-layout-sidebar-large.component.html” or “admin-layout-sidebar-compact.component.html” like <app-customizer>
Thanks!
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListingComponent } from './listing/listing.component';
const routes: Routes = [
{
path: 'listing',
component: ListingComponent
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductRoutingModule { }
on product.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListingComponent } from './listing/listing.component';
import { ProductRoutingModule } from './product-routing.module';
@NgModule({
imports: [
CommonModule,
ProductRoutingModule
],
declarations: [ListingComponent]
})
export class ProductModule { }
then I added on navigation.service.ts
{
name: 'Products',
type: 'link',
icon: 'i-Plane',
state: '/product/listing',
},
and also added this on app-routing.module.ts
{
path: 'product',
loadChildren: './views/product/product.module#ProductModule'
},
when I tried to access http://localhost:4200/product/listing, it redirected me to
http://localhost:4200/product/others/404.
Pls help
Have you fixed the issue? you can add me to your repository, my github mh-rafi, I can take a look.
Hi, I just purchased Gull Admin Dashboard. great work thanks. i need RTL version but i couldn’t find any help about that in documents. it is there in online version but in download files i didn’t see setting about RTL version. could you please help to set panel to RTL version tnx
You just need to add dir=”rtl” to html tag <html dir="rtl">
Thanks
Hi There
I need help, I am creating new modules & components, So know I want to remove Sidebar, main menu and edit footer, like SignIn module
You need to create new layout inside “shared/components/layouts/”, your new layout component template must have <router-outlet></router-outlet> .
Then inside app-routing.module.ts you need to add new route. Something like this
{
path: '',
component: NewLayoutComponent, // comes form layout folder
children: [
{
path: 'new-route',
loadChildren: './views/new/new.module#NewModule' // your new lazy loaded module
}
]
}
Thanks
Hello,
Can you recommend me good tutorials for Angular module because I am new to Angular? First I need to know how can I add a new form and refer it to the navigation panel.
You can find on youtube “angular lazy loading tutorial”.
First need to create a module and it’s child routing in “views” folder. Run “ng g m views/newModule—routing”
Add a component in “views/new-module”. Run “ng g c views/new-module/newComponent” then add this component to new-module-routing.module.ts.
Now you have to load this module in parent routing “app-routing.module.ts”.
To appear that new route on navigation you need to add an IMenuItem in defaultMenu array inside “shared/services/navigation.service.ts”
Your IMenuItem will be look something like this
{
name: 'new-route',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
type: 'link',
icon: 'i-Bar-Chart'
},
Thanks