ng-bootstrap

问题 I have dynamically generated divs. On those divs, i have ngPopovers. Inside ngPopover, i have button and i want to click on button button. So i have triggered ng popover like this triggers="mouseenter" . Here is code for view <div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary" ngbPopover="<button>Hello</button>" triggers="mouseenter" > Hover over me! </div> <div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary" ngbPopover="You see, I show up on hover!"

问题 Demo Code: https://stackblitz.com/edit/angular-bife8z?file=app%2Fdatepicker-basic.html i want to Display my selected date like "Sunday, 23/12/18" Format is "Day, DD/MMM/YY" 回答1: you need convert your model (is a NgbDateStruct) in a Date of JavaScript. <ngb-datepicker #dp [(ngModel)]="model" (ngModelChange)="dateJs=toDateJs($event); dateString=toDateString($event)"> </ngb-datepicker> <hr/> <div class="my-3"> Selected Date is: <b>{{ model.day }}/{{ model.month }}/{{ model.year }}</b><br/> <b>{

问题 I'm using ngb-accordion in ng-bootstrap. Toggling a header causes its child components to reinitialize. For example, toggling headers cause dropdowns to reset. It looks like this is because <div class="card-block"></div> is deleted when the panel is hidden. How do I maintain the state of components even when they're "hidden" in the accordion? Template file: <ngb-accordion activeIds="side-bar-accordion-1" (panelChange)="beforeChange($event)"> <div [class.hide-card-block]="status"> <ngb-panel

问题 I the ng-bootstrap library for angular 2; in particular i am looking at: Components as content. I've tried to incorporate the example code into my project with very little success. The error i get from the browser debugger is No provider for NgbModal, i didn't see anything in the example code that had. I am not sure where i can setup an angular 2 project to demo sadly. All i wanted to do was take their example code and implement it into the standardly project that ng new <projectname> will

问题 we just upgraded our application to angular 7 and we noticed that all ngBootstrap modals have now a default autofocus on the close button like the following picture. here is my code: html modal code: <form [formGroup]="storeForm" novalidate> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Test</h4> <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <div

问题 I try to use NgTabset but i get this error TypeError: Cannot read property 'templateRef' of undefined .When i replace the ng-template with the template tag everything works fine .What am i doing wrong? Here is the code: <ngb-tabset> <ngb-tab> <ng-template ngbTabTitle> Tab1 </ng-template> <ng-template ngbTabContent> Here is tab 1 </ng-template> </ngb-tab> </ngb-tabset> 回答1: It's a little hard to know without a Plunkr, but be sure to set templateRef and the # <app-content [templateRef]=

问题 I'm trying to follow along with the ng-bootstrap getting started, it says I should import: import {NGB_DIRECTIVES, NGB_PRECOMPILE} from '@ng-bootstrap/ng-bootstrap'; then request precompile: [ NGB_PRECOMPILE ] in the app.component.ts I'm getting a big red error in Visual Studio Code, saying [ts] Argument of type '{ selector: string; directives: (((typeof NgbAccordion | typeof NgbPanel | typeof NgbPanelTitle)[...' is not assignable to parameter of type '{ selector?: string; inputs?: string[];

问题 I want to import some specific components from ng-bootstrap module in angular 2. can I do that? I have custom tabset created from existing ng-bootstrap component. After importing ng-bootstrap I have getting module duplication error. How can i handle this.!! 回答1: It is easy: just import individual modules from ng-bootstrap instead of importing the whole NgbModule . For example to only import alert-related functionality you would do: import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap

问题 Using the typeahead control allows a user to select a term from a list (Documentation, plnkr). How can I react on a selection? I managed to react on enter by adding a (keyup.enter) event to the input then call another method on my component, but I cannot seem to get an event that fires on mouse-selection in the typeahead-popup. How can I achieve that? 回答1: There is the selectItem output (event) that is fired when a user does item selection (regardless of the selection method). The selectItem

问题 Have 2 things here: Entity management and company. Currently when i click on entity management, company will be hidden. But what i want is company to be collapsed by default. Then when i click on entity management, it will show. <li> <a (click)="isCollapsed=!isCollapsed" aria-controls="collapseExample"><i class="icon-interface-windows"></i>Entity Management</a></li> <div id="collapseExample" [ngbCollapse]="isCollapsed"> <li><a routerLink="/job"> <i class="icon-interface-windows"></i>Company<