Angular 9 Bootstrap 4.5 tabs working example - therichpost

1. Very first, you need to run below commands to set Bootstrap 4.5 behaviour into your angular 9 application:

npm install --save bootstrap
npm install jquery --save
npm install --save @types/jquery
npm install popper.js --save

2. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

3. Now you need to add below code into your app.component.html file:

<div class="container">
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active show">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
  </div>

#angular 8 #angular 9 #bootstrap 4 #bootstrap 4.5

What is GEEK

Buddha Community

Angular 9 Bootstrap 4.5 tabs working example - therichpost

1. Very first, you need to run below commands to set Bootstrap 4.5 behaviour into your angular 9 application:

npm install --save bootstrap
npm install jquery --save
npm install --save @types/jquery
npm install popper.js --save

2. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

3. Now you need to add below code into your app.component.html file:

<div class="container">
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active show">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
  </div>

#angular 8 #angular 9 #bootstrap 4 #bootstrap 4.5

Angular 9 bootstrap 4.5 popup login form

1. Here are the basics commands to install angular 9 on your system:

npm install -g @angular/cli 
ng new angularpopup //Create new Angular Project
$ cd angularpopup // Go inside the Angular Project Folder
ng serve --open // Run and Open the Angular Project
http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set bootstrap environment into your angular 9 application:

npm install --save bootstrap

3. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
...

#angular 8 #angular 9 #bootstrap 4 #bootstrap 4.5

Angular 9 Bootstrap 4.5 tabs working example - therichpost

#angular #angular9 #bootstrap #bootstrap4 #bootstrap5

How to Make Simple Sidebar Template with Bootstrap 4 and Angular 9?

In this post, I will tell you, How to make simple sidebar template with Bootstrap 4 and Angular 9?

In this, you can see bootstrap toggle sidebar navigation menu. During click on Toggle menu, sidebar navigation will show and hide.

#angular 8 #angular 9 #angular7 #bootstrap 4 #bootstrap templates

Angular 9 Bootstrap 4.5 tabs working example

#angular #angular9 #bootstrap #bootstrap4