581 questions
0
votes
0
answers
36
views
How to maintain focus in a dynamic Bootstrap dropdown with both search and selection functionality in Angular?
Problem:
I have a form with a dynamic list of dropdowns in Angular, where each dropdown behaves both as a search input and as a normal dropdown. I am using Bootstrap's dropdown-toggle method to handle ...
- 37
1
vote
1
answer
135
views
How to make the bottom of a NgbModal to be transparent so that content beneath is visible through it
I have a very basic modal using NgbModal: https://stackblitz.com/edit/angular-ngbmodal-be7ia5uq?file=app%2Fmodal-component.ts
It is opened like this
But what I want is to make the bottom gradually ...
- 97
1
vote
1
answer
5k
views
TypeError: Cannot read properties of undefined (reading 'ɵcmp') in Angular 18
I'm trying to make the sorting of table work for /users that is defined in UserListComponent. The sorting functionality was broken by introducing NavbarComponent.
I tired to switch to standalone ...
- 14k
5
votes
2
answers
408
views
Why is this *ngFor loop rendering the data twice?
I have an NG Bootstrap Accordion element that, when open, displays a list of contact cards. For some reason the list of contacts output by the ngFor is duplicated and renders twice. The data is not ...
- 1,363
1
vote
1
answer
4k
views
Angular 18 component is imported as non standalone component but fails to render
How to wire correctly NavbarComponent into the template of app component?
app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
main.ts
import {...
- 14k
1
vote
1
answer
4k
views
Bootstrap use in angular17 application
How to add bootstrap in angular-17 application from CLI
I tried installing bootstrap globally using npm install -g bootstrap
and then added required lines in angular.json in style and script.
&...
- 65
0
votes
1
answer
241
views
App Module is loading twice after upgrading to Angular 14
Our AppModule is getting loaded twice when we start our Angular App. This leads to duplicate calling of API's that increases unnecessary load. So need help in understanding what's causing the app ...
- 173
1
vote
1
answer
420
views
How to wrap ngb-carousel?
I have an instance of ngb-carousel which is currently used like this:
<ngb-carousel>
<ng-template ngbSlide>Hello</ng-template>
<ng-template ngbSlide>World</ng-...
- 2,828
5
votes
2
answers
11k
views
class is a standalone component, which can not be used in the `@NgModule.bootstrap` array in Angular
i got this error when i tried adding bootstrap to my angular project :
The MainComponent class is a standalone component, which can not be
used in the @NgModule.bootstrap array. Use the ...
0
votes
0
answers
205
views
Angular Bootstrap Datepicker custom date format dd-MMM-yyyy (e.g., "01-Sep-2023")
I have also use NgbDateParserFormatter but not solve this problem date format - dd-MMM-yyyy (e.g., "01-Sep-2023")
component.html
<div class="input-group">
<...
- 467
0
votes
0
answers
50
views
By using bootstrap modal i'm posting data on that same screen i'm trying to get data for edit with respect to id by using angular and rest API
I'm using Angular v.14 and rest api,i have bootstrap modal in navbar component its trigger button is in navbar and it's rest part is under the navbar and its modal body content is in post-product ...
- 27
0
votes
1
answer
1k
views
Bootstrap 4 compatibly with angular 17
The project I'm working on is currently using angular 15 and we are using bootstrap 4.6.2. We plan on going to angular 17 when it releases. Is angular 17 going to support the version of bootstrap that ...
- 11
0
votes
0
answers
117
views
Combine Two Angular Apps
I'm pretty new to Angular and I did some research about how to combine multiple Angular apps into one app. However most of what I found are about creating multiple projects in one Angular app, which ...
- 56
1
vote
0
answers
169
views
Unable to install bootstrap in Angular project using ng add @ng-bootstrap/ng-bootstrap
I'm having these errors:
Using package manager: npm √ Found compatible package version:
@ng-bootstrap/[email protected]. √ Package information loaded.
The package @ng-bootstrap/[email protected] ...
0
votes
2
answers
2k
views
how to bring maximize and minimize logic to work in angular bootstrap modal popup
i am using Angular Bootstrap Modal Popup, here i want to show Maximize and Minimize options along with close button.
When we click on max, it has to expand full screen, when min is clicked, it has to ...
- 2,547
1
vote
0
answers
41
views
How do I load custom sass within my angular project?
I have an Angular 14 project and I've installed ng-bootstrap. I'm trying to customise some of the bootstrap components. I realise I have to create my custom variables and then import the bootstrap ...
- 2,410
0
votes
0
answers
95
views
angular bootstrap datetimepicker not woking properly
In angular bootstrap datetimepicker choose date of previous month and datepick again then current month is displayed in popover
When I change the date, I get an error in the console.
I followed this ...
- 467
0
votes
2
answers
451
views
How to exclude Bootstrap's CSS from encapsulation in Angular?
Component imports Bootstrap to reference variables or mixins:
@import "node_modules/bootstrap/scss/bootstrap";
HTML contains custom CSS elements but mostly standard Bootstrap elements:
<...
- 3,337
1
vote
0
answers
337
views
Angular: How to change the style of ng-bootstrap pagination component
I'm using an ng-bootstrap pagination component but I need to change his style from this:
ng-bootstrap pagination to this: enter image description here (or something like that). I don't know if it's ...
1
vote
1
answer
165
views
Bootstrap navbar dropdown problem on angular
I'm having problems with the bootstrap navbar on Angular, I can't get the dropdown menu to load. The bootstrap scripts are linked in the angular.json file, I really can't figure out why. On an online ...
- 11
0
votes
1
answer
1k
views
How do I create an HTML responsive table with first 3 fixed/frozen left column and a scrollable body in angular 11?
I'm working on angular 11 and ng-bootstrap 9.1 and i need to make a table with first 3 columns fixed and at the same time it should be responsive too, I've made it fixed but couldn't find a foolproof ...
- 35
0
votes
1
answer
20
views
row and col classes are not expending the entire available width unless using form or p elements
I keep getting strange behaviors when using bootstrap in the application I'm working on. This is the first time I encounter such behavior.
Here's the HTML
<div class="row" style="...
- 21.9k
1
vote
2
answers
2k
views
Angular cannot access bootstrap from node_modules when I provide path in angular.json file
I am trying to install bootstrap in my Angular project.
I used npm install --save bootstrap to install bootstrap in my project
After that I installed jquery
Provided path for bootstrap
Below is the ...
- 43
0
votes
1
answer
2k
views
Angular 13 adding ngx-sharebuttons getting error like "Cannot find module '@angular/cdk/clipboard' or its corresponding type declarations."
i am making a web site in angular 13 with using Bootstrap 5 Laravel api etc .Here i use a share social media button for my pages. when i install ngx-sharebuttons"and install npm successfully ...
- 49
0
votes
1
answer
312
views
How to implement normal Bootstrap to Angular application?
I also want to know that sometimes the navbar class, collapse class and dropdown, toggle button are not supported in the angular application even when we install the bootstrap with scripts.
What I ...
- 409
2
votes
2
answers
1k
views
Angular is not updating view with boolean variable in the rxjs pipe
I have an issue with the Angular 14 which is not updating the view when querying data.
I want to show a loading spinner in my HTML when data are being loaded from the server. I am using ngbTypeahead ...
- 1,441
0
votes
3
answers
2k
views
ngb-Datepicker show wrong month on popup
I'm working with angular bootstrap datepicker and having some weird issues.
When opening the webpage everything looks alright, but when I want to change the date and I click on the calendar button to ...
- 13
0
votes
3
answers
1k
views
How to close bootstrap angular modal after redirect?
I am trying to close a boostrap modal after i navigate to a page. However when i navigate to the page the modal stays open. I tried to use the close method from the activeModal class but still stays ...
- 185
0
votes
2
answers
1k
views
I am getting this error when i try to add bootstrap in my Angular project
I tried using following command too,
ng add @ng-bootstrap/ng-bootstrap -- force
It didnt worked, so i deleted both node_modules and package-lock.json files.
I reinstalled it using following command.
...
0
votes
1
answer
4k
views
How to open model from ts file of angular?
I try to open the model on my page is load
HTML
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class=&...
- 367
0
votes
1
answer
729
views
Angular Bootstrap Carousel-> Remove slide number text from top of ng carousal
I am using Angular Bootstrap Carousel to run the image slides on my home page, it is always showing text as: "Slide 1 of 4".
I have tried many thing but could not remove it. Similar ...
- 154
0
votes
3
answers
43
views
Vertically aligning items in a col > row using Flex
I am quite new to Flex and was wondering if there was a way for me aligning certain items within a col -> row. I was thinking thinking of keeping it flex (ideally without using floats) because it ...
- 37
0
votes
1
answer
852
views
Type number is not assignable to type string | readonly string[] in angular bootstrap table sorting feature
I am creating a project in Angular 13 version. I have used the Angular Bootstrap library to create a list which is sortable and searchable. I have followed the below link to create the list: https://...
- 1,772
0
votes
2
answers
1k
views
Angular : how to add dynamic options in ngb-dropdown
I am using ngb-dropdown to show dropdown list in my application I have a scenario where I need to make an API call to get and show the dropdown items
I am trying to add options dynamically using *...
- 367
0
votes
1
answer
9k
views
Angular autocomplete dropdown
I want to create an input field with autocomplete. So when I write in the input field it displays me as dropdown values from the database.
Ideally, it should be with angular material but I can't get ...
- 746
0
votes
0
answers
627
views
how to set the first day of the week in ngBootstrap datepicker
Hello I'm trying to set the sunday as the first day of the week in the ngbootstrap, I'm using the bootstrap sample code same as:
HTML
<div class="col-6">
<ngb-datepicker #d1 [(...
- 301
0
votes
1
answer
937
views
what is content (reference) content: TemplateRef<any> in angular?
Hello I'm staring to work with Angular, when I was adding a modal with bootstrap into my html I found I need to send the parameter content which I never declarete
<tbody *ngIf="!loading"&...
- 301
1
vote
1
answer
684
views
Bootstrap accordion causes infinite re-renders
I have just upgrade an Angular project from version 11 to 12, including an update to @ng-bootstrap/ng-bootstrap (from v6 to v10).
The upgrade went great without any difficult changes, however I am now ...
- 5,771
0
votes
0
answers
90
views
DIv visibility:hidden not working, Control the visibility, without modifying the display, of elements - Bootstrap DIv tag
I have the code as below...
.visible {
visibility: visible;
}
<div class="row">
<div class="col-sm-8" *ngIf="loggedInUser && !loggedInUser.isPresident" style="visibility: ...
- 3,327
1
vote
1
answer
328
views
application angular 6 not displaying browser console error Cannot GET /secure/bootstrap-data
I was asked to do modifications on Angular 6 web application i'didn't know until now . I received a sourcecode but i tried to display the website and i doesn't work. I stayed late at night and wake up ...
- 69
-1
votes
1
answer
275
views
How to Create Count down timer selecting Time from the Time picker input and show the difference of selected Time to current Time in angular
This is my Typescript file
import { Time } from '@angular/common';
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { interval, Subscription, timer } from 'rxjs';
import ...
- 222
0
votes
0
answers
49
views
Bootstrap is not working on this component
The bootstrap is applied on the search button and the shopping cart icon but not the rest. The bootstrap does not work on the nav bar. Not sure if its just a typo problem but I got it to work earlier ...
0
votes
1
answer
1k
views
Unable to set default date in angular bootstrap datepicker control
I am using Angular Bootstrap datepicker control to choose date. I want to set default date in the control when the form is loaded.
Here is my HTML code:
<div class="input-group">
<...
- 1,772
2
votes
0
answers
1k
views
Unable to convert "13/7/2021" into a date' for pipe DatePipe in Angular 11
In my angular form I have used Angular Bootstrap Datepicker control to select date. After selecting date from datepicker, the date format I get from the control is "dd-MM-yyyy". Now I would ...
- 1,772
0
votes
0
answers
461
views
How to use Angular Bootstrap Tab inside Angular Bootstrap Modal
I am trying to place Angular bootstrap Tab inside Angular bootstrap Modal,
The thing is, Angular doesn't allow to render ng-template inside ng-template, so Angular bootstrap tab contents are not ...
4
votes
3
answers
6k
views
How to add bootstrap in an Angular library
My versions are:
1. npm v6.14.12
2. node v10.24.1
3. angular-cli v8.0.2
I created a library with these commands:
Step 1: ng new my-workspace --create-application=false
Step 2: cd my-workspace then ng ...
- 5,232
0
votes
0
answers
721
views
How to solve 'Cannot read property 'bootstrap' of null' in angular 12?
I am trying to run an angular project in angular 12 which was built on angular 6. I successfully build the project but it showing the following error in the console,
'Cannot read property 'bootstrap' ...
0
votes
1
answer
52
views
Using Boostrap 4 in an Angular 11 project
I'm trying to use Boostrap 4 in an Angulat 11 project.
In my asests/styles.scss I've added
@import "~bootstrap/scss/bootstrap.scss";
and in my angular.json I've added
"...
- 3,120
0
votes
2
answers
562
views
ngx-bootstrap datepicker localization month is lowercase
When I localize BsDatepicker monthes are lowercase except English localization
import { kkLocale } from 'ngx-bootstrap/locale';
import { ruLocale } from 'ngx-bootstrap/locale';
defineLocale('kk', ...
- 641
1
vote
0
answers
319
views
How to separate key value pairs and keep the key in a column and value in another column in angular using *ngFor?
I have an object
obj = {
a: 575
b: 985
c: 159
d: 86
e: 35
f: 7
}
I want to keep the KEYS a, b, c, d, e, f in one column but different rows and the Values in corresponding ...
- 392