1. Home
  2. Upgrade guide
  3. Upgrade to 1.0.0-alpha.5

Upgrade to 1.0.0-alpha.5

Contents

Upgrade CSS Classes

You have to change following classes in html, vue & js files.

Old CSS classes - 1.0.0-alpha.4 New CSS classes - 1.0.0-alpha.5
mt-3 mt-5
mb-3 mb-5
ml-3 ml-5
mr-3 mr-5
mx-3 mx-5
my-3 my-5
m-3 m-5
mt-2 mt-4
mb-2 mb-4
ml-2 ml-4
mr-2 mr-4
mx-2 mx-4
my-2 my-4
m-2 m-4
mt-1 mt-3
mb-1 mb-3
ml-1 ml-3
mr-1 mr-3
mx-1 mx-3
my-1 my-3
m-1 m-3
mt-h mt-2
mb-h mb-2
ml-h ml-2
mr-h mr-2
mx-h mx-2
my-h my-2
m-h m-2
mt-q mt-1
mb-q mb-1
ml-q ml-1
mr-q mr-1
mx-q mx-1
my-q my-1
m-q m-1
pt-3 pt-5
pb-3 pb-5
pl-3 pl-5
pr-3 pr-5
px-3 px-5
py-3 py-5
p-3 p-5
pt-2 pt-4
pb-2 pb-4
pl-2 pl-4
pr-2 pr-4
px-2 px-4
py-2 py-4
p-2 p-4
pt-1 pt-3
pb-1 pb-3
pl-1 pl-3
pr-1 pr-3
px-1 px-3
py-1 py-3
p-1 p-3
pt-h pt-2
pb-h pb-2
pl-h pl-2
pr-h pr-2
px-h px-2
py-h py-2
p-h p-2
pt-q pt-1
pb-q pb-1
pl-q pl-1
pr-q pr-1
px-q px-1
py-q py-1
p-q p-1
hidden-md-down d-md-down-none
hidden-lg-up d-lg-none

Upgrade Angular 2 to Angular 4

Copy following folders and files:
  1. src/app/shared
  2. src/scss
  3. .angular-cli.json
  4. package.json
Remove folders and files:
  1. node_modules
  2. angular-cli.json
src/app/components/layouts/full-layout.component.html
appMobileSidebarToggler

You have to change mobile-sidebar-toggler class to appMobileSidebarToggler

Change

<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button">&#9776;</button>

To

<button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
appSidebarToggler

You have to change sidebar-toggler class to appSidebarToggler

Change

<a class="nav-link navbar-toggler sidebar-toggler" href="#">&#9776;</a>

To

<a class="nav-link navbar-toggler" href="#" appSidebarToggler>&#9776;</a>
appAsideMenuToggler

You have to change aside-menu-toggler class to appAsideMenuToggler

Change

<a class="nav-link navbar-toggler aside-menu-toggler" href="#">&#9776;</a>

To

<a class="nav-link navbar-toggler" href="#" appAsideMenuToggler>&#9776;</a>
Install project dependencies
$ npm install
Upgrade ng2-bootstrap to ngx-bootstrap

ng2-bootstrap is now ngx-bootstrap, that’s why you have to make following changes in ts and html files:

src/app/components/components.module.ts

Change

...
import { DropdownModule } from 'ng2-bootstrap/dropdown';
...
import { ModalModule } from 'ng2-bootstrap/modal';
...
import { TabsModule } from 'ng2-bootstrap/tabs';
...
@NgModule({
  imports: [
    ...
    DropdownModule.forRoot(),
    ...
  ],
  ...
})

To

...
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...
import { ModalModule } from 'ngx-bootstrap/modal';
...
import { TabsModule } from 'ngx-bootstrap/tabs';
...
@NgModule({
  imports: [
    ...
    BsDropdownModule.forRoot(),
    ...
  ],
  .....
})
src/app/components/modals.component.ts

Change

...
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';
...

To

...
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';
...
src/app/dashboard/dashboard.module.ts

Change

...
import { DropdownModule } from 'ng2-bootstrap/dropdown';
...
@NgModule({
  imports: [
    ...
    DropdownModule
  ],
  declarations: [ DashboardComponent ]
})

To

...
import { DropdownModule } from 'ngx-bootstrap/dropdown';
...
@NgModule({
  imports: [
    ...
    BsDropdownModule
  ],
  declarations: [ DashboardComponent ]
})
src/app/layouts/full-layout.component.html

You have to change dropdownMenu to *dropdownMenu

src/app/app.module.ts

Change

...
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
...
@NgModule({
  imports: [
    ...
    DropdownModule.forRoot(),
    ...
  ],
  declarations: [
    ...
  ],
  providers: [{
    ...
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

To

...
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
...
@NgModule({
  imports: [
    ...
    BsDropdownModule.forRoot(),
    ...
  ],
  declarations: [
    ...
  ],
  providers: [{
    ...
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }