MDB Angular 11 Migration:


MDB Angular 11 is compatible with Angular 11, read following guide to learn how to upgrade your project correctly.

Breaking changes in MDB Angular 11:

  • MDB Angular 11 requires Angular v11.

Migration instructions:

  1. Update your project to Angular 11. You can find more information in the Angular Update Guide.
  2. Update MDB Angular to version 11. The way you update your project may vary depending on the MDB product you are using. You can find more information in our Update Instructions.

MDB Angular 10 Migration:


MDB Angular 10 is compatible with Angular 10, read following guide to learn how to upgrade your project correctly.

Breaking changes in MDB Angular 10:

  • MDB Angular 10 requires Angular v10,
  • Tooltip - changed name of the disabled input to tooltipDisabled to avoid naming collisions with the input of other components,
  • Select, Autocomplete - adjusted appearance of clear buttons to maintain a consistent design in all form controls.

Migration instructions:

  1. Update your project to Angular 10. You can find more information in the Angular Update Guide.
  2. Update MDB Angular to version 10. The way you update your project may vary depending on the MDB product you are using. You can find more information in our Update Instructions.
  3. If you use Tooltip component with disabled, change the input name to tooltipDisabled.

MDB Angular 9 Migration:


MDB Angular 9 is compatible with Angular 9, read following guide to learn how to upgrade your project correctly.

Breaking changes in MDB Angular 9:

  • MDB Angular requires Angular v9, but it's still possible to opt-out of Ivy,
  • MDB Angular now requires @angular/cdk package,
  • Roboto font files are no longer included in the library files and should be loaded from external source.

Migration instructions:

  1. Update your project to Angular 9. You can find more information in the Angular Update Guide.
  2. Install @angular/cdk package: npm install @angular/cdk --save.
  3. Update MDB Angular to version 9. The way you update your project may vary depending on the MDB product you are using. You can find more information in our Update Instructions.
  4. Load Roboto Font from Google Fonts. Add following code to the head section of your index.html file:
            
                
            <head>
              <meta charset="utf-8" />
              <title>MDB Angular</title>
              <base href="/" />
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <link rel="icon" type="image/x-icon" href="favicon.ico" />
              <link
                href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap"
                rel="stylesheet"
              />
            </head>
            
            
        

Automatic migration with Angular Schematics:

In MDB Angular 9 we added new Schematics scripts to version Pro and updated existing scripts in version Free. With this tool you can install and migrate your project automatically.

MDB Angular Free:

Add MDB Angular Free to a new project: ng add angular-bootstrap-md

Update existing project with MDB Angular Free package from v8 to v9: ng update angular-bootstrap-md

MDB Angular Pro:

Add MDB Angular Pro to a new project:

  • Install MDB Angular Pro package from GitLab server or from .tgz archive as explained in the Quick Start Guide,
  • Update project files with ng add command: ng add ng-uikit-pro-standard.

Update existing project with MDB Angular Pro package from v8 to v9:

  • Make sure that MDB Angular Pro v9 is installed in your project,
  • Update project files with ng update command: ng update ng-uikit-pro-standard --migrate-only --from=8.0.0 --to=9.0.0.

MDB Angular 8 Migration:


In MDB 8 we decided to slim down our library. The result is modularity of styles, thanks to which users can add to the project only those modules that they actually use (both TS and SCSS). The way of importing has changed slightly, as you will read below.

Apart from these changes, we have introduced compatibility with Angular 8, which many people have asked us to do.

