Stack Overflow
Stack Overflow

Questions tagged [ng-bootstrap]

A set of Angular 2+ directives based on version 4+ of Twitter Bootstrap's markup and CSS.

enter image description here

ng-bootstrap is a set of directives based on version 4+ of Twitter Bootstrap's markup and CSS.

This project was created by the angular-ui team, the same people who are behind the widely popular set of Bootstrap-powered directives for AngularJS 1.x.

The goal is to provide native Angular directives without any dependency on jQuery or Bootstrap's JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure Angular directive. Most of the time the resulting directive is smaller as compared to the original JavaScript code size and better integrated into the Angular ecosystem.

Currently supported directives are:

1703 questions
12
votes
2 answers

angular2 ngbdatepicker how to format date in inputfield

I am using ng-bootstrap Datepicker. I wants to format a date displayed in the input field which is model. I looked at API and haven't found any example other then NgbDateParserFormatter without explaining much :( In Angular 1, it was as simple as…
d-man
  • 57,473
  • 85
  • 212
  • 296
11
votes
8 answers

ng-bootstrap - Typeahead dropdown width

I started using the ng-bootstrap Typeahead component and I'm pretty happy with that. One thing I would like to achieve is to get the dropdown items to have the same width as the input field, while the default behavior applies a width accordingly to…
Momo
  • 345
  • 1
  • 5
  • 16
11
votes
3 answers

How should I initialize ngbDatepicker with formControlName instead of [(ngmodel)]

I need to use ReactiveForms, with [formGroup] and formGroupName="field"
Juliatzin
  • 18,455
  • 40
  • 166
  • 325
11
votes
5 answers

How to detect date selection in ng-bootstrap Datepicker on input field?

We use the ng-bootstrap Datepicker as Directive in our project: The current…
Florian Gössele
  • 4,376
  • 7
  • 25
  • 49
11
votes
2 answers

Keep popover open when hovering it

I have set up an element that triggers a NgbPopover on hover: Hover me Currently, the popover will be shown when hovering the element and consecutively…
tilo
  • 14,009
  • 6
  • 68
  • 85
11
votes
2 answers

How to style ng-bootstrap components in Angular 2

I'm trying to apply styles to the ngbTooltip component in my Angular 2 app. I apply the directive as:
Element text
But since Angular 2 applies style scoping, I can't directly style the .tooltip class in…
Martín Coll
  • 3,368
  • 3
  • 37
  • 52
11
votes
2 answers

How can I add bootstrap to Angular2 via system.js

I'm trying to add bootstrap module to my ng2 application with by https://github.com/ng-bootstrap/ng-bootstrap. But all time getting this error: It's my index file, maybe I have some mistake in my file? index.html: …
Yaroslav Polubedov
  • 1,352
  • 2
  • 11
  • 13
10
votes
1 answer

Error: 'ngb-tab' is not a known element. Angular 11

I am upgrading my application to angular 11 and facing issue with bootstrap tab Error: 'ngb-tab' is not a known element: If 'ngb-tab' is an Angular component, then verify that it is part of this module. 'ngb-tabset' is not a known element: If…
Khizar Shujaat
  • 441
  • 1
  • 5
  • 19
10
votes
4 answers

NgbModal - Custom Class Styling

I have an Angular 6 app that I am trying to implement a modal window that slides in from the right side of the screen, like shown here: https://codepen.io/anon/pen/OayRVy But, no matter what I try, I cannot override the positioning of the modal…
Cody Pritchard
  • 703
  • 2
  • 15
  • 31
10
votes
2 answers

Angular testing - ngBootstraps typeahead

I am currently using a autocomplete mechanism (typeahead) of ngBootstrap. Now I want to unit test if a method is called on every sequence of an input event. The error on my test case is currently: Cannot read property 'pipe' of…
MarcoLe
  • 2,309
  • 6
  • 36
  • 74
10
votes
2 answers

Alternative to /deep/

I want to change the styles of ng bootstrap pagination component and using /deep/ links in an Angular 6 app. The following code works fine but the console is showing a warning that the code is deprecated. So, how should I change it to get rid of the…
s4tr2
  • 415
  • 1
  • 9
  • 27
10
votes
3 answers

How to remove the selection indicator(dot) in ng-bootstrap radio buttons

Here is the example provided by ng bootstrap. I cop the same code with only label and value changes into my angular project and get the following result. Here's the rendered HTML
MiDaa
  • 1,149
  • 1
  • 11
  • 25
10
votes
3 answers

How to change the background-color of a Bootstrap card-header?

I'm trying to change the background-color of a bootstrap card-header, but when I add background-color: #00AA9E it seems to somehow destroy the look of the header..? Has anyone ever seen this before? Does it have something to do with the fact that…
Beese
  • 495
  • 2
  • 5
  • 19
10
votes
3 answers

Angular 4 get form value from modal

I am having issues to get the form value from the modal when I submit the form. The log says the addMountForm is undefined. I have provided code snippets of my html as well as component. I would appreciate your help.
rvd
  • 157
  • 1
  • 1
  • 9
10
votes
5 answers

Animation for carousel with ng-boostrap and Angular 2

I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue). My question: is there a way to use CSS as a…
user3682091
  • 755
  • 1
  • 7
  • 17
1 2 3
…
99 100