Skip to content
BranchesTags

Repository files navigation

NG Bootstrap - Angular directives specific to Bootstrap 4

npm versionBuild StatusdevDependency StatusSauce Test Status

Welcome to the Angular version of the Angular UI Bootstrap library. This library is being built from scratch by the ui-bootstrap team. We are using TypeScript and targeting the Bootstrap 4 CSS framework.

As with Bootstrap 4, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.

Table of Contents

Demo

View all the directives in action at https://ng-bootstrap.github.io

Dependencies

Installation

After installing the above dependencies, install ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import our main module:

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

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):

import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}

Other modules in your application can simply import NgbModule:

import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:

map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}

Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive. See this for up-to-date Angular browser support.

  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)

Also check Bootstrap 4's notes on browsers support.

Contributing to the project

Please check the CONTRIBUTING.md doc for contribution guidelines.

Getting Help

Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.

StackOverflow is a much better place to ask questions since:

  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.

To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.

You think you've found a bug?

Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:

  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails

A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem. The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.

We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.

Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.

Code of Conduct

Please take a moment and read our Code of Conduct

About

Angular powered Bootstrap

ng-bootstrap.github.io

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - ngTrumbitta/ng-bootstrap: Angular powered Bootstrap · GitHub
Skip to content
BranchesTags
Repository files navigation
NG Bootstrap - Angular directives specific to Bootstrap 4
npm versionBuild StatusdevDependency StatusSauce Test Status
Welcome to the Angular version of the Angular UI Bootstrap library.
This library is being built from scratch by the ui-bootstrap team.
We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4, this library is a work in progress. Please check out our list of
issues to see all the things we are implementing.
Feel free to make comments there.
Table of Contents
Demo
View all the directives in action at https://ng-bootstrap.github.io
Dependencies
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent, ...],imports: [NgbModule.forRoot(), ...],bootstrap: [AppComponent]})exportclassAppModule{}
Other modules in your application can simply import NgbModule:
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [OtherComponent, ...],imports: [NgbModule, ...],})exportclassOtherModule{}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',}
Supported browsers
We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive.
See this for up-to-date Angular browser support.
  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)
Also check Bootstrap 4's notes on browsers support.
Contributing to the project
Please check the CONTRIBUTING.md doc for contribution guidelines.
Getting Help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.
StackOverflow is a much better place to ask questions since:
  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
You think you've found a bug?
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
  • version of Angular used
  • version of this library that you are using
  • 3rd-party libraries used, if any
  • and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
The best part is that you do not need to create plunks from scratch - you can fork one from our demo page.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Code of Conduct
Please take a moment and read our Code of Conduct
About
Angular powered Bootstrap
ng-bootstrap.github.io
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages