ng-bootstrap

问题 I'm trying to set a global config for tooltips using ng-bootstrap. By default I want the container to be "body". I see the code needed for it on the ng-bootstrap page: https://ng-bootstrap.github.io/#/components/tooltip I guess I don't know where to put that. I have tried placing it into the app.component.ts file but it doesn't seem to do anything there. app.component.ts import { Component } from '@angular/core'; import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'; @Component({

问题 Is there a way to make the ng-bootstrap dropdown control work with Angular's reactive forms? Given: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <button class="dropdown-item">Action - 1</button> <button class="dropdown-item">Another Action</button> <button class="dropdown-item">Something else is here</button> </div> </div> How can one

问题 I've got an angular 4 page including a ng-bootstrap modal. My code looks like this. foo.html [...] <button class="btn btn-sm btn-secondary material-icons" (click)="open(content)">search</button> <ng-template #content let-c="close" let-d="dismiss"> content in here </ng-template> [...] foo.ts [...] constructor(private modalService: NgbModal) { } [...] open(content) { let options: NgbModalOptions = { size: 'lg' }; this.modalService.open(content, options); } [...] Now when I click the button the

问题 I can't hide the ngb-carousel indicators and prev-next control trough the css, targeting the css class wouldn't work. Is there any option to hide it? 回答1: In order to affect the css of the ng-bootstrap components, you have to disable ViewEncapsulation. Import it from @angular/core: import { ViewEncapsulation } from '@angular/core' Then disable it for this component in the @Component declaration: @Component({ encapsulation: ViewEncapsulation.None, selector: 'your-template-name', styleUrls: [

问题 So I have a NgbModal with a form in it, and what I want to achieve is closing it on successful submit. This is my ModalComponent: @Component({ selector: 'create-update-transaction', templateUrl: './CreateOrUpdateTransaction.html', providers: [AccountTransactionsService] }) export class CreateOrUpdateTransactionComponent { closeResult: string; modalRef: NgbModalRef; @Input() transaction: Transaction = new Transaction(); @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

问题 Toying around with the NgbModal and want to trigger the open method -> open(content: string | TemplateRef<any>, options: NgbModalOptions) <- from somewhere else than the template code. In my case case I want to pass a string as a parameter when running the method in the .ts file of my component. When running the method via a button in the html file like so: <button (click)="open(content)">Launch demo modal</button> , the code works great, of course with all the code from within the <template>

问题 Let's say i have such modal template: <div class="modal-header"> <h3 [innerHtml]="header"></h3> </div> <div class="modal-body"> <ng-content></ng-content> </div> <div class="modal-footer"> </div> and i'm calling this modal from another component so: const modalRef = this.modalService.open(MobileDropdownModalComponent, { keyboard: false, backdrop: 'static' }); modalRef.componentInstance.header = this.text; How can i put into NgbModal html with bindings etc? Into ng-content 回答1: You can get a

问题 I am trying to include ngb-pagination, how to make that work. this may be a duplicate but since that answer is not working I am posting it again. I have no clue how to make it work <tr *ngFor="let data of reportsData;let i = index; trackBy: trackByFn"> <td>{{data.time_stamp}}</td> </tr> </tbody> <ngb-pagination [collectionSize]="50" [page]="1" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination> 回答1: take a look at this working demo on plunker: Here you can check the

问题 All the examples in Angular Bootstrap's Modals have an external button to trigger the modal itself. In my case I am using a Diagram, which has a function nodeClicked(event, node) . In the function I check whether the user has pressed the CTRL button whilst clicking the node. If not, I need to trigger a Modal stating that the button is not clicked. component.html <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Warning</h4> <button type=

问题 I am building a dashboard-like interface with a set of entities containing comparable data. Each of these entities have an edit-button which I would like to use to open a modal with the respective data displayed. I would like to reuse the same modal template, and display the data from the entity who's edit-button was clicked. I am using Angular2 with ng-bootstrap , which relies on Bootstrap 4 . From the ng-bootstrap modal docs, and it's accompanying plunkr, I was able to create my own working