Many things have changed in MDB Angular 8 that have been bothering us for a long time. Read below about all the changes:

    Modules - The names of several TS modules have been changed to better reflect their essence:
      Pro:
    • Cards - The directory name has been changed from cards to animated-cards, the module name has been changed from CardsModule to AnimatedCardsModule,
    • Tags - The directory name has been changed from tags to chips, the module name has been changed from MaterialChipsModule to ChipsModule,
    • Autocomplete - As mentioned above, the old Autocomplete module has been removed in this version. Migrate your application to a new one, AutoCompleterModule,
      Free:
    • Cards - The module name has been changed from CardsFreeModule to CardsModule.
    Components - The possibility of using several components only with their styles has been abandoned. These are: Buttons, Cards, Checkboxes, Badges. In the future other "naked" components will be abandoned in favour of special Angulaire components - e.g. footer
    • Buttons - If your application uses the markup below, change it to the correct one - using the mdbBtn directive:
      • Abandoned:
                
                    
                    <button class="btn whatever-btn-class"></button>
                    
                
            
      • Correct:
                
                    
                    <button mdbBtn></button>
                    
                
            
    • Cards - If your application uses the markup below, change it to the correct one - using the mdb-card component (the same rules applies to other elements related to cards, for example: mdb-card-body, mdb-card-title):
      • Abandoned:
                
                    
                    <div class="card"></div>
                    
                
            
      • Correct:
                
                    
                    <mdb-card>...</mdb-card>
                    
                
            
    • Checkboxes - If your application uses a checkbox markup without the mdb-checkbox component, you must change it:
      • Abandoned:
                
                    
                    <!-- Checkbox free -->
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="defaultUnchecked" />
                      <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
                    </div>
        
                    <!-- Checkbox pro -->
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="materialUnchecked" />
                      <label class="form-check-label" for="materialUnchecked">Material unchecked</label>
                    </div>
                    
                
            
      • Correct:
                
                    
                    <!-- Checkbox free -->
                    <mdb-checkbox [default]="true"></mdb-checkbox>
                    <!-- Checkbox pro -->
                    <mdb-checkbox></mdb-checkbox>
                    
                
            
    • Badges - If your application uses a badges markup without the mdb-badge component, you must change it:
      • Abandoned:
                
                    
                    <span class="badge any-badge-class"></span>
                    
                
            
      • Correct:
                
                    
                    <mdb-badge></mdb-badge>
                    
                
            
    Sections - Writing MDB 8 we found that examples from the Sections category are not used in every application, so we separated them from the basic, always imported version of MDB. If you want to use any example from the Sections category, check at the very top of the documentation to see if you need to import additional files.

    For example, if you use the Contact and Magazine sections in your application, add the following imports at the very beginning of the global styles.scss stylesheet:

            
                
            @import "~ng-uikit-pro-standard/assets/scss/core/colors"; 
            @import "~ng-uikit-pro-standard/assets/scss/core/variables"; 
            @import "~ng-uikit-pro-standard/assets/scss/core/variables-pro"; 
            @import "~ng-uikit-pro-standard/assets/scss/sections-pro/_contacts-pro.scss"; 
            @import "~ng-uikit-pro-standard/assets/scss/sections-pro/_magazine-pro.scss";
          
            
        
    Addons - As in the case of Sections, addons have been considered unnecessary in the main composition of the imported package, so they should be imported in the same way as Sections. If you want to use any example from the Addons category, check at the very top of the documentation to see if you need to import additional files.

    For example, if you use the Chat and E-commerce addons in your application, add the following imports at the very beginning of the global styles.scss stylesheet:

            
                
            @import "~ng-uikit-pro-standard/assets/scss/core/colors"; 
            @import "~ng-uikit-pro-standard/assets/scss/core/variables"; 
            @import "~ng-uikit-pro-standard/assets/scss/core/variables-pro"; 
            @import "~ng-uikit-pro-standard/assets/scss/addons-pro/_chat-pro.scss"; 
            @import "~ng-uikit-pro-standard/assets/scss/addons-pro/_ecommerce-pro.scss";
          
            
        
    Importing an mdb stylesheet - Starting with MDB 8, there will be no two style sheets - mdb.scss and mdb-free.scss, just one mdb.scss sheet, which in both cases - free and pro - will be imported similarly. The change applies only to the MDB Free library: Change the import of mdb styles in the angular.json file to the following:
    • MDB Free angular.json:
      • Abandoned:
                
                    
                        "node_modules/angular-bootstrap-md/scss/mdb-free.scss"
                      
                
            
      • Correct:
                
                    
                        "node_modules/angular-bootstrap-md/assets/scss/mdb.scss"
                      
                
            

    From now on, the mdb.scss file will only import MDB Core - the files that are necessary for the functioning of the library and its components - colors, variables, mixes, etc.

    Here's what importing MDB styles should look like for MDB Free in angular.json file

            
                
            "styles": [ 
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss", "src/styles.scss" 
            ]
          
            
        
    Animations - Previously, MDB used the Animate.css library to create animated effects. Again, we decided that not every project has to use animations, so we threw them out of the basic MDB version.

    If you want to use the animations described on this page, install the animate.css package from the npm repository and import it into angular.json file just after importing mdb.scss file.

    The following code shows how to import the animate.css file from the Animate.css library

            
                
          "styles": [ 
            "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
            "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
            "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
            "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
            "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
            "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
            "node_modules/animate.css/animate.css", "src/styles.scss" 
          ]
          
            
        
    MDB Free step-by-step migration - Follow these instructions step by step and you should be able to migrate your project to MDB Angular 8 without any problems.
  1. Back up your project so you don't lose it,
  2. Remove the node_modules directory and the package-lock.json / yarn.lock files,
  3. Install the latest version of the angular-bootstrap-md library in your project,
  4. If you are using animation, install Animate.css library using following command - npm install animate.css --save,
  5. If you installed the Animate.css library, add the import of the animate.css file to the angular.json file,
  6. In the angular.json file, change the import of the bootstrap.scss file to the following one: "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",,
  7. In the angular.json file, change the import of the mdb-free.scss file to the following one: "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
  8. If you use a single CardsFreeModule module instead of the entire library, change its import to CardsModule,
  9. If you are using old syntax for components in your file: Badge, Button, Checkbox correct it to the only valid syntax,
  10. If all the above points have been completed correctly, you can safely start your application.
    MDB Pro step-by-step migration - Follow these instructions step by step and you should be able to migrate your project to MDB Angular 8 without any problems.
  1. Back up your project so you don't lose it,
  2. Remove the node_modules directory and the package-lock.json / yarn.lock files,
  3. Install the latest version of the ng-uikit-pro-standard library in your project,
  4. If you are using animation, install Animate.css library using following command - npm install animate.css --save,
  5. If you installed the Animate.css library, add the import of the animate.css file to the angular.json file,
  6. In the angular.json file, change the import of the bootstrap.scss file to the following one: "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",,
  7. In the angular.json file, change the import of the mdb-free.scss file to the following one: "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
  8. If you use a any of the single CardsFreeModule, CardsModule, MaterialChipsModule module instead of the entire library, change its import to CardsModule, AnimatedCardsModule, ChipsModule,
  9. If you are using the old version of the autocomplete - mdb-autocomplete component, it is necessary to rewrite your application in such a way that you are using the new version - mdb-auto-completer,
  10. If you are using old syntax for components in your file: Badge, Button, Checkbox correct it to the only valid syntax,
  11. If you are using any these section (Contact, E-commerce, Magazine, Social, Team, Testimonials) in your application, add the missing file import to the global styles.scss stylesheet,
  12. If you are using any these addons (Blog Components, Chat, E-commerce Components, Steppers, Timeline) in your application, add the missing file import to the global styles.scss stylesheet,
  13. If all the above points have been completed correctly, you can safely start your application.

