Questions tagged [ng-bootstrap]

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

ng-bootstrap is a set of angular 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

votes

1 answer

Is it possible to obtain a templateRef from a string?

I am interested how you can obtain a TemplateRef by passing a string for example. I don't want to obtain it through a component html, as I just want to save it in a config to be used for all components. I am refering to the ng-bootstrap…

angular angular2-template ng-bootstrap

asked Nov 24 '16 at 16:34

apeshev

votes

1 answer

How can I start the calendar week in ng bootstrap Datepicker from Sunday instead of Monday?

I want to set the ngbDatepicker to begin the week on Sunday instead of the default day Monday. I am trying to use weekStartsOn="0" but it has no effect. This is my html code

angular ng-bootstrap ngb-datepicker

asked Nov 21 '19 at 08:03

Jake Neumann

votes

3 answers

Cannot use Ng-bootstrap in Angular 9

I started my first project in angular with ng-bootstrap and followed the installation procedure, but nevertheless It doesn't work. The message is "Uncaught Error: It looks like your application or one of its dependencies is using i18n. Angular 9…

angular ng-bootstrap angular9

asked Sep 16 '19 at 22:40

Gustavo Quinteros

votes

2 answers

Bootstrap SCSS error after angular update

I have recently upgraded my project from angular version 7 to 8. But when I issue command npm start I am seeing a lot of warnings like the following related with Bootstrap. WARNING: You probably don't mean to use the color value gray in…

angular twitter-bootstrap angular-cli ng-bootstrap angular-devkit

asked Jun 15 '19 at 04:37

Happy Coder

4,255
13
75
152

votes

2 answers

How to open a component from lazy loaded module in NgbModal?

