Angular Bootsrap .Net Core integration - Material Design for Bootstrap (2024)

Requirements:

  • .NET Core 2.x SDK,
  • Node.js,
  • Angular CLI.

Info:

In case you have existing ASP.NET Core Angular application, you can skip steps 1-17 and start from Step 18.

Step 1: Create new angular project using Angular CLI command:, and change directory to your's project with cd command

  • Terminal
  ng new your-angular-project --style=scss cd your-angular-project

Step 2: Create ASP.NET Core Web API project using dotnet new your-api-name command:

  • Terminal
  dotnet new api

Step 3: Open your's project in Visual Studio Code or other editor

Step 4: Build and run your's project using ng build and dotnet run

Step 5: Open browser on http://localhost:5000/api/values. Be sure to add /api/values to the URL, because that's the default route for the newly created Web API

Step 6: Open .angular-cli.json file, and change line "outDir": "dist" to "outDir": "wwwroot"

Step 7: Delete ValueController.cs file located in Controllers directory.

Step 8: On the same directory create new file called HelloController.cs, and paste there below code:

  • HelloController.cs
  using System; using Microsoft.AspNetCore.Mvc; namespace hello_world { [Route("api/[Controller]")] public class HelloController : Controller { [HttpGet] public IActionResult Greetings() { return Ok("Hello from ASP.NET Core Web API."); } } }

Step 9: Modify Startup.cs file by adding below code just above app.UseMvc();

  • Startup.cs
  app.UseDefaultFiles(); app.UseStaticFiles();

Step 10: On src/app directory create new file called app.service.ts and fill it with code from below:

  • app.service.ts
  import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Rx'; // Import RxJs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; @Injectable() export class AppService { private greetUrl = 'api/Hello'; // Resolve HTTP using the constructor constructor(private _http: Http) { } sayHello(): Observable<any> { return this._http.get(this.greetUrl).map((response: Response) => { return response.text(); }); } }

Step 11: Modify file app.module.ts located in src/app directory by importing HttpModule and AppService, and using AppService as providers

  • app.module.ts
  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { AppService } from './app.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule ], providers: [AppService], bootstrap: [AppComponent] }) export class AppModule { }

Step 12: Modify app.component.ts file to inject AppService

  • app.component.ts
  import { Component, OnInit } from '@angular/core'; import { Http, Response } from '@angular/http'; import { AppService } from './app.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { greetings = ''; constructor(private _appService: AppService) { } ngOnInit(): void { this._appService.sayHello() .subscribe( result => { this.greetings = result; } ); } }

Step 13: Modify app.component.html file to show our greetings

  • app.component.html
  <h2 class='panel-heading'> {{greetings}} </h2> <hr/>

Step 14: Build Angular using ng build command

Step 15: Build DotNet using dotnet build command

Step 16: Run DotNet using dotnet run command

Step 17: Open your's browser on localhost:5000 and test your's application!

Step 18: GitHub npm install

  • Terminal
  npm install --save angular-bootstrap-md chart.js@2.5.0 @types/chart.js @fortawesome/fontawesome-free animate.css hammerjs

Step 19:to app.module.ts add

  • app.module.ts 
  import { NgModule } from '@angular/core'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; @NgModule({ imports: [ MDBBootstrapModule.forRoot() ] });

Step 20:Make sure that styleExt is set to "scss" in angular.json file, if not change:

  • angular.json
  "schematics": { "@schematics/angular:component": { "styleext": "css" } }

to

  • angular.json
  "schematics": { "@schematics/angular:component": { "styleext": "scss" } }

Step 21: Make sure you have src/styles.scss. If you have src/styles.css instead, rename it to .scss.

if you want to change styles in existing project you can use ng set defaults.styleExt scss

Step 22:add below lines to angular-cli.json:

  • angular-cli.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" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/hammerjs/hammer.min.js" ],

Step 23: Build Angular using ng build command

Step 24: Build DotNet using dotnet build command

Step 25: Run DotNet using dotnet run command

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file from

  • angular.json
  "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss"

to

  • angular.json
  "node_modules/bootstrap/scss/bootstrap.scss"

Requirements:

  • .NET Core 2.x SDK,
  • Node.js,
  • Angular CLI.

Info:

In case you have existing ASP.NET Core Angular application, you can skip steps 1-17 and start from Step 18.

Step 1: Create new angular project using Angular CLI command:

  • Terminal
  ng new your-angular-project --style=scss

Step 2: Create ASP.NET Core Web API project using dotnet new your-api-name command:

  • Terminal
  dotnet new api

Step 3: Open your's project in Visual Studio Code or other editor

Step 4: Build and run your's project using ng build and dotnet run

Step 5: Open browser on http://localhost:5000/api/values. Be sure to add /api/values to the URL, because that's the default route for the newly created Web API

Step 6: Open .angular-cli.json file, and change line "outDir": "dist" to "outDir": "wwwroot"

