Hi
I don't need the right sidebar, I removed the mk-layout-sidebar-right tag from my app.component.html but how do I remove the gears icon?

How to hide and show menu item with role user ? please help me .

Hi,

I am getting below error while marked layout as fixed,

ERROR TypeError: Cannot read property 'nativeElement' of undefined
at HeaderService.get [as offsetHeight] (fe-common.es5.js:795)
at SidebarLeftComponent.push../node_modules/@ps/fe-common/esm5/fe-common.es5.js.SidebarLeftComponent.setSidebarHeight (fe-common.es5.js:2058)
at SafeSubscriber._next (fe-common.es5.js:1713)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at DistinctUntilChangedSubscriber.push../node_modules/rxjs/_esm5/internal/operators/distinctUntilChanged.js.DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:54)
at DistinctUntilChangedSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)

Can you please help me to fix this issue ?

If I add programatically a link, and then I navigatee trough the menu, the links are not selected.

This is how a selected links looks like( look at the "Dropdown" link:

But if you add a link trough the LayoutStore, then any link you select does not appear to be selected anymore.

I tink it is related to #20

I updated the codesandbox: https://codesandbox.io/s/j7nz8j6pnv
Notice that "Get Started: link does not appear to be selected after the menu is added back

Hi,

First of all, nice work overall :).

I just got one issue when trying to set isSidebarLeftxxx in the configuration:

export var adminLteConf = {
...
isSidebarLeftCollapsed: true,
isSidebarLeftMini: true,
sidebarLeftMenu: [
...
]
};

I try to set the left sidebar collapsed by default, but it seems the event is not raised in the layout store (maybe the config is loaded before the subscribe handlers are binded ?) so the class "sidebar-collapse" is not set. If i programmatically do it with the layout store, it does not work on OnInit() method, but it works otherwise (or if a put a setTimeout() in my OnInit() )
Any advice on why it does not work with the configuration file?

Thanks

Path for ionicons is "node_modules/ionicons/dist/css/ionicons.css", not "node_modules/ionicons/css/ionicons.css" as described on the "Get started" page.

There is also a "min" version available that might is preferable?

Hi mika-el

Is there a way to have the parent menu in the sidebar-left component activated
when accessing its child url that is not a fixed value?

Hi,

There is a typo in the version in the package.json file
"version": "3.1Ò.0"

Estou tentando utilizar seu template porem estou me deparando com este erro.

When i add bootstrap model it's not working

Using the version 1.2.6 the Layout.Store cannot be injected anymore.

Did something change and I don't know about

Code Sandbox: https://codesandbox.io/s/1qw7kk2x7l

I noticed that when the sidebar is mini, it does not open the submenus equal to the project

Hi
In the Sidebar left menu, is it possible to have a label with children without the accordion/collapse?
If so, how?

I cannot make this library work with angular 11. I always get the error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~11.0.9" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^7.2.3" from [email protected]
npm ERR! node_modules/angular-admin-lte
npm ERR!   angular-admin-lte@"~4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry

I am using the latest version "angular-admin-lte": "4.0.0", that is in npm packages.

Am I missing something ?

My scenario is - i can not have configured all the sidebar options from the beginning. I have to add child menus to parent once user navigate to parent child.

How do i achieve that?

Hi,

is there away to disable left sidbare?
I want only a menu in the header.

Cant capture mk-tabs on click event

Hi,
How can i manage the logo's link? it doesn't say in the configuration page.

It's possible to create a dynamic sidebar links?

First, thank you for this implementation, it is really nicely done.

I am trying to add a menu with submenu on the left sidebar like so:

menuItems.push({
      label: 'abc', iconClasses: 'fa fa-newspaper-o',
      children: [ { label: 'X', route: 'contact' },  { label: 'Y', route: 'contact' }  ]
    });
  this.layoutStore.setSidebarLeftMenu(menuItems);

If I add this menu item to the layout store, then if you click on the apc to expand the menu, the page just reloads.

I think this may be a bug

How do I log in?

Hello
I want to use the login screen but it does not work.
Should LayoutModule be used only in app.modules.ts?
Can not you use it like this?

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

Hi,

I've changed the way my custom layout works, the session layout is under the route /session in separated module, while all the other pages are under de the / route, this has cause the menu not being active anymore and only works if I set the routes this way, example:
{label: 'CLIENTS', route: '/clients', iconClasses: 'fa fa-user' },
{label: 'PROJECT_LEADERS', route: '/project-leaders', iconClasses: 'fa fa-trophy' },

If I use the config like route: 'project-leaders', the link will be active in the right route but only work in the / route, in any other route, the links will be like http://localhost:4200/clients/(project-leaders)

Is there any way to make it work again?

is that possible to change this icons. I'm having a issue with the version of fontawesome. I think that it's using version 4 and i have to use version 5. There is some way to change this icons?

I am not able to Build dist and getting below error.

Hi,

First of all - Great work with with the angular-admin-lte. I use admin-lte from before, but are quite new to angular. Beginning to get it now.

