How does angular integrate bootstrap4? Method introduction

This article will introduce to you how to integrate bootstrap4 in angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "angularjs video tutorial", "bootstrap tutorial"

angular integrated bootstrap4

1. Open the terminal and enter the command to create a new angular app

ng new app

2. Integrate bootstrap

Installation ngx-bootstrap and Bootstrap

Open the terminal in the new project and run the following command

npm install ngx-bootstrap bootstrap --save

3. Use bootstrap style

to configure Project: The project must be configured to include Bootstrap CSS to use bootstrap styles.

Add bootstrap style in angular.json: Open the file angular.json from the root directory of the project, find the Style configuration item, and specify the path to bootstrap.min.css. When finished, it should look like this:

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

Note: When making changes to angular.json, you will need to restart the ng service to pick up the configuration changes.

4. Introduce the ngx-bootstrap module to be used in app.module.ts

Opensrc/app/app.module.ts And add the component module you want to use, such as BsDropdownModule.forRoot().

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ...
})

Which bootstrap component to use specifically, click https://valor-software.com/ngx-bootstrap/#/documentation to view

For more programming-related knowledge, please visit: Programming teaching! !

The above is the detailed content of How does angular integrate bootstrap4? Method introduction. For more information, please follow other related articles on the PHP Chinese website!