ng-bootstrap

Angular 2 - How does ng-bootstrap provide the NgbRadioGroup and NgbButtonLabel to their NgbRadio directive?

由 試著忘記壹切 提交于 2019-11-27 16:48:19
问题 Here is the label code: import {Directive} from '@angular/core'; @Directive({ selector: '[ngbButtonLabel]', host: {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'} }) export class NgbButtonLabel { active: boolean; disabled: boolean; focused: boolean; } and here is the radio button code: import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from

Why is the Bootstrap 4 Navbar always collapsed? [duplicate]

由 房东的猫 提交于 2019-11-27 14:22:11
This question already has an answer here: Bootstrap 4 toggleable navbar 1 answer I updated to the v1.0-beta of ng-bootstrap. Now the navbar is always collaped. When I click on the hamburger to toggle the menu, it opens, but displays the contents vertically rather than horizontally. I've included the code for the nav below. It's the same as it before. At this point I can't tease out if the issue lies with ng-bootstrap, bootstrap 4 or a combination thereof. My ideal outcome is for the menu to only appear once the screen is under a certain size, like in the old days. I did see Bootstrap4 navbar

How to make a Modal reusable in Angular 2?

由 ♀尐吖头ヾ 提交于 2019-11-27 09:17:45
Reusability is very important when programming, and anything we can do to reduce duplication of code is going to help us out. I have to use Modal popups to display information to users in many places in my Angular 2 project. I am using ng-bootstrap and all of these Modals have the same Header and Footer but body changes in many cases. Sometimes the body just wanted to replace a single place holder, at other times it has some complexity to prepare the dynamic content. And these are triggered or managed by different components. ng-bootstrap allow us to pass content into a Modal in two ways. as a

Customise NG Bootstrap carousel in Angular

由 戏子无情 提交于 2019-11-27 08:51:51
问题 I have a ng-bootstrap Carousel in my Angular project and I would like to change a few things but am at a loss of how to go about it. First, I would like to have a fade effect when the slide changes, at the moment the next image just appears. Secondly, I want to have my own arrows and slide indicator or change the style! I have attempted to do that via CSS but none of my code seems to get accepted. Below my slideshow-component: images = [1, 2, 3, 4, 5, 6, 7].map(() => `https://picsum.photos

NgbTypeahead selectItem get clicked item ngBootstrap angular2

由 痴心易碎 提交于 2019-11-27 07:36:04
问题 In this answer, it was explained to me to use selectItem to get the select event. But at this point, the model I bound to the text box is still the original text the user typed, not the select item. I use (selectItem)="search(model)" to get the event, and in TS search(model) { this._service.search(model).subscribe( results => this.results = results, error => this.errorMessage = <any>error); } but as mentioned above, that calls my backend with the user-typed text, not the full text of the

“Unexpected token import” error with Angular4 + Universal + ng-bootstrap

由 孤人 提交于 2019-11-27 06:01:36
问题 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 https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6. There is only one difference I am using ng-bootstrap https://ng-bootstrap.github.io/#/home (v1.0.0-alpha.22). But when I run the node server

Angular 2 ng-bootstrap close Modal

由 一笑奈何 提交于 2019-11-27 02:47:12
问题 I am trying to close the modal that was presented to me through the open(content) function as shown in the example in the Documentation of ng-boostrap. In the website, it mentioned that i can call close or dismiss from NgbActiveModal. So I included NgbActiveModal in the component and tried to call dismiss() or close(). Both of them doesn't work. First of all, dismiss() is undefined (Am I importing NgbActiveModal wrong?) When I call close(), it seems to want to call some weird function inside

Is it correct to implement a custom NgbDateParserFormatter to change the format of the input value on NgbInputDatepicker?

由 僤鯓⒐⒋嵵緔 提交于 2019-11-26 22:35:45
问题 I'm using the datepicker (ng-boostrap) in a popup and I would like to change the date format to dd-mm-yyyy . It seems that it can be solved by implementing a new NgbDateParserFormatter to replace the default NgbDateISOParserFormatter . But I was wondering if there is another way. UPDATE: A small implementation of NgbDateParserFormatter using Moment.js (tested with version 1.0.0-alpha.14 of ng-bootstrap): import {NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; import

How to make a Modal reusable in Angular 2?

由 陌路散爱 提交于 2019-11-26 22:18:19
问题 Reusability is very important when programming, and anything we can do to reduce duplication of code is going to help us out. I have to use Modal popups to display information to users in many places in my Angular 2 project. I am using ng-bootstrap and all of these Modals have the same Header and Footer but body changes in many cases. Sometimes the body just wanted to replace a single place holder, at other times it has some complexity to prepare the dynamic content. And these are triggered

What is the difference between “ng-bootstrap” and “ngx-bootstrap”?

由 霸气de小男生 提交于 2019-11-26 18:57:15
问题 What is the difference between "ng-bootstrap" and "ngx-bootstrap"? Are they related to each other? Or are they simply concurrent implementations? Has someone worked with them both and can give/explain pros and cons of both? With "ng-bootstrap" I mean https://ng-bootstrap.github.io/#/home and with "ngx-bootstrap" I mean http://valor-software.com/ngx-bootstrap/. Both related to Angular 4 ( not to AngularJS! ) and Bootstrap 4. Please note that this ist not a duplicated question of difference
订阅 ng-bootstrap