Questions tagged [ngx-bootstrap]

Use this tag for any query related to ngx-bootstrap. ngx-bootstrap is an open-source (MIT Licensed) project created by Valor Software, which provides an easy way to quickly implement Bootstrap 4 and 5 designs (Bootstrap 3 is now deprecated) with Components natively created for Angular.

Filter by
Sorted by
Tagged with
0 votes
0 answers
24 views

Angular Standalone not Rendering in ngx-bootstrap/tabs

Greeting Programs: My Angular webpage uses dynamic tabs (ngx-bootstrap/tabs) to display different pages. I plan to migrate to @defer. I understand the first step in @defer is to convert components ...
MarkWilx's user avatar
0 votes
0 answers
25 views

ngx-bootstrap modal after update to 11 my backdropRef is undefined

I have the canDeactivate function, and when the data is not saved, I call the modal window, public canDeactivate(nextState?: RouterStateSnapshot): boolean { if (this.formChangeUnsaved) { this....
Dmytro Borysenko's user avatar
2 votes
2 answers
586 views

What version of "ngx-bootstrap" should I install for "Angular 17"?

Here is the version I was trying to download ngx-bootstarp but didn't found any compatible version. I have google it but there was no information about it. I saw the list in the official site of ...
Anik Chakraborty's user avatar
0 votes
0 answers
28 views

Set min and max value in ngx-bootstrap Timepicker with popover

I have an NGX Bootstrap Timepicker component as follow: <ng-template #myRef> <timepicker id="minTimeStoppedAdvanceId" [showMeridian]="false" [showSeconds]=&...
jgcarrillo's user avatar
1 vote
1 answer
24 views

ngx-bootstrap modal clickable focus element outside the modal

I need to focus an element even the ngx-bootstrap is already shown. Hi All, I am currently using ngx-bootstrap modal. Here is what i want to achieve. 1.ngx-modal is already show with some data --...
ping pong's user avatar
  • 181
0 votes
1 answer
25 views

Not able to set Initial value in ngx-bootstrap typeahead

Hello I am using angular 16 "ngx-bootstrap": "^11.0.2", I can not set default value means when user select the data from suggestive search and i have saved that value in DB and now ...
user3860557's user avatar
0 votes
0 answers
25 views

Show Content inside Tooltip | Angular

I want to show the content inside a popover, i tried to achieve this using ngx-bootstrap, from the developer tools i can see the popover is appending into the body but not sure whether it has the ...
dev254's user avatar
  • 89
0 votes
0 answers
65 views

ngx-bootstrap tooltip in angular not working

Good day everyone, I am using [email protected] in angular 14 and bootstrap 5 to display a tooltip but its not showing. Here is the HTML in the template file: <td tooltip="Hi this is a term&...
Awar Denen's user avatar
0 votes
0 answers
60 views

NullInjectorError: No provider for BsDropdownDirective

I keep getting this error in the browser console and the functionality of bsdropdown is not working. Below is the detailed error from the browser: main.ts:6 ERROR NullInjectorError: R3InjectorError(...
lavPol's user avatar
  • 1
0 votes
0 answers
57 views

how to change background color of quick select range button in ngx-bootstrap bsdatepicker (angular)?

I want to change the background color of quick select ranges buttons in bsdatepicker. Where should i actually make change to change background color of those buttons highlighted in below image. ...
Kanhaiya Pimpale's user avatar
0 votes
0 answers
73 views

Want to implement a year picker calendar in angular which has only years and the format is ''YYYY-YY" like 2023-24, 2022-23 etc

Tried using ngx bootstrap and material, I am able to achieve 'YYYY' format but I want to implement YYYY-YY' where the year after hyphen is the consecutive year. I tried using ngx bootstrap first but I ...
AMISHA GOEL's user avatar
0 votes
0 answers
49 views

How to implement bootstrap date picker?

I have date picker plugin in my packages, when I implement, I am able to see the calender. How can I see the calender . This is what I have tried <input type=&...
Abhilash Anand's user avatar
0 votes
0 answers
83 views

Error: NG0301: Export of name 'bs-dropdown' not found! error properties: Object({ code: -301 })

I have upgraded my project from angular 12 to angular 13 and I am using ngx-bootstrap for dropdown and popover but when I ran my unittest I am getting this error. this is my nix-bootstrap version &...
abuzar rizvi's user avatar
0 votes
1 answer
301 views

Getting module not found for all the 11.0 components. They are all defined ad for Root on my shared module. Any ideas?

Angular 16.1.4 Ngx-bootatrap 11.0 Defined on shared module only as forRoot() All errors similar to Can't resolve 'ngx-bootstrap/dropdown' Ng serve receives compile errors on seal phase Only changes ...
Paul_P's user avatar
  • 1
0 votes
0 answers
23 views

Expected spy getAssetById to have been called

Hi ive been working on a fix for the TABS fired select event(bug in ngx-bootstrap) https://github.com/valor-software/ngx-bootstrap/issues/3755 and saw this fix in the thread https://github.com/valor-...
Juan Vargas's user avatar
0 votes
1 answer
109 views

ngx-bootstrap typeahead displays [object Object] when using itemTemplate and observables

Is there a solution or a workaround to this? When one of the options is selected from the typeahead, it appears as "[object Object]". This seems to be a bug with the library when using ...
A Jar of Clay's user avatar
0 votes
0 answers
53 views

Unable to Install ngx-bootstrap To template

Trying to install ngx-boostrap into a template for further enhancement but got stuck and not sure what needs to be done and if updating rxjs will suffice and what version? Need help on a way forward ...
GNG's user avatar
  • 89
0 votes
1 answer
116 views

Set the maximum date to today in ngx-bootstrap Datepicker

I am very beginner in Angular. I have problem with my .... I have this code: onDateSelection(date: NgbDate, datepicker: any) { if (!this.fromDate && !this.toDate) { this.fromDate =...
quatrol's user avatar
  • 39
0 votes
0 answers
15 views

Angular project showing monochromatic page despite installing ngx-bootstrap and bootstrap

I am developing an angular project using Angular 14 and I installed ngx-bootstrap 9.0.0 and bootstrap 5.3.0, following the instructions to install bootstrap manually following the instructions in the ...
Linda V's user avatar
0 votes
1 answer
199 views

Style ngx-bootstrap tooltip arrow BORDER to take the shape of the arrow

Currently, I am facing this issue with the ngx-bootstrap tooltip, arrow to give the border in its shape, I tried multiple solutions but got at max this far. I have attached 2 images, first is the one ...
Anmol Girdhar's user avatar
0 votes
1 answer
343 views

Ngx Bootstrap Tooltip 10 not working with Angular 15 and Bootstrap 15

I have followed the instruction on how to display the tooltip from https://valor-software.com/ngx-bootstrap/#/components/tooltip?tab=overview, however the tooltip seems not to get shown. Namely, the ...
user1635881's user avatar
0 votes
2 answers
134 views

ngx-bootstrap Dropdown failed

import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; this don't work. I didn't find "dropdown" in my folder Thank you for helping me! I tried to add this component by myself, but It ...
uyasd's user avatar
  • 31
1 vote
1 answer
540 views

How to change icon in angular component

I want to make editable data and i use fa-icon element for edit icon. When I click on an icon, all the others change in the same way. before click after click on one icon My fa-icon element look a ...
Nikola's user avatar
  • 13
0 votes
1 answer
45 views

bsDatepicker withtimepicker, is there a way to remove AM/PM?

im using datepicker withtimepicker from ngx-bootstrap and im trying to remove the AM/PM button and force the datepicker to be in 24hours mode, is there a way to do that ? <bs-...
FlyLeBro's user avatar
0 votes
0 answers
223 views

Ngx-bootstrap datepicker: is there a way to set new available dates when I change month?

I'm trying to load available dates in bg-datepicker-inline component (using "datesEnabled" property). I used Mike's solution to detect change month and it works. But when I change month I ...
Pierlu1586's user avatar
1 vote
1 answer
545 views

How to display only the current page number in angular pagination?

HTML : <!-- pagination controls --> <div class="pagination-container"> <pagination-controls (pageChange)="onPageChange($event)" [maxSize]="1" [id]="...
nyla L's user avatar
  • 57
0 votes
0 answers
33 views

I implemented ngx skeleton library gives me this error on terminal and component

error terminal (https://i.stack.imgur.com/LDRAy.png) error component (https://i.stack.imgur.com/a4b2j.png)
Emanuele 's user avatar
0 votes
0 answers
121 views

Ngx-bootstrap close dropdown on ESC key pressed while on menuitem

I'm working with Angular 9, ngx-bootstrap 10.2.0 and ARIA to make a page more keyboard accessible. Trying some of the examples from the ngx-bootstrap documentation I encountered some lack of ...
tec's user avatar
  • 1,039
0 votes
1 answer
950 views

Mask date field in angular input

I'm trying to mask the DOB input field so that on the screen user can only see **/**/****. the input field is already using bsDatePicker. I tried to add ngx-mask to mask it like this. <input type=&...
user21431480's user avatar
1 vote
0 answers
243 views

Angular: Unable to set ngx-bootstrap timepicker with standalone input

I'm using this timepicker of ngx-bootstrap library. <ng-template #quantityTimeAdvancedPicker> <timepicker [showMeridian]="false" [showSeconds]="true" [minuteStep]=&...
jgcarrillo's user avatar
1 vote
0 answers
48 views

Why won't my API update the values of my form?

I'm trying to update the attributes of objects which can be observed using a form. I am able to call the API to create new objects and map the values for each attribute to the form's inputs so that ...
wahhhh's user avatar
  • 41
1 vote
1 answer
608 views

How to keep the date range with time range picker open after setting the dates?

I'm using ngx-bootstrap to display a date and time range pickers. However, when selecting the date ranges, the picker closes. How can I keep it open until time ranges are selected? <input type=&...
Omar Dulaimi's user avatar
0 votes
0 answers
885 views

Angular - Cannot find module 'ngx-pagination' or its corresponding type declarations

In my Angular-15 project, I am implementing ngx-pagination. So, since I'm making use of ngx-bootstrap itself, I did: npm install ngx-bootstrap --save Then in my AppModule, I did: import { ...
Bami's user avatar
  • 393
0 votes
0 answers
49 views

CKEditor5 editor's custom plugin not work inside angular component when another instance of editor open inside modal (ngx-bootstrap) to return value

CKEditor5 custom plugin functionality not work inside the angular component only when I use another instance of editor inside modal ( ngx-bootstrap/modal ) and return some value to main component. I ...
Dev527's user avatar
  • 37
0 votes
1 answer
56 views

Display only username from email in table td element

So {{ historydata?.created_by }} is displaying email address. Is there was way to either extract only username from the email address or hide characters after @ and display only username in td element?...
goch1006's user avatar
0 votes
0 answers
93 views

ngx bootstrap datepicker : Do we have any property to default month to display instead of setting ngModel?

Currently, calendar sets the day view based on current day. If we setup the ngModel, it opens up the expected day/ month /year view. I am working on the project which has more than 5 instances of ...
Johney's user avatar
  • 87
0 votes
0 answers
297 views

ngx-bootstrap dropdown selector

I have a simple ngx-bootstrap dropdown for sorting products: <div class="btn-group" dropdown> <button id="button-basic" dropdownToggle type="button" class=...
user2884789's user avatar
0 votes
0 answers
360 views

How can I add Apply, Cancel, and Clear buttons to the date range picker?

I'm using the ngx-bootstrap date range picker (https://valor-software.com/ngx-bootstrap/#/components/datepicker?tab=overview). I noticed that this picker (which displays two side-by-side calendars) ...
user avatar
0 votes
2 answers
246 views

How to change the language of a date picker? [duplicate]

When I want to select a month, the month is in English. I would like to know how I can change the language to French please? I guess I need to configure something in the core.module.ts? @NgModule({ ...
pops1348's user avatar
0 votes
1 answer
163 views

content is undefined after upgrading to ngx-bootstrap 10

I show quite a few modals in my application and the way I've decided to do all the somewhat generic ones is through a modal service in typescript. The modal service takes a component as an argument ...
Funn_Bobby's user avatar
0 votes
1 answer
2k views

error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments

I installed ngx-infinite-scroll library using npm install ngx-infinite-scroll --save command. As provided in the docs. However, I am getting the following error in the library file: Error: ...
Lakshay Rohilla's user avatar
2 votes
0 answers
110 views

ngx component on bootstrap in Angular

I made a modal in angular and I sent the parameters to the modal through BsModalService but seems it doesn't work I reviewed my code many times but this error appears in console : ERROR TypeError: ...
Ahmed Albarwani's user avatar
1 vote
0 answers
116 views

ngxNavbarDynamicExpand not always collapsing

I have 2 issues with my ngx bootstrap navbar that will no doubtably be fixed with the same solution. My navbar has two different toggles separated with an ng-container whether the user is logged in or ...
WhatsThePoint's user avatar
1 vote
0 answers
231 views

ngx[email protected] being installed on angular version 14.2 project

To reproduce create a new angular project using Angular version 14.2, ng new ngxbootstrap. Then in project folder, ngxbootstrap, run ng add ngx-bootstrap. When I perform the steps above, this is what ...
Truper63's user avatar
0 votes
0 answers
71 views

styling card using ngx-bootstrap 9 , bootstrap 5 and Angular material 14

how to make Twelve demo card as a grid layout three row and four columns. i tried to use row and columns class but it never change grid layout ,but it change the card size. how can i do it and how can ...
Abdallah Al-Maqableh's user avatar
0 votes
0 answers
44 views

how to custom styles for ngxboostrap time picker, i want arrow indicators position as same

<timepicker #timePicker class="check" onkeydown="event.preventDefault()" [(ngModel)]="mytime" [hourStep]="hstep" [minuteStep]="mstep" [showSpinners]...
Romal Josey's user avatar
3 votes
3 answers
4k views

Install lastest (10th) version of ngx-bootstrap for Angular 15

Official website says that 10th ngx-boostrap is compatible with 15th Angular: https://valor-software.com/ngx-bootstrap/#/documentation#getting-started Angular (14.x.x - 15.x.x) ngx-bootstrap (10.0.0) ...
Ernest Rutherford's user avatar
0 votes
0 answers
62 views

How to reference a selected tap after making a filter?

I built a system of dynamic taps with the ngx-bootstrap library when I click on a tap it allows me to view certain graphs my problem is that I want it to work with filters but when I click the button ...
christian alvarez's user avatar
0 votes
0 answers
202 views

ngx-chips autocompleteItems dropdown is not showing with async data

Dropdown is not populating data after the search. When the second time api is called then the dropdown is showing but not on the first search. I want the list to be updated as soon as it receives the ...
Svibhor's user avatar
  • 53
0 votes
2 answers
562 views

How to make pagination with observable

I have car-list.component.ts with: **export class CarListComponent implements OnInit { public cars$!: Observable<CarInterface[]>; constructor( private carService: CarService # ) { # } ...
Jana Jasinovski's user avatar

1
2 3 4 5
20