ANGULAR POWERED BOOTSTRAP | BENEFITS | BOOTSTRAP INSTALLATION | FUNCTION

                                                          ANGULAR DEFINATION

 What is angular?

Angular is a platform and framework and open- source web application for building single page client application using html and type script. angular is invented by  "MISKO HEVERY " in 2009 at brat tech LLC.

                                           

Benefits

• A JavaScript framework    
• Easy testing
• Type script
• Structured reusable components

BOOTSTRAP

What is bootstrap?

  Bootstrap is  a  frontend and open -source framework  for developing  responsive and mobile -first website. bootstrap  was developed by "  MARK OTTO and JACOB THORNTON.

 

    Benefits

• Mobile - first approach
• browser compatibility
• Responsive features
• Short development time

      ANGULAR POWERED BOOTSTRAP 

 What is angular powered bootstrap?

 angular widget built from the ground up using  only bootstrap for CSS with  API designed  for the  angular ecosystem.

we have  created angular  and bootstrap and have spent several years doing widget development . A number of team member and core angular contributed.

  What is angular powered  bootstrap and its installation ?

  It is strongly recommended  to use angular CLI for setting up new project.  If you have an Angular ≥  9 CLI project, you can simply use  schematics to add ng-bootstrap library to it.

 run the following:

ng add @ng-bootstrap/ng-bootstrap

 This will install ng-bootstrap for the default application specified in angular .Jason. you have multiple projects and you want to target a specific application, you could specify the --project option

ng add @ng-bootstrap/ng-bootstrap --project myproject

Manual Installation

  prefer not to use schematics for add ng-bootstrap to an older project, you'll need to do the following:

• Add bootstrap and @ng-bootstrap/ng-bootstrap dependencies from npm
• Install the @angular/localize polyfill
• Add bootstrap CSS/SCSS to your project (no javascript is required)
• Import NgbModule or any other component module like NgbPaginationModule in your application.

Bootstrap (CSS only)

To add Bootstrap CSS to your application using your alternate way (see Bootstrap instructions).

For example you could install Bootstrap from npm

npm install bootstrap

and add Bootstrap CSS or SCSS to project.

In case you're using CSS, you  need to add Bootstrap styles to your angular.json configuration:

"yourApp": {
  "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]
      }
    }
  }
}

you're use SCSS, please add this to your styles.scss directly:

@import "~bootstrap/scss/bootstrap";

@angular/localize Polyfill

If you're using Angular ≥ 9.0.0 and ng-bootstrap ≥ 6.0.0, you  have to install the @angular/localize polyfill:

ng add @angular/localize

ng-bootstrap

Installing the library itself from npm is simply doing

npm install @ng-bootstrap/ng-bootstrap

Once installed  need to import our main module and you're better to go

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
})
export class YourAppModule {
}

Alternative imports

Preferably importing the whole library with NgbModule, you can  import modules with components you need, ex. pagination and alert.

The resulting bundle will be smaller in this case.

import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbPaginationModule, NgbAlertModule],
})
export class YourAppModule {
}

  Function

• Time picker
• Tab set
• Accordion
• Alert
• popover