I have downloaded and run this repo from git source, and everything works well. In "Get started" you say that I can include this library to an existing angular project. I have tried to do this.

When I try to add "Dependencies" to the "styles" object in "angular.json" and then run "ng-serve" I get message about paths not found for these dependencies.

I figured that the following packages was missing:

• bootstrap-css-only
• font-awesome
• ionicons
• admin-lte-css

Of course, when installing them manually, I can build successfully.

Question 1)
Could not these packages be added as dependencies to the npm package "angular-admin-lte" ?

Question 2)
It seems that this git repo is not the actual repo for the npm package it self?
I might like to fork and add pull requests. Is that possible?

Best regards,
Christian

Is there a way to add AdminLte styles modal?

AdminLte has so many components, but angular-admin-lte seems to provide parts of them.

Does it come up with soon?

Thanks in advance.

Currently the html template for header component looks like this

<header #headerElement class="main-header">
  ...
  <nav *ngIf="isSidebarLeftToggle" class="navbar navbar-static-top">
    <a  #sidebarLeftToggleElement href="#" class="sidebar-toggle">
      ...
    </a>
    ...
    <ng-content></ng-content>
  </nav>
</header>

I think it would make more sense to put *ngIf="isSidebarLeftToggle" on the #sidebarLeftToggleElement itself like this

<header #headerElement class="main-header">
  ...
  <nav class="navbar navbar-static-top">
    <a *ngIf="isSidebarLeftToggle" #sidebarLeftToggleElement href="#" class="sidebar-toggle">
      ...
    </a>
    ...
    <ng-content></ng-content>
  </nav>
</header>

I would like to display the navbar and content without having to have the left toggle displaying since I wrote my own custom sidebar toggle in the sidebar itself.

What's step for update angular 9?

Apologies, I accidentally closed the original ticket.

Hi
I don't need the right sidebar, I removed the mk-layout-sidebar-right tag from my app.component.html but how do I remove the gears icon?

I'm trying to use input text:
<mk-input-text name="input-name" minlength="4" maxlength="5" required placeholder="placeholder"> <mk-input-text-label>Input label</mk-input-text-label> </mk-input-text>

And getting the following error:
ERROR in : 'mk-input-text-label' is not a known element:

1. If 'mk-input-text-label' is an Angular component, then verify that it is part of this module.
2. If 'mk-input-text-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("ext name="input-name" minlength="4" maxlength="5" required placeholder="placeholder">
   [ERROR ->]Input label
   
   <button")
   : 'mk-input-text' is not a known element:
3. If 'mk-input-text' is an Angular component, then verify that it is part of this module.
4. If 'mk-input-text' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   
   [ERROR ->]
   ")

InputTextModule is loaded.

ERROR in demo/src/app/src/breadcrumbs/breadcrumbs.component.ts(2,30): error TS2307: Cannot find module 'Rxjs/Subscription'.
demo/src/app/src/tabs/tabs.component.ts(3,30): error TS2307: Cannot find module 'Rxjs/Subscription'.
src/breadcrumbs/breadcrumbs.component.ts(2,30): error TS2307: Cannot find module 'Rxjs/Subscription'.
src/tabs/tabs.component.ts(3,30): error TS2307: Cannot find module 'Rxjs/Subscription'.

Rename modules to 'rxjs/Subscription'.

on the left side, like the "new" at the "get started" in the demo page

I am running the application and on the system users list screen, it is displaying the following error bellow, how to solver:

MaterialbarComponent.html: 3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'background-color: undefined'. Current value: 'background-color: # da4733'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?     at viewDebugError (core.js: 22206)     at expressionChangedAfterItHasBeenCheckedError (core.js: 22183)     at checkBindingNoChanges (core.js: 22487)     at checkNoChangesNodeInline (core.js: 35239)     at checkNoChangesNode (core.js: 35212)     at debugCheckNoChangesNode (core.js: 36173)     at debugCheckRenderNodeFn (core.js: 36105)     at Object.eval [as the updateRenderer] (MaterialbarComponent.html: 3)     at Object.debugUpdateRenderer [as the updateRenderer] (core.js: 36090)     at checkNoChangesView (core.js: 35047)

I have this route config.

when i write routes with setting customLayout = false, constructors of my route components are called twice

when called route, constructor of component is called twice

Help me please

For example.

const routes: Routes = [
    {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
    },

];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}


@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'user',
                loadChildren: './user/user.module#UserModule',
            }
        ])
    ],
    exports: [RouterModule]
})
export class DashboardRoutingModule {
}