I am facing a problem while trying to load a dynamic component from a lazy loaded module. More precisely, I am trying to open login component in a modal (https://ng-bootstrap.github.io/#/components/modal/examples) rather then in a separate page…

angular typescript ng-bootstrap

asked Jan 06 '18 at 09:13

Abdul Muiz

votes

1 answer

Mock NgbModal in Angular

I need to mock a NgbModal to do some unit tests in angular, but I have no idea how to do this. This is my function: openModal(deviceID: string, productID: string){ const modalRef = this.modalService.open(ProductModal) …

angular unit-testing jasmine ng-bootstrap ng-modal

asked Aug 30 '17 at 11:18

Daria Domagała

votes

1 answer

Angular 2: NgbModal transclude in view

Let's say i have such modal template: and i'm calling this modal from another…

javascript angular typescript ng-bootstrap ng-modal

asked Jun 04 '17 at 21:46

brabertaser19

5,678
16
78
184

votes

1 answer

ngBootstrap for Angular 4 DatePicker in a Reactive Form is Always Required

Using a reactive form I've added the ngbDatePicker:

angular datepicker ng-bootstrap

asked May 25 '17 at 23:17

mtpultz

17,267
22
122
201

votes

2 answers

Nesting ng-bootstrap tabs (Angular 2)

I'm trying to nest a ng-bootstrap tab widget, but the content of the nested tab isn't shown properly. The moment I click on a nested tab, the content itself disappears. Minimal demo What am I doing wrong? This is the view code: …

javascript angular typescript ng-bootstrap

asked May 01 '17 at 12:10

alexandernst

14,352
22
97
197

votes

3 answers

"Unexpected token import" error with Angular4 + Universal + ng-bootstrap

So I upgraded to angular 4+ just so that I can leverage the universal package for server side rendering for SEO purposes. I implemented that in my existing angular 2+ project by upgrading it to angular 4+ and did all the necessary configuration from…

node.js angular ng-bootstrap angular-universal

asked Apr 02 '17 at 12:45

ggoyal

votes

4 answers

Event emitter from bootstrap modal to parent

I want to pass a modal event from the modal component to the modal's parent component, but for some reason I can't seem to get the EventEmitter to work. If anyone has an idea it would be greatly appreciated. The main code is below, a (non-working)…

angular ng-bootstrap

asked Mar 08 '17 at 20:42

Neph

votes

2 answers

Angular TextArea behavior bind to Ctrl-Enter Key

I've been trying to implement a custom

behavior wherein the enter event will fire a function and the ctrl+enter will trigger a newline on the <textarea>. 
I've been trying to read through existing questions here, but most of them are…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/bootstrap-4" class="post-tag grid--cell" title="show questions tagged 'bootstrap-4'" rel="tag">bootstrap-4</a> 
                
                <a href="../../questions/tagged/ng-bootstrap" class="post-tag grid--cell" title="show questions tagged 'ng-bootstrap'" rel="tag">ng-bootstrap</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Nov 01 '18 at 14:44">asked Nov 01 '18 at 14:44</time>
    <a href="../../users/1545664/lemoncodes" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1545664.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="lemoncodes" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1545664/lemoncodes" class="s-user-card--link">lemoncodes</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,371</li>
            <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li>
            <li class="s-award-bling s-award-bling__silver" title="40 silver badges">40</li>
            <li class="s-award-bling s-award-bling__bronze" title="66 bronze badges">66</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-51183307">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>8</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/51183307/how-to-set-mindate-maxdate-of-ngbdatepicker-in-main-component-for-using-the-se" class="question-hyperlink">How to set minDate/maxDate of NgbDatePicker in main component for using the settings in all page?</a></h3>
        <div class="excerpt">In my angular 4 I am using Ng-bootstrap (v1.1.0) I have multiple date pickers under multiple modules. I want to set maxDate configuration in all the location. My folder structure is as follows.
public.module.ts
public.component.ts

----…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/ng-bootstrap" class="post-tag grid--cell" title="show questions tagged 'ng-bootstrap'" rel="tag">ng-bootstrap</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 05 '18 at 04:13">asked Jul 05 '18 at 04:13</time>
    <a href="../../users/3356847/vivekkurien" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/3356847.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="vivekkurien" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/3356847/vivekkurien" class="s-user-card--link">vivekkurien</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,524</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="18 silver badges">18</li>
            <li class="s-award-bling s-award-bling__bronze" title="29 bronze badges">29</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-51013313">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>8</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>8</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/51013313/bootstrap-dropdown-with-angular-6" class="question-hyperlink">Bootstrap dropdown with Angular 6</a></h3>
        <div class="excerpt">I'm trying to create a dropdown item in a Bootstrap navbar using Angular 6. My code is working when I test it online : 
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
  <li class="nav-item dropdown" >
    <a…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/drop-down-menu" class="post-tag grid--cell" title="show questions tagged 'drop-down-menu'" rel="tag">drop-down-menu</a> 
                
                <a href="../../questions/tagged/bootstrap-4" class="post-tag grid--cell" title="show questions tagged 'bootstrap-4'" rel="tag">bootstrap-4</a> 
                
                <a href="../../questions/tagged/ng-bootstrap" class="post-tag grid--cell" title="show questions tagged 'ng-bootstrap'" rel="tag">ng-bootstrap</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 24 '18 at 19:31">asked Jun 24 '18 at 19:31</time>
    <a href="../../users/9198690/krirkrirk" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/9198690.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="krirkrirk" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/9198690/krirkrirk" class="s-user-card--link">krirkrirk</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">427</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="3 silver badge">3</li>
            <li class="s-award-bling s-award-bling__bronze" title="8 bronze badge">8</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-50850341">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>8</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/50850341/add-date-range-to-ngbinputdatepicker-input-field" class="question-hyperlink">Add date range to NgbInputDatepicker input field</a></h3>
        <div class="excerpt">I am working with Angular 5.2 and ngbootstrap 1.1.  The library has a couple of different datepicker options one that serves as a component and another that serves as a directive. 
I am working with the directive.  Below is a link to an example of…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/angular5" class="post-tag grid--cell" title="show questions tagged 'angular5'" rel="tag">angular5</a> 
                
                <a href="../../questions/tagged/ng-bootstrap" class="post-tag grid--cell" title="show questions tagged 'ng-bootstrap'" rel="tag">ng-bootstrap</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 14 '18 at 05:41">asked Jun 14 '18 at 05:41</time>
    <a href="../../users/4184670/winnemucca" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4184670.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Winnemucca" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4184670/winnemucca" class="s-user-card--link">Winnemucca</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">3,309</li>
            <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li>
            <li class="s-award-bling s-award-bling__silver" title="37 silver badges">37</li>
            <li class="s-award-bling s-award-bling__bronze" title="66 bronze badges">66</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>