MDB Angular 6.0.2 -> MDB Angular 6.1.1 Migration:

MDB Angular Pro:

ng-mdb-pro package is now deprecated. To use the latest version, import ng-uikit-pro-standard package instead of ng-mdb-pro package.

Now app.module.ts file should look as follow:
        
            
      import { BrowserModule } from '@angular/platform-browser';
      import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
      import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule,
          MDBBootstrapModulesPro.forRoot(),
        ],
        providers: [MDBSpinningPreloader],
        bootstrap: [AppComponent]
      });

      export class AppModule { }
    
        
    
Now angular.json file styles and scripts arrays should looks like following:
        
            
      "styles": [
        "node_modules/font-awesome/scss/font-awesome.scss",
        "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
        "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
        "src/styles.scss"
      ],

      "scripts": [
        "node_modules/chart.js/dist/Chart.js",
        "node_modules/easy-pie-chart/dist/easypiechart.js",
        "node_modules/screenfull/dist/screenfull.js",
        "node_modules/hammerjs/hammer.min.js"
      ]
    
        
    
Import path:

Importing our components / interfaces / directives / services should look like the following:

        
            
      import { something } from 'ng-uikit-pro-standard'
    
        
    

Below way of importing our components / interfaces / directives / services is invalid, and shouldn't be used:

        
            
      import { something } from 'ng-uikit-pro-standard/pro/something'
    
        
    
Package name:

MDBBootstrapModulePro is now deprecated. Instead of it, use MDBBootstrapModulesPro.

Modules list:

Here you will find a list of all modules that you can use in your application: Modules List

Installation command:

To install latest version of ng-uikit-pro-standard package, use following command:

        
            
      npm install git+https://oauth2:YOUR_TOKEN@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git --save
    
        
    

MDB Angular Free:

Now app.module.ts file should look as follow:
        
            
      import { BrowserModule } from '@angular/platform-browser';
      import { MDBBootstrapModule } from 'angular-bootstrap-md';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule,
          MDBBootstrapModule.forRoot(),
        ],
        bootstrap: [AppComponent]
      });

      export class AppModule { }
    
        
    
Now angular.json file styles and scripts arrays should looks like following:
        
            
      "styles": [
        "node_modules/font-awesome/scss/font-awesome.scss",
        "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
        "node_modules/angular-bootstrap-md/scss/mdb.scss",
        "src/styles.scss"
      ],
      
      "scripts": [
        "node_modules/chart.js/dist/Chart.js",
        "node_modules/hammerjs/hammer.min.js"
      ]
    
        
    
Import path:

Importing our components / interfaces / directives / services should look like the following:

        
            
      import { something } from 'angular-bootstrap-md'
    
        
    

Below way of importing our components / interfaces / directives / services is invalid, and shouldn't be used:

        
            
      import { something } from 'angular-bootstrap-md/something'
    
        
    
Modules list:

Here you will find a list of all modules that you can use in your application: Modules List