Incluya Bootstrap en AngularJS usando ng-bootstrap

AngularJS se puede integrar con Bootstrap CSS y Javascript y se puede usar para crear formularios creativos, tablas, barras de navegación, etc.

Pasos:

Asegúrese de que Angular CLI esté presente en su sistema; de lo contrario, ejecute el comando en la terminal para hacerlo.
```
npm install -g @angular/cli
```
Cree un nuevo proyecto en el código de Visual Studio ejecutando el código ng new project-name .
Después de crear un nuevo proyecto, abra ese proyecto en Visual Studio y su terminal, asegúrese de que la ruta esté en el directorio del nuevo proyecto creado. Luego ejecute los siguientes comandos.
```
npm install bootstrap@4.0.0-alpha.6 --save
npm install --save @ng-bootstrap/ng-bootstrap
npm install jquery --save
```
Importe NgbModule en app.module.ts usando import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’; y también incluirlo en las importaciones: lista.
```
imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
```
Realice las siguientes adiciones en angular.json/angular-cli.json, que está disponible en el código de Visual Studio.
```
"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",             
    "src/styles.css"
],
"scripts": [
    "./node_modules/jquery/dist/jquery.min.js",             
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"        
],
```
Hay dos secciones de estilos [] y scripts [] en angular.json, por lo que debemos agregar esta parte solo en la primera sección. También asegúrese de que «./node_modules/bootstrap/dist/css/bootstrap.min.css» esté escrito arriba de «src/styles.css» . No es necesario incluir archivos .js porque las directivas angulares nativas se basan en el marcado y CSS de Bootstrap y no en jQuery o Bootstraps javascript.

índice.html

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
      
    <title>
        Include Bootstrap in AngularJS
    </title>
      
    <base href="/">
   
    <meta name="viewport" 
            content="width=device-width, initial-scale=1">
      
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
  
<body>
    <app-root>
        loading...
    </app-root>
</body>
  
</html>

Este código es solo para mostrar «cargando…» antes de que app.component.html realmente se cargue.

aplicación.componente.html

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
    </script>
      
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class="container">
        <ngb-tabset>
            <ngb-tab title="Welcome">
                <ng-template ngbTabContent>
                    Welcome to GeeksforGeeks
                </ng-template>
            </ngb-tab>
              
            <ngb-tab>
                <ng-template ngbTabTitle>
                    Learn <b>Angular</b>
                </ng-template>
                  
                <ng-template ngbTabContent>
                    Refer various Angular articles available
                    in GeeksforGeeks.
                </ng-template>
            </ngb-tab>
          
            <ngb-tab title="Edit" [disabled]="true">
                <ng-template ngbTabContent>
                    <p>
                        Make various changes in the
                        code and explore
                    </p>
                </ng-template>
            </ngb-tab>
        </ngb-tabset>
    </div>
</body>

Producción:

Seleccionando la pestaña de Bienvenida :
Seleccionando la pestaña Aprender Angular :
La pestaña Editar no se puede seleccionar porque se ha deshabilitado.

Publicación traducida automáticamente

Artículo escrito por janice_shah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta