I have the following html-code:

<div class="d-flex">
    <input type="number" id="myInput" class="form-control"">
    <label for="myInput" class="form-label">Input Label</label>
</div>

Without a label, there is a border but with label the border disappears. I have read that I need to insert this code:

document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
})

But this is not the angular way of coding and mdb.Input doesn't even exist.

So how can I initialize a mdb Input with Angular?

I tried to install mdb-angular-kit to a test application that does not use SCSS. After the installation I tried to start the test application and got an error:

./src/styles.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) postcss-import: /Users/julian/repos/mdbTest/node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss Unknown word

> 1 | // CORE FUNCTIONS
    | ^
  2 | @import './bootstrap/functions';
  3 | @import './free/functions';

    at processResult (/Users/julian/repos/mdbTest/node_modules/webpack/lib/NormalModule.js:701:19)
    at /Users/julian/repos/mdbTest/node_modules/webpack/lib/NormalModule.js:807:5
    at /Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/julian/repos/mdbTest/node_modules/postcss-loader/dist/index.js:94:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)

Steps to reproduce

1. ng new mdbTest

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

2. cd mdbTest
3. npm i mdb-angular-ui-kit
4. ng add mdb-angular-ui-kit

? Import all MDB modules? Yes
? Set up Roboto Font? No
? Set up Angular browser animations? Yes
? Set up Font Awesome? No
? Set up Charts? No

4. npm start. Error occurs.

If I look into the styles.css I see an SCSS import:

@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

When I remove it, the application runs, but without any styles.

Expected behaviour

I expect that the toolkit works on non-SCSS projects and that all dependencies should be installed. E.g. if non-SCSS users need mdb-ui-kit it should be installed automatically. If non-SCSS users need additional styles placed to the angular.json, it should be placed automatically.

package.json

{
  "name": "mdb-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "mdb-angular-ui-kit": "^1.0.0-beta6",
    "mdb-ui-kit": "^3.8.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

Hi, there's a PDF file in the published artifact. This increases the artifact size and pollutes the automatically generated 3rdpartylicenses.txt file provided by angular.

Could you please replace the PDF with a normal license file like this.

It's in the mdb-angular-ui-kit/projects/mdb-angular-ui-kit/ directory.

Thanks in advance!

Regards Christian

When building using ng build --prod, or the new ng build --configuration production, a style tag is addded to the head element that forces the body min-width to be 992px!important, and completely breaks the responsive layout.

In an attempt to identify the culprit, I removed styles from angular.json until the min-width wasn't added, and found that node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss was the cause.

Expected behavior

The CSS should render the same as when built without the --prod flag.

Actual behavior

The following CSS is injected into the head, breaking the page. Note the body{min-width:992px!important;} at the end.

@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}*,:after,:before{box-sizing:border-box;}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff;}@page {size:a3;}body{min-width:992px!important;}

Your working environment and MDB version information

• angular-bootstrap-md - 11.1.0
• angular - 12.0.4

Resources (screenshots, code snippets etc.)

package.json

  "dependencies": {
    "@angular/animations": "~12.0.4",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~12.0.4",
    "@angular/compiler": "~12.0.4",
    "@angular/core": "~12.0.4",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.0.4",
    "@angular/localize": "^12.0.4",
    "@angular/platform-browser": "~12.0.4",
    "@angular/platform-browser-dynamic": "~12.0.4",
    "@angular/router": "~12.0.4",
    "@angular/service-worker": "~12.0.4",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@types/uuid": "^8.3.0",
    "@zxing/browser": "0.0.9",
    "@zxing/library": "^0.18.6",
    "@zxing/ngx-scanner": "^3.1.3",
    "angular-bootstrap-md": "^11.1.0",
    "angularx-qrcode": "^11.0.0",
    "animate.css": "^4.1.1",
    "eslint": "^7.28.0",
    "firebase": "^8.3.3",
    "hammerjs": "^2.0.8",
    "rxjs": "^7.1.0",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },

Expected behavior

I would expect a sort to sort Alphabetically ex. ALPHA Alpha alpha BETA Beta beta GAMMA Gamma gamma

Actual behavior

• if a field begins with a lowercase, it sorts them after ALL the ones with capitals But how it sorts is ALPHA Alpha BETA Beta GAMMA Gamma alpha beta gamma

Your working environment and MDB version information

Angular 9 / [email protected]

Resources (screenshots, code snippets etc.)

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[x] Other... Please describe:

Current behavior

Your license is a PDF with just a license name and no text. It can not be parsed by GitHub and Open Source management tools.

Also no copyright notice is given in your license text. Since the MIT license requires the preservation of the copyright notice at distribution, you are making it hard to impossible to use your library legally in Germany where copyright can not be waivered. I'm not a lawyer, this is just what they tell me ;-)

Expected behavior

Your license is in raw text format and includes the license text and copyright notice. Maybe this link helps: https://www.disclaimergenerator.net/copyright-notices/

Minimal reproduction of the problem with instructions

See https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/85dee4e97da4d2735c8f371816d2a2628af2ca17/license.pdf

What is the motivation / use case for changing the behavior?

A big company's compliance department is refusing to allow the use of an application using your library because your copyright notice is missing.

Code example

<li mdbDropdown class="nav-item dropdown" container="body">
    <a mdbDropdownToggle
           mdbWavesEffect
           class="nav-link dropdown-toggle"
           id="navbarDropdownMenuLink"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">Blah</a>
    <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
          <a mdbWavesEffect
             translate
             class="dropdown-item waves-light"
             (click)="navbar.hide()"
             routerLink="/admin-panel"
             routerLinkActive="active">blah2</a>
    </div>
<li>

Error: ERROR TypeError: Cannot read property 'parentNode' of null