The docs are so outdated. Nothing works properly. The from the website example don't work for the navbar. This is a nightmare. When you do NPM install there is no IMG, FONT files. Your NPM package needs updated with all the correct files needed to use from the node_module directory. Why you have to bring your scss files and typscripts files over beats me. Then you have to download the example file to get the rest of the files over for the IMG and FONT directories. Then it's a puzzle to find out to do a simple nav bar because your examples WON'T WORK!

So I was 2 seconds away from purchasing, and now I refuse to because of this.

ERROR in ./node_modules/angular-bootstrap-md/index.ts
Module build failed: Error: <PROJECT_PATH>/node_modules/angular-bootstrap-md/index.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (<PROJECT_PATH>/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:629:23)
    at plugin.done.then (<PROJECT_PATH>/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/modules/shared/shared.module.ts 10:0-58
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Using Angular CLI 1.5.0 and Angular 5.0.0

I just updated to the latest version of mdbootstrap and expected this to be fixed. Viewing on mobile, clicking a link within a navbar or clicking outside of navbar does not close said navbar. Is it just me or is this still a standing issue?

Repro: 1.)

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
           
    <!-- Navbar brand -->
    <logo><a class="navbar-brand" href="#">Navbar</a></logo>

    <!-- Collapsible content -->
    <links>

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
            </li>

            <!-- Dropdown -->
            <li class="nav-item dropdown" dropdown>
                <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
                </div>
            </li>

        </ul>
        <!-- Links -->

        <!-- Search form -->
        <form class="form-inline  waves-light" mdbRippleRadius>
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
        </form>
    </links>
    <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

2.) View on mobile.

P.S - This does not work on your Angular docs either.

Thanks, Brad

I added this code to my angular 5 template file, but nothing happens each time i click the button, i have no idea whats wrong here,navbar and other components are working fine ``

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Expected behavior

Run ng serve successfully.

Actual behavior

I'm getting an error with a module.

Your working environment and MDB version information

Angular: 6.0.1 angular-bootstrap-md: 6.0.2 Bootstrap: 4.1.1 Angular CLI: 6.0.1 Node: 10.0.0 NPM: 6.0.1 OS: linux x64 rxjs: 6.1.0 typescript: 2.7.2 webpack: 4.3.0

Resources (screenshots, code snippets etc.)

ERROR in node_modules/angular-bootstrap-md/dropdown/dropdown-toggle.directive.ts(2,10): error TS2305: Module '"/my-path/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/angular-bootstrap-md/dropdown/dropdown.directive.ts(3,12): error TS2305: Module '"/my-path/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/angular-bootstrap-md/dropdown/dropdown.directive.ts(158,9): error TS2339: Property 'filter' does not exist on type 'EventEmitter<boolean>'.

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 am using MD Boostrap with Angular 8. As soon as I ran ng server. It started throwing below error.
Note: I am not using Pro version.

ERROR in node_modules/angular-bootstrap-md/lib/navbars/links.component.d.ts(3,31): error TS2307: Cannot find module '@angular/core/src/metadata/lifecycle_hooks'. node_modules/angular-bootstrap-md/lib/navbars/navlinks.component.d.ts(3,31): error TS2307: Cannot find module '@angular/core/src/metadata/lifecycle_hooks'.

Expected behavior

Import to work

Actual behavior

I'm importing the scss file for mdbootstrap_angular in my styles.scss file. The actual stmt used is @import "~angular-bootstrap-md/scss/mdb-free";

I'm getting an error in the _forms.scss file

Your working environment and MDB version information

I'm using stackblitz and version 6.0.2 of angular-bootstrap-md

Resources (screenshots, code snippets etc.)

The actual received is as follows

Error in angular-bootstrap-md/scss/free/_forms.scss (5:3) property "input" must be followed by a ':'

When I looked up this file in your repository at https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/ this is what I see in this file (and indeed on line 5 you have input[type=text] ).

// Forms basic // Input + label wrapper styles .md-form { // Text inputs input[type=text], input[type=password], input[type=email], input[type=url], ...

So is the syntax above correct for an scss file. Am I missing some helper function that may be embedded out of order.

This is what I have in my index.html file link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Add bootstrap social library for social media icons --> link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css" rel="stylesheet">

Add font awesome icon library --> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

A workaround could be if I included the styles for mdbootstrap-angular directly in my index.html as references. But I can seem to find a .css file for angular-bootstrap-md at the 6.2.0 level. I tried this approach using the link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet" but it doesn't appear to be the correct level. In particular the dropdown button in the toolbar does not work (which I reported in a different issue which has been closed).

Thanks and regards.

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

Hello and thanks for the work,

From screenshot you can see header and footer are not contained in the modal in case of modal-fluid. This is from the docs

Bumps mixin-deep from 1.3.1 to 1.3.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Expected behavior

Actual behavior

Got Error after Installing angular-bootstrap-md Module not found: Error: Can't resolve 'chart.js'

Your working environment and MDB version information

I Installed "angular-bootstrap-md": "^6.2.4", and got error while running application My angular version

Angular CLI: 6.2.3
Node: 8.11.1
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Resources (screenshots, code snippets etc.)

ERROR in ./node_modules/angular-bootstrap-md/esm5/angular-bootstrap-md.es5.js
Module not found: Error: Can't resolve 'chart.js'

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

Hi,

I am working on an angular 4 projet. I am trying to import from node_modules mdb.scss in order to override default variable. My styles.scss is aat the root of the project asin angular-cli new project.

Here is my styles.scss

/* You can add global styles to this file, and also import other style files */
$primary: red;
$font-family-base: "Comic Sans MS", cursive, sans-serif;
@import "~mdbootstrap/sass/mdb";

Here is one of the error :

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/li
                                                                                                                                                                         b/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
                                                                                                                                                                                                                                         Module not found: Error: Can't resolve '../font/roboto/Roboto-Thin.woff2' in 'C:\Users\myusername\Desktop\PROJECT-NAME\src'
resolve '../font/roboto/Roboto-Thin.woff2' in 'C:\Users\myusername\Desktop\PROJECT-NAME\src'
  using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        after using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./src)
using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./font/roboto/Roboto-Thin.woff2)
no extension
Field 'browser' doesn't contain a valid alias configuration
        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2 doesn't exist
                                                                                                          .ts
                                                                                                          Field 'browser' doesn't contain a valid alias configuration
        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.ts doesn't exist
                                                                                                                                                                                                                       .js
                                                                                                                                                                                                                       Field 'browser' doesn't contain a valid alias configuration
        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js doesn't exist
                                                                                                                                                                                                                                                                                                                                    as directory
                                                                                                                                                                                                                                                                                                                                    C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2 doesn't exist
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2]
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.ts]
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js]
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2]

I have serveral error like this which are all about wrong path.

Expected behavior

I d like to import and override variables as I would do in any bootstrap4 (the scss) project.

Way to reproduce

with angular cli :

1. create a new project with angular cli
2. install mdb as a dep
3. add scss as a style extension
4. import it and try to override variables in styles.scss