@Component({
  selector: 'app-create-user',
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit {

  public sub: Subscription;

  constructor(private http: HttpClient) {
    console.log('test string from create-user-component'); is called twice
  }

  ngOnInit() {

  }
 
}


@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {

  constructor() {

    console.log('test string from user-list-component');  //is called twice
}

  ngOnInit() {
  }

}

@NgModule({
    imports: [
        CommonModule,
        UserRoutingModule
    ],
    declarations: [CreateUserComponent, UserListComponent]
})
export class UserModule {}

const routes = [
    {
        path: 'create',
        component: CreateUserComponent, // route: sitename.com/dashboard/user/create
    },
    {
        path: 'list',
        component: UserListComponent // route: sitename.com/dashboard/user/list
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class UserRoutingModule {
}

@NgModule({
    imports: [
        CommonModule,
        DashboardRoutingModule
    ],
    declarations: []
})
export class DashboardModule {
}

I configured the LayoutModule with menu entries but it doesnt work for me.
This is my config:

export var adminLteConf = {
  skin: 'blue',
  layout: 'fixed',
  sidebarLeftMenu: [
    { label: 'Navigazione', separator: true },
    { label: 'Home', route: '/', iconClasses: 'fa fa-th', separator: false },
    { label: 'Ingredienti', route: 'ingredients', iconClasses: 'fa fa-th', separator: false }
  ]
};

How to set user name after login on side bar and header. Not able to set name with subscription of event on HeaderInnerComponent .

when i used a http request component,it will be throw an error message:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'background-color: undefined'. Current value: 'background-color: #da4733'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

seems like from ng:///MaterialBarModule/MaterialbarComponent.html that display in my develop tool's console.

but if i remove the http request .subscribe(void) code,the error will remove and not errors anymore.

is that Materialbar dynamic created conflict with http request observable object created?

HI,

I have a question.

[clsss=sidebar-right-toggle] button Is there a setting to hide?

First of all thanks for this masterpiece implementation of lte! It's definitely best one so far.
Well.. you know we are all developers and we often use use browser's dev tool.
Sometimes i'm facing the issue in the picture and i don't have any pattern how and when it happens.
I press F12 to show dev tool and again press F12 to hide it but footer keep staying up like in the picture.

Thanks in advance.

Is there a way to add support for animation in router-outlet?
while on clean app animations work great, if I try to add animations to the router-outlet it's not working...

Allow rtl support to make the left side bar as the right and vice versa

First of all, great implementation of Admin LTE in Angular.

I'm having some problems with the left side bar menu.

When I click in a children element, the menu collapse and it isnt showing the active item either.

this is my admin-lte.conf.ts

export let adminLteConf = {
    skin: 'blue-light',
    layout: 'normal',
    sidebarLeftMenu: [
        {label: 'MAIN NAVIGATION', separator: true},
        {label: 'Home', route: '/', iconClasses: 'fa fa-home'},
        {label: 'Plants', iconClasses: 'fa fa-bolt', children: [
            {label: 'Dashboard', route: '/plants/dashboard'},
            {label: 'Management', route: '/plants/management'},
        ]}
        {label: 'SETTINGS', separator: true},
        {label: 'App Settings', route: '/', iconClasses: 'fa fa-sliders'},
        {label: 'Profile', route: '/', iconClasses: 'fa fa-user'}
    ]
};

And the Routes are configured like this:

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Home'
    },
    children: [
      {
        path: '',
        component: HomeComponent,
      },
      {
        path: 'plants',
        data: {
          title: 'Plants'
        },
        children: [
          {
            path: 'dashboard',
            loadChildren: './plants/dashboard/dashboard.module#DashboardModule',
            data: {
              title: 'Dashboard'
            }
          },
          {
            path: 'management',
            loadChildren: './plants/management/management.module#ManagementModule',
            data: {
              title: 'Management'
            }
          },
        ]
      }
    ]
  },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule',
    data: {
      customLayout: true
    }
  }
];

When Sidebar menu is on mini mode, it shouldn't behave like in the pic below for submenus.
@CarlesLopezMagem do you have any ide bro?

Hello Sir,
I found your code after many googling on AdminLTE theme with angular your work is so good and code structure and code is clean for understanding.
I implement your code in ASP.NET with Angular either 5.0.0 or 4.2.3. after configuration project when add first layout with component it perfectly work but in dependencies issue occurring. Please guide for resolve this type of error.

ERROR Error: No provider for WrapperService!
at injectionError (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:12239)
at noProviderError (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:12277)
at ReflectiveInjector_.throwOrNull (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:13719)
at ReflectiveInjector.getByKeyDefault (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:13758)
at ReflectiveInjector.getByKey (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:13690)
at ReflectiveInjector.get (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:13559)
at resolveNgModuleDep (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:20603)
at NgModuleRef_.get (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:21685)
at resolveDep (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:22188)
at createClass (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:22052)

Hi 👍
I want to create a menu that is displayed according to user rights.
Is there a way to hide the left menu?

Hi,
I have tested demo in Internet Explorer, however no pages are rendering for IE.
Please let me know if there is any solution to this.

Regards,
Suhas

I am using your angular-admin-lte for my project. It is the best angular port for admin-lte I can find now. Now Admin-lte 3 has just been released its alpha version. Do you have any plan for supporting Admin-lte 3.
I am looking forward to see new version. Thank you very much. You saved my day.