In this article, I will so you how to create the angular 7 project and implement ngx-bootstrap using visual studio 2017.

Before we start the angular project, we need a working environment

• The latest version of Node.js and NPM installed
• If you have installed node.js already updated your node.js and NPM to latest version.
• Visual studio 2017

Install Lastest Angular Cli

• Open Command Promote by (Windows key + R) and Type “cmd” hit Enter
• Now simply run the following Command to install the Angular

“ npm install -g @angular\cli ”

-g : This will install the Angular cli globally on our system.

Create a Angular 7 Project From Visual Studio.

• Open the visual studio Click on File=> Project
• Choose .Net Core => Asp.net Core Web Application
• Choose Angular Project and Click on Ok.

Now our project folder look like this Visual studio create the project on Angular 5 if .net core 2 .1  and Angular 6 on angular 2.2

Now delete the ClientApp Folder from a project. Create an angular 7 project. In the Same Folder where we delete the ClientApp project. By following Command line.

“ng new ClientApp” hit Enter.

It asks you “Would you like to add Angular routing? (y/n)” press “y”

Again it asks you to “which stylesheet format would you like to use?” choose your option. I will choose “css”. After choosing the desired stylesheet it starts downloading the required files. It takes 4-5 minutes. it depends on your system.

e

Now install and Add the Bootstrap 4 on our Project. Their different method to add Bootstrap in our project. But we use ngx-Bootstrap, it contains all core (and not only) Bootstrap components powered by Angular. So you don't need to include original JS components, but we are using markup and CSS provided by Bootstrap.

Install the ngx-Bootstrap from npm it will update our Angular project with necessary ngx-bootstrap dependencies, make a change to package.json,angular.json. by following command line. To know more about ngx-bootstrap visit it official site ngx-bootstrap(https://valor-software.com/ngx-bootstrap/#/documentation#getting-started)

Go to Client app Folder path in cmd

ng add ngx-bootstrap

Create a new module in (/src/app/) name it mybootstrap.module.ts which will import all ngx-bootstrap components module and share it with main module app.module.ts, why we create separate module it easy to find out which component are we using in our project. It looks like below

mybootstrap.module.ts

import { NgModule } from '@angular/core';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
  ],
  exports: [
    BsDropdownModule,
    ModalModule
  ],
  declarations: [],
  providers: []
})

export class MyBootstrapModule {} 

Import MybootstrapModule in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyBootstrapModule } from './mybootstrap.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MyBootstrapModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>
<div class="row">
  <div class="col-md-6">
    <h2>BootStap Drop Down Example</h2>
    <div class="btn-group" dropdown>
      <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
        Click To see dropdown
        <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem">
          <a class="dropdown-item" href="#">ngx-BootStrap</a>
        </li>
        <li role="menuitem">
          <a class="dropdown-item" href="#">Angular BootStrap</a>
        </li>
        <li class="divider dropdown-divider"></li>
        <li role="menuitem">
          <a class="dropdown-item" href="#">ttmind</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <h2>ngx-Bootstrap Modal Popup Example</h2>
    <button type="button" class="btn btn-primary" (click)="staticModal.show()">
      Open Modal Popup</button>
    <div class="modal fade" bsModal #staticModal="bs-modal" 
      [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" 
        aria-labelledby="mySmallModalLabel"
         aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title pull-left">Modal Popup</h4>
            <button type="button" class="close pull-right" aria-label="Close" 
                (click)="staticModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            This is static ngx-Bootstrap modal popup, backdrop click will not close it. Click
            <b>×</b> to close modal.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Browser View

Conclusion

So, Today we learn how to Create an angular 7 project on Visual Studio 2017 and Install the ngx-bootstrap.

I hope this article will help you. If you have any doubts please comment on the Comment section

Learn more.

Token based authentication in Angular with Web API

AspNet MVC Core 2.0 Model validations with custom attribute