creativetimofficial/argon-dashboard-angular

argon-dashboard-angular's Issues

[Bug] Can't bind to 'ngIf' since it isn't a known property of 'tbody'.

It still doesn't work after I imported CommonModule

[Error] Chart.elements.Rectangle.prototype.draw error "elements" when @types/chart.js is installed

Hi, in my project appeared a requirement of utilize ChartDataLabels, but ChartDataLabels require @types/chart.js, so when I import @types/chart.js, Chart.elements.Rectangle.prototype.draw (inside variables/chart.ts) don't work, showing of the error:

ERROR in src/app/variables/charts.ts:7:7 - error TS2339: Property 'elements' does not exist on type 'typeof import(".../node_modules/@types/chart.js/index.d.ts")'.

7 Chart.elements.Rectangle.prototype.draw = function() {
        ~~~~~~~~

After Upgrading Angular 9 to 17 material styles are not working

Upgrade to angular 15 needed for successful compilation with node 18

diff --git a/package.json b/package.json
index b530d40..ef41b7b 100644
--- a/package.json
+++ b/package.json
@@ -12,20 +12,20 @@
},
"private": true,
"dependencies": {

• "@angular/animations": "^14.2.0",
• "@angular/cdk": "^14.2.0",
• "@angular/common": "^14.2.0",
• "@angular/compiler": "^14.2.0",
• "@angular/core": "^14.2.0",
• "@angular/elements": "^14.2.0",
• "@angular/forms": "^14.2.0",

• "@angular/animations": "^15.0.0",
• "@angular/cdk": "^15.0.0",
• "@angular/common": "^15.0.0",
• "@angular/compiler": "^15.0.0",
• "@angular/core": "^15.0.0",
• "@angular/elements": "^15.0.0",
• "@angular/forms": "^15.0.0",
  "@angular/google-maps": "^14.2.0",

• "@angular/localize": "^14.2.0",
• "@angular/material": "^14.2.0",
• "@angular/platform-browser": "^14.2.0",
• "@angular/platform-browser-dynamic": "^14.2.0",
• "@angular/router": "^14.2.0",
• "@ng-bootstrap/ng-bootstrap": "12.0.1",

• "@angular/localize": "^15.0.0",
• "@angular/material": "^15.0.0",
• "@angular/platform-browser": "^15.0.0",
• "@angular/platform-browser-dynamic": "^15.0.0",
• "@angular/router": "^15.0.0",
• "@ng-bootstrap/ng-bootstrap": "14.0.0",
  "@popperjs/core": "^2.11.4",
  "bootstrap": "4.6.1",
  "chart.js": "2.9.4",
  @@ -38,10 +38,10 @@
  "web-animations-js": "2.3.2"
  },
  "devDependencies": {

• "@angular-devkit/build-angular": "^14.2.7",
• "@angular/cli": "~14.2.7",
• "@angular/compiler-cli": "^14.2.0",
• "@angular/language-service": "14.2.0",

• "@angular-devkit/build-angular": "^15.0.4",
• "@angular/cli": "~15.0.4",
• "@angular/compiler-cli": "^15.0.0",
• "@angular/language-service": "15.0.0",
  "@types/jasmine": "~4.0.0",
  "@types/jasminewd2": "~2.0.10",
  "@types/node": "^17.0.21",
  @@ -56,6 +56,6 @@
  "karma-jasmine-html-reporter": "~2.0.0",
  "protractor": "7.0.0",
  "ts-node": "~10.9.1",

• "typescript": "~4.7.2"

• "typescript": "~4.8.2"
  }
  }

[Bug] [Error] Chart.elements.Rectangle.prototype.draw error "elements" when @types/chart.js is installed

Version

1.1.0

Reproduction link

Operating System

Windows

Device

PC

Browser & Version

Chrome 83.0.4103.116

Steps to reproduce

1. Try to use ChartDataLabels ( npm install chartjs-plugin-datalabels --save )
2. Step One requires @types/chart.js ( npm install @types/chart.js ) to work correctly.
3. Chart.elements.Rectangle.prototype.draw stop working

What is expected?

Chart.elements.Rectangle.prototype.draw back working.

What is actually happening?

in my project appeared a requirement of utilize ChartDataLabels, but ChartDataLabels require @types/chart.js, so when I import @types/chart.js, Chart.elements.Rectangle.prototype.draw (inside variables/chart.ts) don't work, showing of the error:

