coreui / coreui-angular

CoreUI Components Library for Angular https://coreui.io/angular/docs/

CoreUI for Angular

Angular Components Library built on top of Bootstrap 5.3 and TypeScript.
Explore CoreUI for Angular docs »

Report a bug · Request a feature · Blog

Status

Table of contents

• Status
• Table of contents
• Quick start
  • Prerequisites - Node.js - Angular CLI
  • Installation
    • CoreUI CSS files
      • Installation
      • Basic usage
    • Bootstrap CSS files
      • Installation (optional)
• Templates
• Bugs and feature requests
• Documentation
• Frameworks
• Templates
• Contributing
• Community
• Versioning
• Creators
• Support CoreUI Development
• Copyright and license

Quick start

Prerequisites

Before you begin, make sure your development environment includes Node.js® and npm package manager.

Node.js

Angular 17 requires Node.js LTS version ^18.13 or ^20.9.

• To check your version, run node -v in a terminal/console window.
• To get Node.js, go to nodejs.org.

Angular CLI

Install the Angular CLI globally using a terminal/console window.

npm install -g @angular/cli

Installation

Several quick start options are available (pick one):

• Download the latest release
• Clone the repo: git clone https://github.com/coreui/coreui-angular.git
• Install with npm: npm install @coreui/angular
• Install with yarn: yarn add @coreui/angular

Read the Getting started page for information on the framework contents, templates and examples, and more.

CoreUI CSS files

Installation

npm install @coreui/coreui --save

Basic usage

@import "@coreui/coreui/scss/coreui";

Bootstrap CSS files

Installation (optional)

npm install bootstrap

Templates

• CoreUI Free Angular Admin Template
• 💪 CoreUI Pro Angular Admin Template

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

The documentation for the CoreUI & CoreUI PRO is hosted at our website CoreUI for Angular

Frameworks

CoreUI supports most popular frameworks.

• CoreUI for Bootstap(Vanilla JS)
• CoreUI for React
• CoreUI for Vue

Templates

Fully featured, out-of-the-box, templates for your application based on CoreUI.

• Angular Admin Template
• Bootstrap Admin Template
• React Admin Template
• Vue Admin Template

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.

• Read and subscribe to The Official CoreUI Blog.

You can also follow @core_ui on Twitter.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Łukasz Holeczek

• https://twitter.com/lukaszholeczek
• https://github.com/mrholek

Andrzej Kopański

• https://github.com/xidedix

The CoreUI Team

• https://github.com/orgs/coreui/people

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.

Platinum Sponsors

Support this project by becoming a Platinum Sponsor. A large company logo will be added here with a link to your website.

Gold Sponsors

Support this project by becoming a Gold Sponsor. A big company logo will be added here with a link to your website.

Silver Sponsors

Support this project by becoming a Silver Sponsor. A medium company logo will be added here with a link to your website.

Bronze Sponsors

Support this project by becoming a Bronze Sponsor. The company avatar will show up here with a link to your OpenCollective Profile.

Backers

Thanks to all the backers and sponsors! Support this project by becoming a backer.

Copyright and license

Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the MIT License. Docs released under Creative Commons.

coreui-angular's Issues

AoT Support

I'm using version 2.0.0-beta.0 in my project, and am unable to build for the prod environment. I have also tried these commands in the sample project:

ng build --prod
ng serve --aot

Both result in this:

ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'AppBreadcrumbModule' was called.

Have any workarounds been identified for this?

Breadcrumb - Allow breadcrumbs without link

Hello,
I think it would be easy and useful to add a data flag to allow for breadcrumb sections that have no corresponding link (i.e. working as the 'last' element).

In the above example, the 'Settings' and 'User' navigation items from the left menu have no corresponding route, they are just navigation groups - so I wouldn't expect them to be links in the breadcrumb, just simple text.

I had a look at the code and it looks like a pretty simple improvement - I think I can supply a pull request for that if you prefer.

Thanks for your help,
Luca

