ng-bootstrap

How do you get the selected tab from a bootstrap tabset in Angular4?

我是研究僧i 提交于 2020-01-01 07:07:45
问题 I have a set of tabs that I create dynamically, dependent on my input data. And what I want to do is to be able to figure out which tab is currently selected. In the example code below, I have a tab control and beneath all this, I have a button that when clicked will delete the selected tab. I've tried to keep this relatively simple and it might seem contrived, but I hope it does to illustrate what I mean. Here's my code: <div class="col-md-12"> <ngb-tabset *ngIf="selectedInfo" type="groups"

Angular bootstrap date-range-picker in a popup?

送分小仙女□ 提交于 2020-01-01 06:30:10
问题 I am trying to show a date-range picker in my angular app using ng-bootstrap. My code looks like following: <ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t"> </ngb-datepicker> <ng-template #t let-date="date" let-focused="focused"> <span class="custom-day" [class.focused]="focused" [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)" [class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate =

NgbModal not opening modal from component included in another component

久未见 提交于 2019-12-31 05:43:11
问题 I'm using Anuglar 6 I have two components account and profile . account component is added to the app-component . I want to open up profile-component on click of a button from account-component . But this is giving me an error Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents? the app-module looks like @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent, AccountComponent, ProfileComponent ],

Precompile fails when adding ng-bootstrap to an Angular-CLI project

折月煮酒 提交于 2019-12-25 04:25:43
问题 When i try to add ng-bootstrap to Angular-CLI project according to https://stackoverflow.com/a/38413274/1596547, i can't not use the procompile option : import { Component } from '@angular/core'; import {NGB_ALERT_DIRECTIVES,NGB_PRECOMPILE} from '@ng-bootstrap/ng-bootstrap'; @Component({ moduleId: module.id, selector: 'app-root', directives: [ NGB_ALERT_DIRECTIVES ], precompile: [ NGB_PRECOMPILE ], templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class

ng-bootstrap datepicker validity and initial value

守給你的承諾、 提交于 2019-12-24 20:41:46
问题 using the datepicker component in a template-driven form like so: <input class="form-control" placeholder="dd-mm-yyyy" ngbDatepicker #from="ngbDatepicker" (click)="from.toggle()" [(ngModel)]="params.from" name="from" required /> how would I go about getting the validity? {{from.invalid}} doesn't return anything. Also, how would I set the initial state? tried: new Date() { year: 2017, month: 10, day: 20 } Simple string like 2017-10-20 and 20-10-2017 (matching my format). 来源: https:/

ng-bootstrap not displaying tooltip

邮差的信 提交于 2019-12-24 19:15:13
问题 I want to display a tooltip. I went to ng-bootstrap and integrated that code. Getting console error. core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for NgbTooltipConfig! Error: No provider for NgbTooltipConfig! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector_._throwOrNull (core.es5.js:2649) at ReflectiveInjector_._getByKeyDefault (core.es5.js:2688) at ReflectiveInjector_._getByKey (core.es5.js:2620) at

Angular: How to detect toggle status in ng-bootstrap dropdown

你离开我真会死。 提交于 2019-12-24 19:07:39
问题 I am working with this dropdowns. How can I detect in the template or ts file the status of the dropdown modal? 回答1: You need to call the built-in function isOpen() to get a boolean value of whether a particular dropdown is opened or closed the detail is given in the API, methods section relevant TS : import {Component, ViewChild} from '@angular/core'; @Component({ selector: 'ngbd-dropdown-basic', templateUrl: './dropdown-basic.html' }) export class NgbdDropdownBasic { @ViewChild(NgbDropdown)

Loading Data For Editing In Ng-Bootstrap Modal in Angular

天涯浪子 提交于 2019-12-24 16:10:40
问题 How can i load the data using the ng-bootstrap modal. I'm using this for editing some data in my app? I've used routing and transferring to a different page when editing instead of editing it in modal before. But right now, i want to implement the loading and editing of data in ng-bootstrap modal? How can i do this? HTML button type="button"(click)="open(content)">Edit</button> <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Edit Name<

How do I set ng-bootstrap modal component content members?

萝らか妹 提交于 2019-12-24 15:05:38
问题 This is the open method from the sample in the documentation, using a component as content: open() { const modalRef = this.modalService.open(NgbdModalContent); modalRef.componentInstance.name = 'World'; } What I would like to do is to use the component in a similar fashion below and able to set the name. open(content) { this.modalService.open(content).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason

ng-bootstrap dependancies and warning

坚强是说给别人听的谎言 提交于 2019-12-24 10:48:22
问题 I wish to use ng-bootstrap. The documentation ask to install bootstrap CSS as dependency, but do not include jQuery if I install bootstrap with npm I get warning that it need jquery and popper. $ npm i -S bootstrap npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself. npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. Is there a way to