Formatting

Are you a NGX Bootstrap library beginner? Fear not!

NGX Bootstrap is a library of Angular directives and components based on the Bootstrap CSS framework. It makes it easy to use Bootstrap components in an Angular application.

To get started with NGX Bootstrap, follow these steps:

  1. Install the necessary dependencies:
npm install bootstrap @ng-bootstrap/ng-bootstrap

2. Import the necessary modules in your app.module.ts file:

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

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

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

3. Use the components in your templates:

<ngb-alert [dismissible]="false" [type]="'success'">Success message</ngb-alert>
<ngb-progressbar [value]="50"></ngb-progressbar>

Here, we’re using the ngb-alert and ngb-progressbar components. We’re also setting some properties on them using Angular binding syntax.

There are many more components and directives available in NGX Bootstrap, and they all have detailed documentation on the official website: https://ng-bootstrap.github.io/#/home

If you’re looking for video tutorials, the official NGX Bootstrap YouTube channel has a playlist of introductory videos: https://www.youtube.com/playlist?list=PLRjHsmMqsGjOhwW3xnIvQf2zXfY98C5i4

Additionally, there are many other Angular and Bootstrap video tutorials available on YouTube, and many of them will touch on NGX Bootstrap as well. Just search for “Angular tutorial” or “Bootstrap tutorial” and you’ll find plenty of resources.

You may also like...