Angular bootstrap 4

In this entry, I will explain 2 bootstrap ways for Angular.

• Use ng-bootstrap
• Import general Bootstrap

ng-bootstrap

ng-bootstrap is Bootstrap 4 based prepared component.
We can use several bootstrap tips using ng-bootstrap tag.

Install dependencies

need to install ng-bootstrap and bootstrap 4

npm install --save @ng-bootstrap/ng-bootstrap
npm install --save bootstrap

Install latest bootstrap

Try, ng-bootstrap

Module

Import module
app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    CommonModule,
    NgbModule,
    BrowserModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Module name is NgbModule.

Component (Example)

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>
      <ngb-alert &#91;dismissible&#93;="false">
        <strong>Warning!</strong> Hahahaha!
      </ngb-alert>
    </p>
  `
})
export class AppComponent {}

This is an example of alert tile.

Apply general bootstrap

Install bootstrap

npm install --save bootstrap

We can install bootstrap under node_modules/bootstrap.

Change default import styles

See index.html. if you are creating app from angular-cli, you can see it.
If you add css link to this file, any css files are applied, of course bootstrap css file, too.

If you are using smart way,(dynamic import), we can use angular.json file.
Add following to angular.json, import css file dynamically (when compiling)

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

style is under “build”

Use bootstrap as usual (add class name)

Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button class="btn-primary btn">Bootstrap Button</button>
    </div>
    <br />
    <div>
      <button class="btn btn-info">Bootstrap Button2</button>
    </div>
  `
})
export class AppComponent {}