License link leads to 404

Your license link in the readme (https://github.com/coreui/coreui-angular/blob/master/LICENSE) leads to a 404 page.

app-sidebar-nav-label.component sets an incomplete variant style

I think there's a small bug in app-sidebar-nav-label.component.ts, at this line:

    const variant = `text-${this.item.label.variant}`;
    classes[variant] = !!variant;

There, !!variant will always evaluate to true, because of the interpolated string. Consequence is that a dummy text- class will be added to the label items. Small bug, but easy to fix.

Cannot pass Query Params in nav

When passing Query param into url of NavData interface (_nav.ts) navigation fails with following error:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 's01%3Fel%3Dsu'
Error: Cannot match any routes. URL Segment: 's01%3Fel%3Dsu'

Problem is that parameter url is URL encoded.

navItems example:

export const navItems: NavData[] = [
  {
    name: 'Intro w query param',
    url: '/dashboard?p=something',
    icon: 'icon-home'
  }
]

app.routing.ts:

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: MyDashboardComponent },
];

Additional info:

• OS: Windows
• Browser: Chrome 79.0.3945.117
• coreui version: "@coreui/angular": "^2.5.2"

Similar Issue in coreui-react project: coreui/coreui-react#90
I also tried to provide url as object as suggested in issue above but doesn't work.

Disable a item in navIItems

How Can i disable a item in array navItems? I want see the item in menu, but this item need stay disable for user

Export AppSidebarNavLabelComponent

AppSidebarNavLabelComponent is not exported in the AppSidebarModule.

[ question / suggestion ] Flyout Menu Childrens on the XL Menu

Is it possible to set the big sidemenu to the same flyout childrens like the minimized sidemenu?

Result would be gcloud console like

Localizing the navigation?

Hallo,
how can I localize the navigation of the AppSidebarNav? I tried two approaches, but both failed:

• Create a new navigation-array. Through the data binding, this should fully replace all existing navigation items in the UI - but that's not the case: the new items are added to the existing items.
• Update the "name"-property of the existing navigation items in the array. This works for regular navigation items, but not for titles: the titles keep their previous text.

How can i disable/hide a single app-sidebar-nav-item?

Before opening an issue:

• Search for duplicate or closed issues
• Prepare a reduced test case for any bugs
• Read the contributing guidelines

When asking general "how to" questions:

• Please do not open an issue here
• Instead, ask for help on StackOverflow, IRC, or Slack

When reporting a bug, include:

• Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
• Reduced test cases and potential fixes using CodePen or JS Bin

When suggesting a feature, include:

• As much detail as possible for what we should add and why it's important to CoreUI
• Relevant links to prior art, screenshots, or live demos whenever possible

Additional css classes to NavBar Brand

Currently navbarBrandFull and navbarBrandMinimized have some properties exposed such as src, width, height, and alt. But what is missing in that list is additional classes. I wanted to make the brand logo image fluid. I tried to apply img-fluid class available in bootstrap to my logo but unfortunately it wasn't working. I investigated further and found out that fixed sizes can be set for the logo but not a class.

It would be great if you can expose the class property as well so we can add to what is currently set.

Loading buttons animation problem

https://coreui.io/angular/demo/#/buttons/loading-buttons

After recent updates it's likely that the animation such as expanding, sliding is not working.

All links to Angular2+ demo are broken, where to find it?

Is there any Angular2 online demo available? The links on https://coreui.io are broken, eg. :
https://coreui.io/demo/Angular2_Demo

Is there a PRO version for Angular2+?

Thanks

sidebar menu issue

only one dropdown should open. when I click any one dropdown another open dropdown should close
in sidebar

How to solve this issue

master branch is broken

Master branch is broken. "app" , app/views, app/containers folders are empty. It defaults to angular seed application.

Remove sidebar and aside menu toggle buttons.

I am not able to hide the sidebar and aside menu toggle buttons.

