Questions tagged ngx-bootstrap

Explore the latest questions and answers asked by our top developers.

How to test ngx-bootstrap modal with angular 12

I’ve tried to test my function to toHaveBeenCalled after @Output() is emit I use "@angular/core": "~12.2.0", "ngx-bootstrap": "^7.1.0" Here’s my code main component: showModal() { this.modalRef = this.modalService.show(MyModalComponent); this.modalRef.content.emitBack.subscribe((response: Boolean) => { if (response) { this.mySimpleFunction(); } }); } modal component: @Output() emitBack = new EventEmitter(); constructor(private modalService: BsModalService) { } ngOnInit() { } closeModal() […]

Bind ngx-bootstrap datepicker to ngModel so that isDirty can be evaluated

All that I really want is to know when the date value has been changed so that I can enable/disable the submit button. <div class="form-group"> <label for="AdvertisingCost_PaymentDate">{{l("PaymentDate")}}</label> <input required class="form-control m-input" #AdvertisingCost_PaymentDate type="datetime" bsDatepicker datePickerLuxonModifier [(date)]="advertisingCost.paymentDate" name="AdvertisingCost_PaymentDate" > <validation-messages [formCtrl]="AdvertisingCost_PaymentDate"></validation-messages> </div> If I change [(date)] to [(ngModel)] it responds to the change event and sets […]

By hatchetaxesaw
Published
Categorized as angular, ngx-bootstrap Tagged ,

NGX-Bootstrap/Angular – Pagination – cannot change the maxSize input when my screen view (width) is changing

I am using the Pagination from Valor Software (click to access). I want to change the maxSize input when my screen width is changing, like in the following example: Click to see example. Seems that the maxSize is only changing by refreshing the page and not when the width is changing. Noticed that the input […]

By SilviuM
Published
Categorized as angular, html, javascript, ngx-bootstrap Tagged , , ,

ngx pie chart not showing chart in the browser in Angular app

I have been trying to display a chart in my angular app but for some reason it is not displaying in the browser. My package.json looks like this. "dependencies": { "@angular/animations": "~13.1.1", "@angular/common": "~13.1.1", "@angular/compiler": "~13.1.1", "@angular/core": "~13.1.1", "@angular/fire": "^7.2.0", "@angular/forms": "~13.1.1", "@angular/material": "^13.1.1", "@angular/platform-browser": "~13.1.1", "@angular/platform-browser-dynamic": "~13.1.1", "@angular/router": "~13.1.1", "@swimlane/ngx-charts": "^20.0.1", "@swimlane/ngx-datatable": "^20.0.0", }, […]

Closing ngx-bootstrap Modal from another service

I have a openModal() method in ShowLoginModalService , and the ShowLoginModalService class contains this particular code: ShowLoginModalService import { Injectable } from ‘@angular/core’; import { LoginDialogComponent } from ‘@shared/common/component/login-dialog/login-dialog.component’; import { BsModalRef, BsModalService } from ‘ngx-bootstrap/modal’; @Injectable({ providedIn: ‘root’, }) export class ShowLoginModalService { constructor(private bsModalService: BsModalService) {} private bsModalRef: BsModalRef; openLoginModal(prevUrl: string) { this.bsModalRef […]

By Pouya Babaie
Published
Categorized as angular, ngx-bootstrap, rxjs, typescript Tagged , , ,

allow time picker in BsDatepickerConfig

I’m using BsDatepickerConfig to pick date also I want to use it to pick time in same field is there any way? <div class="col-lg-6 col-md-6 col-sm-6"> <fieldset [disabled]="caseFound"> <div class="ui-input-group"> <input type="text" class="form-control" #dp="bsDatepicker" bsDatepicker bsConfig]="bsConfig" formControlName="cardExpiryDate" placeholder=’DD-MM-YYYY’ (ngModelChange)="triggerCheck()"> <span class="input-bar"></span> <label>Card Expiry Date <span class="mdtr">*</span></label> <span *ngIf="submitted && f.cardExpiryDate.errors" class="tooltiptext">{{‘Card Expiry Date is required’}}</span> […]

By Hamda
Published
Categorized as angular, html, ngx-bootstrap Tagged , ,

Reusable ngx-bootstrap modal as template or components

I have a table with around 1000 rows in which ID column values are clickable. On click of ID value, I need to create a modal using ngx-bootstrap. This modal is reusable, and needs to be invoked from several pages of the application. Now, I have 2 options. create template based approach where the ID […]

By Mrinal
Published
Categorized as angular, ngx-bootstrap Tagged ,

ngx-edditor doesn’t clear value

Nxg-editor here documentation can’t clear its value on submit. I have a code like this in the form tag, but when i click on method with code form.reset() it doesn’t clear the value of the editor. but in fact value in the form is clear. but not on the DOM structure (it has a tag […]

By Yurii
Published
Categorized as angular, ngx-bootstrap, ngx-editor Tagged , ,

ngx-editor doesn’t clear value

Nxg-editor (docs) can’t clear its value on submit. I have a code like this in the form tag, but when I click on method using form.reset() it doesn’t clear the value of the editor. In fact, the value in the form is clear, but not on the DOM structure (it has a <p> tag with […]

By Yurii
Published
Categorized as angular, ngx-bootstrap, ngx-editor Tagged , ,

How to mark multiple dates on ngx-bootstrap datepicker in angular

I want to mark multiple date on the ngx-bootstrap datepicker, I tried passing array, it doesn’t seems to be working <ngb-datepicker style="width: 100%;" #dp [ngModel]="allDates" (navigate)="date = $event.next"> Expected Output: Source: Angular Questions

By divya dave
Published
Categorized as angular, ngx-bootstrap Tagged ,
1 2 3 18

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq