ng-bootstrap

Angular2 ng-bootstrap - no provider error

耗尽温柔 提交于 2019-11-30 16:27:56
问题 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 }

navbar not rendering in browser using ng-bootstrap & angular 4

风流意气都作罢 提交于 2019-11-30 15:32:22
问题 I am building my first Angular 4 app, using ng-bootstrap (Bootstrap 4 for Angular) - not using regular Boostrap The ng-bootstrap website (https://ng-bootstrap.github.io/#/components/accordion/api) does not list a component for a navbar (as it did in Bootstrap 3 or regular bootstrap 4). Does that mean I have to build a menu out of dropdowns/buttons? Or I have to mix regular Bootstrap 4 with ng-bootstrap? I tried creating this menu in the html but it won't render in the browser (just a brand

Nesting ng-bootstrap tabs (Angular 2)

混江龙づ霸主 提交于 2019-11-30 15:11:28
问题 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: <ngb-tabset> <ngb-tab *ngFor="let tab of tabs"> <ng-template ngbTabTitle> {{ tab.title }} </ng-template> <ng-template ngbTabContent> {{ tab.content }} <ngb-tabset> <ngb-tab> <ng-template ngbTabTitle> 1 </ng-template> <ng-template ngbTabContent> 1 </ng-template> </ngb

How to add ng-bootstrap to an Angular-CLI (Broccoli version) project?

倖福魔咒の 提交于 2019-11-30 14:51:32
How to add ng-bootstrap (by written by the angular-ui team) to an Angular-CLI (Angular2 RC4) project? More specifically: How should I add the minified .css from my node_modules folder to my angular-cli project? Do I have to add it to angular-cli-build.js ? Do I have to add the typings? Do I have to add it to /src/system-config.ts pd farhad Yes you have to add all of your css files by referencing from vendorNpmFiles in angular-cli-build.js file First go to the project directory and type npm install --save @ng-bootstrap/ng-bootstrap then open your angular-cli-build.js and add this line

navbar not rendering in browser using ng-bootstrap & angular 4

大城市里の小女人 提交于 2019-11-30 14:20:33
I am building my first Angular 4 app, using ng-bootstrap (Bootstrap 4 for Angular) - not using regular Boostrap The ng-bootstrap website ( https://ng-bootstrap.github.io/#/components/accordion/api ) does not list a component for a navbar (as it did in Bootstrap 3 or regular bootstrap 4). Does that mean I have to build a menu out of dropdowns/buttons? Or I have to mix regular Bootstrap 4 with ng-bootstrap? I tried creating this menu in the html but it won't render in the browser (just a brand "MyWebSiteName" and little grey box on my screen, no nav) <nav class="navbar navbar-inverse"> <div

Angular 2 multiple custom value accessor

时间秒杀一切 提交于 2019-11-30 04:43:49
问题 I am creating an application using angular2. I need to get a Date from user input using a calendar popover, but I need to put a mask on user input to stay in this format dd-mm-YYYY when he is typing. I am using two different modules that I got from web ng-bootstrap and angular2-text-mark <input [textMask]="{mask: mask}" type="text" class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker"> When I use textMask and ngbDatepicker on same tag I

Angular 2 ng-bootstrap Modal: How to pass data to entry component

↘锁芯ラ 提交于 2019-11-29 18:02:34
问题 I'm trying to send data to a custom modal content component so I can call it from any other component and not repeat code. I'm new to Angular 2 and have followed the "Components as content" demo of ng-boostrap as well as the "Component Interaction" in the Angular docs and have not found a way to get this to work or an example for this case. I can get the modal to open, but not with dynamic content. I've tried the @Input and the variable approach with no success. I've also added ModalService

Angular 2+ & ngBootstrap - Shared Modals

不打扰是莪最后的温柔 提交于 2019-11-29 12:27:10
Is it possible to have a ngBootstrap modal as a shared component and use an instance of it in other components. I'd like to have one Modal that prompts the user to delete a record and I'd like to re-use it across multiple components with different record types. ngBootstrap site shows a "Components As Content" example but in that example it looks like the ModalComponent dictates whether to open or close the ModalContents. I'd like the ability to open/close an instance of a modal from another (arbitrary) component. Is this possible? Create a CommonModule as below, import { NgModule} from '

Angular2 + ng-bootstrap Example

杀马特。学长 韩版系。学妹 提交于 2019-11-29 11:12:21
I started to learn Angular2 and I want to use ng-bootstrap in my project. However, I could not make a working project. It fails on importing ng-bootstrap. Since I am a beginner, I don't know if the problem is because of the code or something other that I made wrong. Can you provide me a working and simple project with ng-bootstrap and Angular2 so I can try to make it work on my computer? Edit: app.module.ts: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; import { AppComponent } from '.

ng-bootstrap Modal size

感情迁移 提交于 2019-11-29 10:39:08
问题 What is the best way to set/override a custom width for a modal? It seems ng-bootstrap currently supports size: 'sm' | 'lg' but Bootstrap 4 supports sm, md and lg. Ideally I would like the modal to be responsive and adjust similar to container sizes. And on mobile have it go full screen. EDIT: Bootstrap 4 _variables.scss seems to have a $modal-md setting but appears to be unused. $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !default; 回答1: The cleanest solution that I