I tried <app-header></app-header> and <app-header sidebarToggler="false" asideMenuToggle="false" mobileAsideMenuToggler="false"></app-header> , but it doesn't seem to work.

Here is a screenshot:

Side bar menu link highlight not working

I am using

"@coreui/angular": "^2.2.0",
    "@coreui/coreui-pro": "^2.1.3",

and in side menu the currently selected menu item is not highlighted.
IOT Disc Agreement should be highlighted. but not working

When I debug that I found the active class is getting removed.

class="ng-star-inserted nav-link"

and the above code is blinking.

Please help. it's causing the problem of Highlight Menu Item and something like system slow.

app aside bar nav item icon not appeared

name: 'Ticket',
url: '/base',
icon: 'icon-puzzle',
children: [
{
name: 'Open',
url: '/base/breadcrumbs',
icon: 'icon-puzzle',
},
{
name: 'Close',
url: '/base/breadcrumbs',
icon: 'icon-puzzle',
},
{
name: 'In Progrss',
url: '/base/cards',
icon: 'icon-puzzle',
}

Sidebar not hiding when a menu link is clicked on mobile view

The sidebar does not auto-hide on mobile view when any of the menu links are clicked, and the user has to click the hamburger to hide the menu. That doesn't make for good user experience. Also, the current structure of the template doesn't make modifications to the sidebar (apart from styling) easier because of how its currently bundled as a node dependency. Making it a standalone component or module that can be easily modified to correct issues like this one would be a great idea. Thank you for a great template!!

Angular 8 compatibility

Please add Angular 8 compatibility (as it's now GA). Happy to provide a PR if necessary!

custom icon in nav.ts

how to use the image as icon in _nav.ts in coreUi pro

Performance issues with app-sidebar-nav components due to ngClass bindings

OS: Windows 10
Browsers: Chrome 75.0.3770.142 64-bit, Firefox 68.0.1
Angular 7.2.12

After upgrading to CoreUI 2.4.5 from an old v1.x version, I am experiencing significant performance issues across our entire app. The observed behavior is that typing fast in a text input is laggy; keeping a key pressed shows noticeable hiccups every 5 to 10 characters. All in all, it just gives the feeling of bad UX.

When profiling with Chrome, I noticed that a good deal of time is spent in a "Recalculate Style" step:

Switching to Event Log tab in Chrome Debugger while running on a debug version of our app, I noticed that every keypress event triggers a style recalculation. One can find the source of style changes by clicking Reveal link:
.

Source is AppSidebarNavLinkComponent; our app has 20+ sidebar link items and on every keypress, all of them schedule a style recalculation by removing and re-adding the same CSS classes:

Looking at the code, I believe the root cause is the refactoring done in this commit, as well as this older commit. Before those changes, the ngClass was bound to an inline expression, and it was converted to function calls e.g. getLinkClass or helper.getBadgeClass(item). All of these functions always return a new object reference when called, which makes Angular think - during every change detection cycle - that the ngClass attribute has changed. It then proceeds to remove all classes and re-add them back, even if the object structure is the same; verified this by debugging.

A possible solution is to maintain string arrays in each nav item component, and have the getLinkClass/getBadgeClass etc. functions return the same array instance every time is called. NgClass directive has an IterableDiffer to detect changes in the array elements, so clearing the array and re-adding the same items all over again should be okay as long as we keep the same array reference. I verified this and it does get rid of the Recalculate Style, solving the issue.

For example, in app-sidebar-nav-link.component.ts:

  public getLinkClass() {
    const disabled = this.isDisabled();
    const classes = {
      'nav-link': true,
      'disabled': disabled,
      'btn-link': disabled
    };
    if (this.hasVariant()) {
      const variant = `nav-link-${this.item.variant}`;
      classes[variant] = true;
    }
    return classes;
  }

becomes:

  private linkClasses: string[] = [];

  public getLinkClass() {
    this.linkClasses.splice(0);

    this.linkClasses.push('nav-link');

    if (this.isDisabled()) {
      this.linkClasses.push('disabled');
      this.linkClasses.push('btn-link');
    }
    if (this.hasVariant()) {
      const variant = `nav-link-${this.item.variant}`;
      this.linkClasses.push(variant);
    }
    return this.linkClasses;
  }

You would also have to add array variables for badge/icon classes as well, and change SidebarNavHelper to return an array of class names, for the HTML to bind to:

  public getIconClass() {
    this.iconClasses.splice(0);
    for (const iconClass of this.helper.getIconClass(this.item)) {
      this.iconClasses.push(iconClass);
    }

    return this.iconClasses;
  }

It kinda breaks the SidebarNavHelper idea and results in more code; other alternatives might be to introduce an inheritance tree for the app-sidebar-nav-xxx.component classes or to change the SidebarNavHelper to receive the classes array as input.

Let me know what you think. I am willing to fork and submit a pull request if the above changes look acceptable.

Missing types on some components

The AppSidebarNavComponent accepts an array of navItems that are typed as any:

@Input() navItems: Array<any>;

This is bad for typechecking, IDE support, and documentation: it's difficult to understand what you have to pass to the component. I've found the types of these items in the main project: https://github.com/coreui/coreui-free-angular-admin-template/blob/master/src/app/_nav.ts but I think that these types should be added here.

The same issue is present in other components, for example this is the definition of some inputs in the AppHeaderComponent:

@Input() navbarBrand: any;
@Input() navbarBrandFull: any;
@Input() navbarBrandMinimized: any;
@Input() navbarBrandText: any = {icon: '🅲', text: '🅲 CoreUI'};
@Input() navbarBrandHref: ''; // deprecated, use navbarBrandRouterLink instead
@Input() navbarBrandRouterLink: any[] | string = '';

Inherited Route Data

When a route inherits the data dictionary from its parent, the breadcrumb is repeated. I will demonstrate:

{
    path: '',
    data: {
      title: 'Account'
    },
    children: [{
      path: 'expenses',
      children: [{
        path: '',
        data: {
          title: 'Expenses'
        },
        children: [{
          path: '',
          component: ExpensesComponent,
        }, {
          path: 'view/:id',
          component: ExpenseViewComponent,
          resolve: {
            expense: ExpenseResolver
          },
          data: {
            title: 'Expense View'
          }
        }]
      }]
}

This will produce: Account / Expenses / Expenses when you are on the /account/expenses path. I was expecting: Account / Expenses

Login/Register components are not vertically centered

As demonstrated in the bootstrap component, the login/register boxes should be vertically centered in the browser viewport. Except they are not in this Angular component, rather they get some kind of asymmetric spacing caused by issue #25 .

Fixing issue #25 with its related pull request exposes this bug in a more visible way.

Can't get Breadcrumbs to appear

I'm at a loss on this. I downloaded the CoreUI Angular Admin panel and ran it in my machine. The breadcrumbs work fine.
Then based on the CoreUI theme, I created my own project and set up breadcrumbs. The project runs fine and all the functionality and component works. But the breadcrumbs are not visible. There's no error message or anything. It is just empty.
When I look at the breadcrumb component template output in the html page, I see the following.
< ol class="breadcrumb"> <!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object" }--> <!--bindings={}--> <!--bindings={}--> <!--bindings={}--> </ ol>
Note: I had to put a space on the ol tags to prevent it from auto rendering in the output here.

Then I decided to check if the service is having any issues. I couldn't inject the breadcrumbService into my component. So I just copied the code that's happening within the service's constructor into my component and did a console output of the breadcrumb it builds.
This is the output of the console message.
(3) [{…}, {…}, {…}] 0: {label: {…}, url: "/"} 1: {label: {…}, url: "//"} 2: {label: {…}, url: "///dashboard"}

I can't tell if this is what the breadcrumbs property output from service should look like. If it is, then I can't understand why the component isn't rendering the correct template based on the data. What am I missing? Can someone please enlighten me?

Nested sidemenu nav - selected child item styling

I'm absolutely loving CoreUI and it really saves up time and provides a consistent look.

There's just one thing that visually confuses me as well as other people - the styling of the selected child items in a nested sidemenu nav. It is very hard to distinguish the tree structure in the following setup:

List and Frozen are children of Skills. When List is selected, the styling looks almost identical to that of the top-level items.

My workaround in the meantime is to replace the variable $sidebar-nav-link-active-bg to rgba(0, 0, 0, 0.2), then I achieve something a little more viable:

I am looking forward to a more intuitive look out of the box!

Hide a item in navItems

How Can i hide a item in array navItems?

Angular 7 compatibility

When using coreui-angular with Angular 7, npm shows warning messages during the npm install:

npm WARN @coreui/[email protected] requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @coreui/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.

In package.json it is:

"@angular/common": "7.0.0",
"@angular/core": "7.0.0",

Can app-header/app-footer/app-sidebar/app-aside components be customised?

Can the build components such as app-header/app-footer/app-sidebar/app-aside be customised?

For example, in app-header tag we have a property navbarBrandFull which accepts a json format having dimensions and src of the image. Instead of image can we simply have a text? Can this type of customisation is possible?

Is the code for these component available anywhere?

Also, Can I get a list of options present in all these tags?

Hoping for a quick response. Thanks.

Sidebar minimized (icons only) does not scroll

Current Behavior:
The side bar when minimized does not scroll in order to show the rest of the menu items that are not in the view port. This issue can be seen in the PRO demo version as well https://coreui.io/angular/demo/#/dashboard.

Expected Behavior:
when using the mouse scroll wheel over the side bar the menu should to allow viewing the entire collapsed menu.

How To remove Right Side Toggle Icon

Before opening an issue:

• Search for duplicate or closed issues
• Prepare a reduced test case for any bugs
• Read the contributing guidelines

When asking general "how to" questions:

• Please do not open an issue here
• Instead, ask for help on StackOverflow, IRC, or Slack

When reporting a bug, include:

• Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
• Reduced test cases and potential fixes using CodePen or JS Bin

When suggesting a feature, include:

• As much detail as possible for what we should add and why it's important to CoreUI
• Relevant links to prior art, screenshots, or live demos whenever possible
  

How to remove # from url

I just bought and experience the same.
I am trying coreui-pro-angular-admin-template-2.2.0
Any idea to remove # ?
Thanks

Originally posted by @sasaahlan in coreui/coreui-react#46 (comment)

Unexpected value 'undefined' imported by the module 'AppHeaderModule

When I try to build my project with production mode I am getting error such as below:

node_modules/@angular/cli/bin/ng build --prod

Date: 2019-02-05T09:07:36.717Z
Hash: eafb296a8889407cd81e
Time: 12658ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.2861d51e7415c37b3032.css (styles) 1.27 MB [initial] [rendered]
chunk {2} polyfills.e7f5364b276024e19b0b.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.0594610c91de797f492a.js (main) 128 bytes [initial] [rendered]

ERROR in : Unexpected value 'undefined' imported by the module 'AppHeaderModule in .../frontend/node_modules/@coreui/angular/coreui-angular.d.ts'

My package.json looks like this:

{
  "name": "[...]",
  "version": "1.0.0",
  "description": "[...]",
  "author": {
    "name": "[..]",
    "url": "[..]"
  },
  "scripts": {
    "build": "node_modules/@angular/cli/bin/ng build",
    "build-dev": "node_modules/@angular/cli/bin/ng build",
    "build-prod": "node_modules/@angular/cli/bin/ng build --prod",
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "external": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.6",
    "@angular/common": "^6.1.6",
    "@angular/compiler": "^6.1.6",
    "@angular/core": "^6.1.6",
    "@angular/forms": "^6.1.6",
    "@angular/http": "^6.1.6",
    "@angular/platform-browser": "^6.1.6",
    "@angular/platform-browser-dynamic": "^6.1.6",
    "@angular/router": "^6.1.6",
    "@coreui/angular": "^2.0.0-rc.1",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/coreui-pro": "^2.0.6",
    "@coreui/icons": "^0.3.0",
    "@fortawesome/fontawesome-pro": "^5.6.3",
    "@ngx-formly/bootstrap": "^4.8.2",
    "@ngx-formly/core": "^4.8.2",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "4.1.3",
    "bpmn-js": "3.0.4",
    "flag-icon-css": "3.0.0",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "moment": "2.22.2",
    "mutationobserver-shim": "^0.3.2",
    "ngx-bootstrap": "3.0.1",
    "ngx-perfect-scrollbar": "6.3.0",
    "ngx-toastr": "9.1.0",
    "primeicons": "^1.0.0",
    "primeng": "^6.1.6",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "spinkit": "^1.2.5",
    "ts-helpers": "1.1.2",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.5",
    "@angular/cli": "^6.1.5",
    "@angular/compiler-cli": "^6.1.6",
    "@angular/language-service": "^6.1.6",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^10.9.4",
    "codelyzer": "^4.4.4",
    "jasmine-core": "^3.2.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.2",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.3.1",
    "protractor": "5.4.0",
    "ts-node": "7.0.1",
    "tslint": "5.11.0",
    "typescript": "^2.9.2"
  },
  "engines": {
    "node": ">= 8.9.4",
    "npm": ">= 5.6.0"
  }
}

I bought a pro version of your project.
can you help me with this one?

BTW. I didn't have that issue on 1.02.2019, and my codes have not changed since then...

[Suggestion] Custom selector prefix

Currently the components use app as a selector prefix, but this is also the default prefix when creating a project with Angular CLI.

In order to prevent name conflicts it would be a good idea to use a custom selector prefix.

Diffrent Side-bar for each nav-bar route

hello, I tried to have a personalized "side-bar" for each route added in the "nav-bar". If i create a multiple "navItems const" in" _nav.ts", how i can call them in the "defaultLayout" with the right route?!
Thanks for your help

app-header: setting [mobileAsideMenuToggler]="false" or [asideMenuToggler]="false" causes main menu toggler not to function in mobile view

Our client does not want the hamburger toggle for the aside menu to show -- we show via custom code. To hide the aside menu, my app-header has the markup:

<app-header
  class="animated fadeIn"
  [fixed]="true"
  [navbarBrandFull]="{src: 'assets/logo.jpg', width: 89, alt: 'Logo'}"
  [navbarBrandMinimized]="{src: 'assets/logo.jpg', width: 30, alt: 'Logo'}"
  [sidebarToggler]="'lg'"
  [mobileAsideMenuToggler]="false"
  [asideMenuToggler]="false">
...
</app-header>

Setting [mobileAsideMenuToggler]="false" or [asideMenuToggler]="false" causes the app main menu (an app-sidebar component) not to respond to clicks on the hamburger icon but only in mobile view (ie when the window area is smaller. Desktop view works fine. Oddly enough, when the aside menu has been toggled open by my code, then the button responds to clicks -- will open if closed, will close if opened. If I open the sidebar and then hide the aside menu, I can't close the sidebar either.

• Operating system: Windows 10
• Browsers: All (Chrome, Edge, Firefox, Safari)

full code for the app-root.component.html, for full context:

<app-header
  class="animated fadeIn"
  [fixed]="true"
  [navbarBrandFull]="{src: 'assets/logo.jpg', width: 89, alt: 'Logo'}"
  [navbarBrandMinimized]="{src: 'assets/logo.jpg', width: 30, alt: 'Logo'}"
  [sidebarToggler]="'lg'"
  [mobileAsideMenuToggler]="false">
<!--  [asideMenuToggler]="false">-->
  <div class="toast-container" (click)="extendLongevity()">
    <div [class]="toastClass">
      <div class="col-12 alert alert-{{ toastTheme }}"
           (mouseenter)="extendLongevity()"
           (mouseleave)="releaseNotification()">
        {{ toastMessage }}
      </div>
    </div>
  </div>
  <ul class="nav navbar-top-links navbar-right">
    <li>
      <a class="nav-link" role="button">
        <button class="navbar-toggler ng-star-inserted"
                type="button"
                (click)="activateMessagesTab();">
          <i class="icon-speech"></i>
          <span class="badge badge-pill badge-warning">{{ notifications.notifications.length }}</span>
        </button>
      </a>
    </li>
    <li>
      <a class="nav-link" role="button">
        <button class="navbar-toggler ng-star-inserted"
                type="button"
                (click)="activateNotificationsTab()">
          <i class="icon-bell"></i>
          <span class="badge badge-pill badge-danger">{{ messenger.messages.length }}</span>
        </button>
      </a>
    </li>
    <li>
      <a class="nav-link" role="button">
        <button
          class="navbar-toggler ng-star-inserted"
          (click)="logout()">
          <i class="fa fa-sign-out"></i>
        </button>
      </a>
    </li>
  </ul>
</app-header>
<div class="app-body">
  <app-sidebar [fixed]="true" [display]="'lg'">
    <app-sidebar-nav
      [navItems]="navItems"
      [perfectScrollbar]></app-sidebar-nav>
    <app-sidebar-minimizer></app-sidebar-minimizer>
  </app-sidebar>
  <main class="main">
    <!-- Main content here -->
    <div class="container-fluid">
      <div id="ui-view">
        <div>
          <div class="animated fadeIn">
            <router-outlet></router-outlet>
          </div>
        </div>
      </div>
    </div>
  </main>
  <app-aside [fixed]="true" id="right-aside">
    <tabset [justified]="true" #asideTabs class="no-tabs">
      <tab id="messages">
        <app-messages></app-messages>
      </tab>
      <tab id="notifications">
        <app-notifications></app-notifications>
      </tab>
    </tabset>
  </app-aside>
</div>

Theme Colour

i have just purchased the angular 6+ theme for 49$ . i just wanted to know that the default color of the theme is white and i have to change that to dark ?
what should i do ? because i have just purchased this theme because of the the "dark theme".

app-breadcrumb.service.ts has wrong import from "rxjs" so causes overhead in resulted bundle

app-breadcrumb.service.ts has wrong import from "rxjs" so causes overhead in resulted bundle

File
coreui-angular/projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.service.ts

Line
import { Observable } from 'rxjs/index';

Expected
import { Observable } from 'rxjs';

SidebarNavHelper.isActive should check child items for dropdowns

Hi,

I have a case when urls of child items do not start with the same path as parent's url. In this scenario item selection is not working as expected. So, is it possible to change SidebarNavHelper.isActive to something like this:

public isActive(router, item) {
    const url = item.url;
    if (this.itemType(item) === 'dropdown') {
      if (url === '' || url === '#') {
        return item.children.some((childItem: any) => this.isActive(router, childItem));
      } else {
        return router.isActive(url, false);
      }
    } else {
      return router.isActive(url, true);
    }
  }

Add queryParamsHandling option to navItems in sidebar-nav

Hello,

Can you add the queryParamsHandling option to the navItems array in the sidebar-nav container?
I need to keep the querystring parameters throughout navigation and when I click on a item the querystring params are erased. - This is the link of the documentation in angular link.

Error: The global function `$localize` is missing. Please add `import '@angular/localize';` to your polyfills.ts file

Hello i'm using coreui angular but when i run ng test i get this error:

0 specs, 0 failures, randomized with seed 29334
Error during loading: Uncaught Error: The global function $localize is missing. Please add import '@angular/localize'; to your polyfills.ts file. in http://localhost:9876/_karma_webpack_/vendor.js line 70502.

I searched in several places and found no solution ...

Compilation fails due to "quill.snow.css" resolution failure for text-editors.component.ts in Mac OS.

Environment:

• Operating system and version: Mac OS X 10.14
• Browser and version: N/A

Procedure:

1. Download and unzip coreui-pro-angular-admin-template-2.0.0.zip
2. Run command "yarn" and wait for installation to be finished
3. Run command "yarn start"

Current Result

Console prints the error

    ERROR in ./src/app/views/editors/text-editors/text-editors.component.ts Module not found: Error: Can't resolve '../../../../../node_modules/quill/dist/quill.snow.css' 

Expected Result

Compilation should succeed for source distribution package version 2.0.0

Evidences

Restoring body styles when changing page

Hi,
I'm no Angular expert (learning just now), but it looks like the styles added to the body element in the Aside controller don't get removed when the component is removed from page (maybe removing them in the onNgDestroy method could be the fix? I should try that...).
I'm talking about the styles set at lines

coreui-angular/dist/@coreui/angular/esm2015/lib/aside/app-aside.component.js

Line 28 in 3430e6e

document.querySelector('body').classList.add('aside-menu-fixed');

and following.

This causes positioning issues when changing layouts, like the one at coreui/coreui-free-angular-admin-template#93 . It is reproducible from the main Dashboard Demo page https://coreui.io/angular/demo/#/dashboard by simply navigating to the Login demo page using the navigation menu.

Thanks in advance,
Luca

unable to load CSS style images when deploy angular coreui in off root Nginx

I deployed my coreui angular app in ngnix as off root deployment. When i launch the App URL, I see few images ( rendered from CSS classes as shown below) not rendering in the UI.

CSS Class to render image:
.icon-speech {
content: "\e02c" !important;
}

Ngnix config file:

server {
#-------

location /rig-activity {

        set $url http://edge_rig-activity-service;
                    rewrite ^/rig-activity(.*) $1 break;
                    proxy_pass $url;
            }

            location /rig-activity-ui/ {
                #enable for debug mode
                #proxy_pass http://localhost:4200;


                #root /www/html;
                alias /www/rig-activity-ui/;

                #index  index.html index.htm;

                try_files $uri$args $uri$args/ $uri/ /rig-activity-ui/index.html;
            }

}

Breadcrumbs do not update on route updates

The current binding in the breadcrumb component does not update as the routes change

this.breadcrumbs = this.service.breadcrumbs;

this should be implemented as an observable in the service

Siderbar - Close automaticly child when another open

Hi,

I wanted to know if there is a setting or any tool i can use for my problem. Even on your website if we open many child menu on sidebar it's all the same color. I wanted to do something that when the user open a child menu it close the others.

Exemple of the problem :

Do you know something like that ? Can you help ?

Thanks.

Make horizontal menu static

I have successfully remove sidebar and asidebar by doing this:
[sidebarToggler]="false" [mobileSidebarToggler]="false" [mobileAsideMenuToggler]="false" [asideMenuToggler]="false"

Now I want to have a horizontal menu static. It's going to be just a few items that will always fit on the screen and at this time I dont need mobile. So, when I resize the Browser I dont need the menu to respond to it. Any idea how to do it? I've got it working but cannot find a way to make the menu left aligned. Any idea?

Thanks

Navmenu Dropdown-item not working

Desc:
With the current free admin template I cannot re-create a Nav-menue with dropdown items.
The Navbar is rendered fine but there is no interaction with the dropdown item (-> dropdown doesnt expand)

I tried several approaches from the Documentation (https://coreui.io/docs/components/navbar/)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

-> https://coreui.io/docs/components/navbar/

Placing a Dropdown button within the nav bar seems to work but it really messes up my style and since I will only have some dropdown items in my navbar it's not really an option here.

Steps to Reproduce:
Clone Current Free admin template -> insert mentioned html...

Operating system: Windows10
Browser and version: Chrome, Version 79.0.3945.79

How to use offcanvas on mobile

Hi! How to use offcanvas sidebar on mobile device like on your pro examples.
I want me to open menu on top of the content, not move it, how to do it?