MDB Angular 9 Migration:

MDB Angular 8 Migration:

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:
    • Abandoned:

            
                
                <button class="btn whatever-btn-class"></button>
                
            
        

  • Correct:
    • 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:
    • Abandoned:

            
                
                <div class="card"></div>
                
            
        

  • Correct:
    • Correct:

            
                
                <mdb-card>...</mdb-card>
                
            
        

• Checkboxes - If your application uses a checkbox markup without the mdb-checkbox component, you must change it:
  • Abandoned:
    • 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:
    • 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:
    • Abandoned:

            
                
                <span class="badge any-badge-class"></span>
                
            
        

  • Correct:
    • 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.
• The following sections require importing additional styles:
  • Contact Section,
  • E-commerce Section,
  • Magazine Section,
  • Social Section,
  • Team Section,
  • Testimonials Section.

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:

• styles.scss

        
            
        @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.
• Below is a list of addons that require additional import:
  • Blog Components addon,
  • Chat addon,
  • E-commerce Components addon,
  • Steppers Component,
  • Timeline addon.

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:

• styles.scss

        
            
        @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:
    • Abandoned:

            
                
                    "node_modules/angular-bootstrap-md/scss/mdb-free.scss"
                  
            
        

  • Correct:
    • 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

• angular.json

        
            
        "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

• angular.json

        
            
      "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