Step 7: Delete ValueController.cs file located in Controllers directory.

Step 8: On the same directory create new file called HelloController.cs, and paste there below code:

  • HelloController.cs
  using System; using Microsoft.AspNetCore.Mvc; namespace hello_world { [Route("api/[Controller]")] public class HelloController : Controller { [HttpGet] public IActionResult Greetings() { return Ok("Hello from ASP.NET Core Web API."); } } }

Step 9: Modify Startup.cs file by adding below code just above app.UseMvc();

  • Startup.cs
  app.UseDefaultFiles(); app.UseStaticFiles();

Step 10: On src/app directory create new file called app.service.ts and fill it with code from below:

  • app.service.ts
  import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Rx'; // Import RxJs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; @Injectable() export class AppService { private greetUrl = 'api/Hello'; // Resolve HTTP using the constructor constructor(private _http: Http) { } sayHello(): Observable<any> { return this._http.get(this.greetUrl).map((response: Response) => { return response.text(); }); } }

Step 11: Modify file app.module.ts located in src/app directory by importing HttpModule and AppService, and using AppService as providers

  • app.module.ts
  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { AppService } from './app.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule ], providers: [AppService], bootstrap: [AppComponent] }) export class AppModule { }

Step 12: Modify app.component.ts file to inject AppService

  • app.component.ts
  import { Component, OnInit } from '@angular/core'; import { Http, Response } from '@angular/http'; import { AppService } from './app.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { greetings = ''; constructor(private _appService: AppService) { } ngOnInit(): void { this._appService.sayHello() .subscribe( result => { this.greetings = result; } ); } }

Step 13: Modify app.component.html file to show our greetings

  • app.component.html
  <h2 class='panel-heading'> {{greetings}} </h2> <hr/>

Step 14: Build Angular using ng build command

Step 15: Build DotNet using dotnet build command

Step 16: Run DotNet using dotnet run command

Step 17: Open your's browser on localhost:5000 and test your's application!

Step 18: Obtaining MDB Pro Authentication Token

  1. Visit https://git.mdbootstrap.com/ and log in.
  2. From top right corner click at your avatar and choose "Setting → Access Tokens"or navigate directly to: https://git.mdbootstrap.com/profile/personal_access_tokens/
  3. Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
    Angular Bootsrap .Net Core integration - Material Design for Bootstrap (1)
  4. Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose you will have to generate new token again.
    Angular Bootsrap .Net Core integration - Material Design for Bootstrap (2)

Step 19: Install both MDB Pro Package and 3rd party libraries perfoming:

  • Terminal
  npm install --save git+https://oauth2:<your-mdb-pro-auth-key>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git @types/chart.js chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 @fortawesome/fontawesome-free animate.css

For example:

  • Terminal
  npm install --save git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git @types/chart.js chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 @fortawesome/fontawesome-free animate.css

Step 20: add following imports and providers to your app.module.ts:

  • app.module.ts
  import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard'; import { MDBSpinningPreloader } from 'ng-uikit-pro-standard'; import { NgModule } from '@angular/core'; ... imports: [ ... MDBBootstrapModulesPro.forRoot(), ... ], providers: [ ... MDBSpinningPreloader, ... ]

Step 21: Into your angular.json file add styles

  • 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/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "node_modules/animate.css/animate.css", "src/styles.scss" ]

and scripts

  • angular.json
  "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" ],

Step 22: if you want to use maps you will have to npm i --save @agm/core and then add import { AgmCoreModule } from '@agm/core'; to your app.module. To use them you will also need add it to your imports AgmCoreModule.forRoot({ apiKey: 'Your_api_key' })

Step 23: Build Angular using ng build command

Step 24: Build DotNet using dotnet build command

Step 25: Run DotNet using dotnet run command

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file from

  • angular.json
  "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"

to

  • angular.json
  "node_modules/bootstrap/scss/bootstrap.scss"
Angular Bootsrap .Net Core integration - Material Design for Bootstrap (2024)
Top Articles
Crispy Artichoke Hearts Recipe
Turkey Tetrazzini Recipe
10 planilhas interativas e envolventes da letra y - Recursos de ensino (2023) - Educação fora
Carta y Printables pré -escolares
Latest Posts
Scruffy aubergine lasagne | Jamie Oliver pasta recipes
Step-by-Step Homemade Kimchi Recipe • Heartbeet Kitchen
Article information

Author: Edwin Metz

Last Updated:

Views: 5550

Rating: 4.8 / 5 (78 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Edwin Metz

Birthday: 1997-04-16

Address: 51593 Leanne Light, Kuphalmouth, DE 50012-5183

Phone: +639107620957

Job: Corporate Banking Technician

Hobby: Reading, scrapbook, role-playing games, Fishing, Fishing, Scuba diving, Beekeeping

Introduction: My name is Edwin Metz, I am a fair, energetic, helpful, brave, outstanding, nice, helpful person who loves writing and wants to share my knowledge and understanding with you.