ng-bootstrap | 易学教程

NgbModal.open not working in Angular 4

阅读更多关于 NgbModal.open not working in Angular 4

I want to display a message in a modal using angular 4.0.0 and ng-bootstrap 1.0.0-beta.4 but it does not display the modal. app-module.ts @NgModule({ // ... declarations: [ LoginComponent ], imports: [ // ... NgbModule.forRoot() ], entryComponents: [LoginComponent], }) export class AppModule { } login.component.ts @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { @ViewChild('examplemodal') private modalRef: TemplateRef<any>; constructor(private modalService: NgbModal) { } //.... some event that fires

Angular + ng-bootstrap - Modal : window does not open

阅读更多关于 Angular + ng-bootstrap - Modal : window does not open

问题 I'm new with Angular, and i have a problem while trying the simple example with ng-bootstrap modal. I just tried to have a window open and instead it appears in my application. I'd like to have a new window open as it is explained in the ng-bootstrap example. I am using: - Angular 4.0.0 - Bootstrap 4.0.0-alpha.6 - @ng-bootstrap/ng-bootstrap 1.0.0-alpha.22 I have in my file.html : <template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title<

Cannot close ng-bootstrap Modal

阅读更多关于 Cannot close ng-bootstrap Modal

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>(); constructor(private modalService: NgbModal, private transactionsService: AccountTransactionsService) {}

Why would you ever call .call() on Observable functions?

阅读更多关于 Why would you ever call .call() on Observable functions?

I am a relative beginner in Angular, and I am struggling to understand some source I am reading from the ng-bootstrap project. The source code can be found here . I am very confused by the code in ngOnInit: ngOnInit(): void { const inputValues$ = _do.call(this._valueChanges, value => { this._userInput = value; if (this.editable) { this._onChange(value); } }); const results$ = letProto.call(inputValues$, this.ngbTypeahead); const processedResults$ = _do.call(results$, () => { if (!this.editable) { this._onChange(undefined); } }); const userInput$ = switchMap.call(this._resubscribeTypeahead, ()

How to configure NgbDropdown to display the selected item from the dropdown

阅读更多关于 How to configure NgbDropdown to display the selected item from the dropdown

In ng-bootstrap NgbDropdown , how would you display the text of the selected button so that what ever item the user selects replaces the default text initially shown? In the example below, the goal is to display whatever sorting option the user selects. <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>Sort by...</button> <div class="dropdown-menu" aria-labelledby="sortMenu"> <button class="dropdown-item">Year</button> <button class="dropdown-item">Title</button> <button class="dropdown-item">Author</button> </div> </div> Thanks

Best practice for calling the NgbModal open method

阅读更多关于 Best practice for calling the NgbModal open method

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></template> in the html file. Trying to accomplish something with this: logoutScreenOptions:

Event emitter from bootstrap modal to parent

阅读更多关于 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) plunk forked from the ng-bootstrap demo is here: http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview app.ts @Component({ selector: 'my-app', template: ` <div class="container-fluid" (notifyParent)="getNotification($event)"> <template

ngbPopover with html inside

阅读更多关于 ngbPopover with html inside

Is it possible to put html inside ngbPopover? Exactly, I need to put list of items. Currently I have this parameters: `ngbPopover="{{column.popup.get(row)}}" triggers="mouseenter:mouseleave" popoverTitle="{{column.popup.title | translate}}" container="body"` Yes, but you need to use <ng-template> element like so: <ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template> <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content"> I've got markup and bindings in my popover! </button> Here is a working plunker: http://plnkr.co/edit

How can I add bootstrap to Angular2 via system.js

阅读更多关于 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: <html> <head> <title>MyApplication</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="font-awesome/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css">  <!--

Angular2 ng-bootstrap - no provider error

阅读更多关于 Angular2 ng-bootstrap - no provider error

I am trying to integrate ng bootstrap UI into my Angular 2 project. After following the simple instructions found here: https://ng-bootstrap.github.io/#/getting-started i get the following error when using any ngb bootstrap tag: Error: No provider for NgbAlertConfig! app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { StocksComponent } from './stocks/stocks.component'; import {