Keys for configure Bootstrap 3 in Angular 4 Project!

Hi,

Today, I'm going to explain the steps for configure Bootstrap in an Angular application.

First of all, we have to add Bootstrap in our application with:

 > npm install --save ngx-bootstrap@latest  

Then, we have to open the index.html file and add:

<link

rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Then, we have all we need for use Bootstrap 3 in Angular 4.

Now, we have to configure all the html files following the structure:

<div class="row">

<div class="col-xs-12 col-sm-6 col-lg-3">

...

</div>

... (any repeations you need)

</div>

You have to know that any div with class col-**-** need a parent div with class row.

Also, you have to know that col-xs is for mobiles dispositive, col-sm for tablets dispositives and col-lg for computer dispositive.

Here you have the documentation of the Bootstrap 3 style; All you need is here:

http://getbootstrap.com/css/

When you domain all this css styles, you can improve new approach for your develops.

Try it and have fun!

How to migrate an Angular 2 Project to Angular 4?

Hi people,

Angular is growing ;) and now we have to migrate it to be updated!

The steps to upgrade to angular 4 are as follows:

First of all verify the Node Version:

> node -v

To actualice the version download it from: https://nodejs.org/en/download/

Then, we are going to actualice angular/cli:

First, we have to remove the actuals possibles versions:

> npm uninstall -g @angular/cli

> npm uninstall -g @angular-cli

Then, we are going to install it again:

> npm install -g @angular/cli

Then, verify the versions installed:

> ng -v

It must shows something like this:

    _                      _                 ____ _     ___ 
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/                                        
@angular/cli: 1.0.0                                  
node: 6.10.2                                              
os: win32 x64 

Then, goes to the Project directory and actualice the @angular version:

In Windows PC:

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

In Mac PC:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save

In last, actualice typescript version:

> npm install typescript@2.2.1 --save

And finally, start the project:

> ng serve