ERROR in src/app/variables/charts.ts:7:7 - error TS2339: Property 'elements' does not exist on type 'typeof import(".../node_modules/@types/chart.js/index.d.ts")'.

---

Solution

i do not have it yet

Additional comments

• The Chart.elements.Rectangle.prototype.draw works normally without @types/chart.js.

• If it's a basic knowlodge, sorry! I'm beginner with this tecnology.

Dont Use For Production

I dont know why I am getting Dont Use For Production When I am Deploying It on production server

Please how can I deploy it on Production Server

Sidebar menu with submenu toggle issue

• //something....

          <ul class="nav">
            <li *ngFor="let submenuItem of menuItem.submenu" class="{{submenuItem.class}} nav-link-inner--text">
              <a routerLinkActive="active" [routerLink]="[submenuItem.path]" class="nav-link">
                <i class="ni {{submenuItem.icon}}"></i>
                {{submenuItem.title}}
              </a>
            </li>
          </ul>
      
      </li>
    </ul>
  

only admin-layout

How can I use only admin-layout without any other components, pages etc.
Or how can I just add styles to my new angular project? WIthout examples

datepicker style is broken

argon-version: 1.0.0
"@ng-bootstrap/ng-bootstrap": "4.0.1",
"bootstrap": "4.1.3",

datepicker style is broken like below:

Tried to upgrade bootstrap into 4.3.1 but same error happens.
Please help!

[Bug] Date Picker UI Destroyed

Version

1.1.0

Reproduction link

https://scontent.fmnl4-6.fna.fbcdn.net/v/t1.15752-9/92298819_2732370283551626_7588618938951401472_n.png?_nc_cat=108&_nc_sid=b96e70&_nc_eui2=AeGBeBKvqw5Z6v4qQPeyZvscCAowPyQII9EICjA_JAgj0RuVJVhEmiaEUwFTpsBbRNC81WCjgEv1bWwA-bwSJUUC&_nc_ohc=zG3gES7wGM8AX-rE692&_nc_ht=scontent.fmnl4-6.fna&oh=82c2a8eec07c8150db071ce4fac8cc2d&oe=5EB6DA85

Operating System

Windows 10

Device

Laptop

Browser & Version

Google Chome Latest Version

Steps to reproduce

1. Copy and Paste the code from the documentation
2. Run

What is expected?

Normal looking

What is actually happening?

Can't see anything

---

Solution

Additional comments

test

ng-table is not a known element

I am using the free version of argon angular dashboard for my project .Whenever I am trying to implement the external data table package from npmjs its giving me a compiler error "ng-table" is not a known element.Paginator is not a known element.I am importing the packages correctly.Can anyone please give me an idea why its happening?

PWA Not Working

After install PWA or ng add @angular/pwa, there are error where run command ng build --prod

error produce like bottom in console :
Erroneous area:
1: 100% - $icon-size-xl - 1
^.........^

why ican't interact with Modals ! i tried to change the z-index but didn't worked

Only 2 arguments allowed, but 3 were passed.

Only 2 arguments allowed, but 3 were passed.

246 │   @include form-validation-state($state, map-get($data, color), map-get($data, icon));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  node_modules\bootstrap\scss\_forms.scss 246:3  form-validation-state()
  node_modules\bootstrap\scss\_forms.scss 246:3  @import
  stdin 21:9                                     root stylesheet

[Bug] Can't update to angular 10 and ng-bootstrap 7

Version

1.1.0

Reproduction link

Operating System

Windows

Device

PC

Browser & Version

All browsers

Steps to reproduce

1. update to angular 10
2. update to ng-bootstrap 7
3. run the angular server

What is expected?

I expect it to work correctly

What is actually happening?

I get this error in the console:
SassError: No argument named $ignore-warning.
┌──> node_modules\bootstrap\scss_forms.scss
40│ @include form-control-focus($ignore-warning: true);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
╵
┌──> src\assets\scss\core\mixins_forms.scss
1 │ @mixin form-control-focus() {
│ ━━━━━━━━━━━━━━━━━━━━ declaration
╵
node_modules\bootstrap\scss_forms.scss 40:3 form-control-focus()
node_modules\bootstrap\scss_forms.scss 40:3 @import

---

Solution

Additional comments

Angular material component are not working even after installation

Prerequisites

Angular material is not working after installing it to the free version of the argon-angular-dashboard screenshot attached.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The expected result should include:

• default styles of argon-dashboard
• style and HTML code of Angular material
• all the features and function of Angular material

Current Behavior

The current behavior includes only the styles of argon-angular-dashboard. It has all the dependencies installed, however, it doesn't show the styles of Angular material

Steps to Reproduce

In order to replicate this issue, follow the following steps:

1. Download the free version of argon-angular-dashboard
2. Add dependencies of angular material by using ng add @angular/material
3. Add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in your styles.scss
4. Add any component in your HTML component, for example, let take a button.
   <button mat-raised-button color="accent">Accent</button>
5. Check the output on your page.

Context

• Device: Lenovo Thinkpad
• Operating System: Ubuntu 19.10
• Browser and Version: chrome Version 80.0.3987.106 (Official Build) (64-bit)

Output screenshot

[Feature Request] test

What is your enhancement?

test

[Feature Request] Angular 13

What is your enhancement?

Please update all angular packages to version 13.3.11 from 13.3.1.
I'm trying to update the packages but failed every time because on my system I have node version 8.18.0 and angular/cli version 13.3.9. It is my suggestion only.

Upgrade Bootstrap to 4.3.1

To avoid the security issue detailed below, please upgrade the bootstrap version.

In Bootstrap 4 before 4.3.1 and Bootstrap 3 before 3.4.1, XSS is possible in the tooltip or popover data-template attribute. For more information, see: https://blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/

CVE-2019-8331

[Bug] Rage Date picker

Version

July 13, 2019 Version

Reproduction link

https://scontent.fmnl4-6.fna.fbcdn.net/v/t1.15752-9/66465439_2311726755710498_6055457953790558208_n.png?_nc_cat=111&_nc_oc=AQl7sU8x2XWnsNKDG4T7FUPG9aEdYBm9mbwopShjAYPnWxmUhERySeu9by0X_Qqlhpk&_nc_ht=scontent.fmnl4-6.fna&oh=c99b9c2d81687356f7274b3d1f559dae&oe=5DBFBB14

Operating System

Windows 8.1

Device

Laptop

Browser & Version

Google Chrome - Latest

Steps to reproduce

1. Open Console
2. Toggle Device Toolbar
3. Pick any smaller devices like iPhone X or iPad

What is expected?

Range date picker somehow will show only 1 month?

What is actually happening?

It doesn't get smaller and ruined the UI

---

Solution

Additional comments

show one month instead of two and make the picker a little bit smaller thank you

[Bug] [Error] Chart.elements.Rectangle.prototype.draw error "elements" when @types/chart.js is installed

Version

1.1.0

Reproduction link

https://github.com/creativetimofficial/argon-dashboard-angular/issues

Operating System

Windows

Device

PC

Browser & Version

Chrome 83.0.4103.116

Steps to reproduce

1. Try to use ChartDataLabels ( npm install chartjs-plugin-datalabels --save )
2. Step One requires @types/chart.js ( npm install @types/chart.js ) to work correctly.
3. Chart.elements.Rectangle.prototype.draw stop working

What is expected?

Chart.elements.Rectangle.prototype.draw back working.

What is actually happening?

in my project appeared a requirement of utilize ChartDataLabels, but ChartDataLabels require @types/chart.js, so when I import @types/chart.js, Chart.elements.Rectangle.prototype.draw (inside variables/chart.ts) don't work, showing of the error:

ERROR in src/app/variables/charts.ts:7:7 - error TS2339: Property 'elements' does not exist on type 'typeof import(".../node_modules/@types/chart.js/index.d.ts")'.

---

Solution

i do not have it yet

Additional comments

• The Chart.elements.Rectangle.prototype.draw works normally without @types/chart.js.

• If it's a basic knowlodge, sorry! I'm beginner with this tecnology.

SASS error when loading

I'm new to this and I'm getting the following error:
SassError: Undefined variable.
╷
20 │ @each $color, $value in $theme-colors-rgb {
│ ^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss_root.scss 20:27 @import

Am I missing something, I installed bootstrap and using angular 15

[Feature Request] Modifying variable's value

What is your enhancement?

Hi,

How and where can I modify default variable values (color, font, ...)