Angular2 Bootstrap Interface Library Ng-bootstrap detailed _angularjs

Prepare angular 2 environment

Ng-bootstrap is based on angular 2, so it is necessary to prepare the angular 2 environment first.

Using Ng-bootstrap

Download Ng-bootstrap

Ng-bootstrap uses bootstrap 4.0 ALPHA2, so you need to download the bootstrap first and recommend the form of NPM package:

NPM Install bootstrap@4.0.0-alpha.2--save

Then download the ng-bootstrap and use the same form as NPM package:

NPM Install @ng-bootstrap/ng-bootstrap--save

Modify Systemjs.config.js

Now you need to modify the Systemjs.config.js file so that SYSTEMJS can load the Ng-bootstrap correctly:

Map tells the System Loader where to look for things
var map = {
 ' app ':      ' dist ',//' dist ',
 ' @angular ': c5/> ' node_modules/@angular ', '
 angular2-in-memory-web-api ': ' Node_modules/angular2-in-memory-web-api ',
 ' Rxjs ':      ' node_modules/rxjs ',
 //Add ng-bootstrap location map 
 ' @ng-bootstrap ':    ' node_modules/@ Ng-bootstrap '
};
Packages tells the System loader how to load when no filename and/or no extension
var packages = {
 ' app ': {m Ain: ' Main.js ', defaultextension: ' JS ', Format: ' AMD '},
 ' Rxjs ': {defaultextension: ' js '},
 ' Angular2-in-memory-web-api ': {main: ' Index.js ', defaultextension: ' JS '},
 //Add Ng-bootstrap package config
 ' @ng-bootstrap/ng-bootstrap ': {main: ' Index.js ', defaultextension: ' JS '}
};

Modify Index.html

The index.html file also needs to be modified to associate the bootstrap style sheet in:

<link rel= "stylesheet" href= "Node_modules/bootstrap/dist/css/bootstrap.css"/>

Modify App.component.ts

You also need to modify the App.component.ts file and import ng-bootstrap the instructions:

Import {Component, OnInit} from ' @angular/core ';
Import {http_providers} from ' @angular/http ';
Import {providerouter, router_directives} from ' @angular/router ';
Import Ng-bootstrap directives
Import {ngb_directives, ngb_precompile} from ' @ng-bootstrap/ng-bootstrap ';

Import {routes} from './app.routes ';

@Component ({
 //moduleid:module.id,
 selector: ' app ',
 providers: [Http_providers],
 templateurl: ' Dist/app.component.html ',
 styleurls: [' dist/app.component.css '],
 ///Ng-bootstrap required Precompile Directives
 precompile: [Ngb_precompile],
 //Add Ng-bootstrap directives to app
 directives: [
  Router_directives, Ngb_directives
 ],
 pipes: []
})
Export class Appcomponent implements OnInit {

 Ngoninit () {
 }

}

ng-bootstrapProvides components in the form of instructions (Directive) to facilitate use in HTML view, the selector (selector) uses the same prefix NGB, and the class name uses the NGB prefix uniformly.

The following components are available ng-bootstrap , followed by the use of Ngbalert as an example ng-bootstrap .

The selector of Ngbalert is Ngb-alert, which supports Input with dismissible and type, with close in Output.

Next, let's look at a ngbalert example:

<p>
 <ngb-alert [dismissible]= "false" >
 <strong>Warning!</strong> Better Check yourself, you ' re not looking too good.
 </ngb-alert>
</p>

The display effect is as follows:

A little more complicated, add the following code to the App.component.ts file:

Export class Appcomponent implements OnInit {

 alert:ialert[];

 Ngoninit () {
  This.alert = [
   {
    id:1,
    type: ' Success ', message
    : ' It is a success alert ',
   },
   {
    id:2,
    type: ' Info ', message
    : ' It's an info alert ',
   },
   {
    id:3,
    type: ' Warning ', message
    : ' It's a Warning alert ',
   },
   {
    id:4,
    type: ' Danger ', message
    : ' This is a danger alert ',
   }
  ];
 }

 Closealert (alert:ialert) {
  Const INDEX:NUMBER = this.alerts.indexOf (alert);
  This.alerts.splice (index, 1);
 }
}

Interface Ialert {
 id:number;
 type:string;
 message:string;
}

Add instructions to the corresponding HTML file *ngFor , bind the alerts array:

<p *ngfor= "Let Alert of Alerts" >
 <ngb-alert
  [type]= ' Alert.type '
  (Close) = "Closealert (alert) ">\{\{Alert.message}}
 </ngb-alert>
</p>

The results are now as shown in the following illustration:

ng-bootstrapThere are more components that are not listed.

Summarize

Realize Ng-bootstrap people or the original do angular-ui those people, can say the formula is the original formula, but this taste is very different from the original, completely switch to the ANGULAR2 style.

Overall, however, the introduction of NG-BOOTSTRAP will greatly promote the application of angular 2 in the actual project, not just in the demo phase, because Angularjs 1.x period, many projects are Angularjs + Ui-bootstra P as the foundation, now has the angular 2 ng-bootstrap, believed already by many people to stir up! The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.