4,636 questions
0
votes
0
answers
28
views
Text are not working for NgbActiveModal For Angular
I am using NgbActiveModal to openmodal however modal popup is getting open but I am unable to select nor enter something in text area of that popup modal
//html
<textarea rows="3" [(...
0
votes
1
answer
29
views
Angular & ng-bootstrap - UI Questions
I am a UI design engineer and my team has decided to build out our site using Angular. Bootstrap is the preferred UI framework and this is our first endeavor into Angular. I am seeing that ng-...
0
votes
1
answer
38
views
How can I pass a custom property to `$modal` from `angular-ui-bootstrap`
On two occasions I will have to open a modal like this:
$modal.open({
templateUrl: "components/prize-info/prize-info.html",
windowClass: "prize-info",
scope: $...
1
vote
1
answer
142
views
Angular Listview and Gridview
I would like to implement Listview and Gridview using Angular. Their features must include the following
paging
sorting
filtering
searching
The Gridview should also support Nested Gridview.
What'...
0
votes
1
answer
422
views
After upgrade to angular 17 bsdatepicker input [readonly property not working
I upgraded my project to angular 17 after that already working bootstrap date picker ready only propert is not working when inspect readonly propery is not showing .but in htm it is set as readonly as ...
-1
votes
1
answer
78
views
How to use Classname in react to give Bootstrap class and CSS file style in same "Classname" field
<div class="form-group" className=''>
<input type="password" class="form-control" className={loginStyle.passwordDiv}
id="...
2
votes
2
answers
136
views
Angular 9 - Checkbox value updates inside component but does not get checked in the UI
After upgrading my project from Angular 8 to 9 I've encountered some problems in the UI. The one that I seem not to figure out is the fact that checkboxes are not getting 'checked' when their value is ...
0
votes
2
answers
304
views
Upgrading angular from v15 to v16
I am upgrading my angular web-app from angular v15 to v16. The Ng-bootstrap used in angular v15 is ng-bootstrap v10, as per documents i have to upgrade my ng-bootstrap to v15 for angular v16. So my ...
1
vote
1
answer
55
views
space between my input bars, it just jumbos them all together which is something i dont want
<div class="row" style="margin-bottom: 0.1cm">
<div class="col-xs-4">
Fuel temp probe cap:
...
1
vote
1
answer
48
views
My html menu inside header tag is not properly hovering in angular, kindly guide me
Below is my CSS used in Angular application, menu is not hovering over all the controls in the angular component
css
nav {
background-color: #4D678D;
}
nav ul {
...
0
votes
1
answer
101
views
Angular API call keeps fetching every second
I inherited some Angular/ng-boostrap code that defined a table with static data that works fine. Now we need to fetch the data from an API call so I tried to modify it as below. I used the answer from ...
3
votes
0
answers
450
views
Accessibility Error in Axe DevTool: <ul> and <ol> must only directly contain <li>, <script>, or <template> elements with <uib-tabset> and <uib-tab>
I'm currently working on an AngularJS project using UI Bootstrap's <uib-tabset> and <uib-tab> components. In my implementation, I've noticed a potential accessibility issue flagged by the ...
0
votes
3
answers
1k
views
Bootstrap modal not working in Angular application
I am trying to use a Bootstrap modal in an Angular application using classes in HTML, but it not working - its not showing as a modal
<div class="modal text-center" *ngIf="showmodal&...
1
vote
1
answer
84
views
Unable to get data from the form in Bootstrap 5 with Angular
Using Angular and Bootstrap 5, I have this HTML code of a form:
<div class="mb-3">
<label for="genreName"> Tür adı</label>
<div *ngIf="!enterTheGenre&...
0
votes
1
answer
74
views
Bootstrap CSS compatibility with ngTable
I am working on AngularJs application.
Versions -
AngularJS - 1.8.2
Bootstrap.css - 2.3.2
I am integrating ngTable in the application. The pagination css is not working for ngTable. When i use ...
0
votes
1
answer
66
views
Angular Datepicker are not work proper move on page scroll
Html code
<div class="col-5 col-md-3 px-0 daterange-picker">
<div class="form-group">
<div class="input-group">
...
0
votes
0
answers
162
views
In angular trying to open component A bootstrap modal from component C template they have not any parent-child relationship
I'm using angular v14 with bootstrap 4 and rest api.I have 3 components,component A its parent component in it i've navbar with button to open the bootstrap modal under it is modal.Inside modal body i'...
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 ...
0
votes
1
answer
114
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=&...
0
votes
2
answers
141
views
ng-bootstrap - passing data vs. component life-cycle
I've seen many, many examples on how to pass data to a modal -
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.data = 'World';`
And then intercepting it in ...
0
votes
1
answer
413
views
Angular Schema validation error:"Data path "/styles/0" must be object", "must match pattern "\.(?:css|scss|sass|less)$", "exactly one schema in oneOf
I need help with building this angular project. I get these errors as soon as I start debugging:
Error: Schema validation failed with the following errors:
Data path "/styles/0" must be ...
0
votes
1
answer
116
views
Bootstrap installation verified but still unable to load in Angular 13 component
Not able to load Bootstrap to one of component in new Angular 13 Project.
angular.json file has below lines already added:
"styles": [
"src/styles.css",
...
0
votes
0
answers
35
views
Bootstrap each card instance images are different height
I am coding an angular project and am using bootstrap 5.
I am having an issue with card-img-top, as for every image the user uploads that is a different resolution, the image height is different. I ...
1
vote
0
answers
48
views
ngbSlide displays cards one on top of the other
I am trying to implement a carousel that displays cards. The cards are displayed one below the other instead of inside of an carousel.
I used this approach of implementation:
<ngb-carousel *ngIf=&...
0
votes
1
answer
536
views
How to place the arrow to the right of the header of a sorted table?
I have a table and I want to add the sort option to all table headers, so I used the bootstrap exemple for my purpose.
The only problem in this example is the position of the arrow which is on the ...
1
vote
1
answer
674
views
Errors when attempting to install ng-bootstrap, package installation failed
I am working on an Angular app, for which I need an accordion. I attempted to install the ng-bootstrap package by running the command 'ng add @ng-bootstrap/ng-bootstrap', but every time I try running ...
0
votes
2
answers
730
views
Aligning elements together in Angular
I have the following code in an HTML component.I have applied bootstrap for loading prebuilt components like buttons. Its aligning very weirdly, I'm not the strongest guy at HTML alignment more of a ...
0
votes
1
answer
242
views
Parsing images from Fileservice into Slider in Angular component
I am working on an Angular application in which I have a working fileservice that is displaying images and other information; now, I would like to display the images from that fileservice in the ...
0
votes
1
answer
108
views
HTML <a> tag displaces the text to the new line in a Bootstrap grid system
I am having a problem with the frontend of my page when I try to inline the label and the link of the mother and father elements.
I tried using the following code:
<div class="row">
&...
0
votes
1
answer
244
views
How to close a modal in JS which is opened by "data-target"?
I have a modal template in the same HTML file as controller.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDeleteItem"&...
0
votes
1
answer
151
views
Add a icon on selected date in NGB Calendar
I am using ng-bootstrap datepicker to display calender in my app inline calendar, the calendar does not display a curent day icon like this.
Any idea for this? I tried with so many times but I was ...
0
votes
1
answer
53
views
Create navigation with popmenu if its to long
How can I create a responsive breadcrumbs navigation that adapts to the width of the page and shows a few elements as a popmenu if the navigation is to long.
I Have e.g. the following list:
<div&...
1
vote
1
answer
760
views
ERROR NullInjectorError: R3InjectorError(AppModule)[NgbDropdown -> NgbDropdown -> NgbDropdown]: NullInjectorError: No provider for NgbDropdown
I'm very new to angular as i'm leaning it right now in a intnership.
However, i would like to learn how to correctly set a dynamic dropdown in ngBootstap as i'm getting the following error: Error
Here'...
-2
votes
1
answer
1k
views
height=100%/height=100vh going beyond screen
I have set height:100% but its going beyond screen, how do I restrict height to not go beyond footer.
Overflow scrollbars should not go beyond footer.
If you check the scroll bar for #two , the lower ...
2
votes
1
answer
854
views
Angular Bootstrap: Navbar doesn't expand
I have an Angular project with Bootstrap for styling. I want to make a menu bar with a dropdown icon when the screen is too small to show al the menu items. When the screen is large, all the menu ...
1
vote
3
answers
773
views
Error Adding Bootstrap Into Angular Project
Trying to run this in my Angular project
ng add @ng-bootstrap/ng-bootstrap
Get this error though and don't know how to fix
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: paxium-...
1
vote
1
answer
93
views
UI Bootstrap not working in combination with $sce.trustAsHtml()
I am using angularJs (v1.4.7) and ui.bootstrap in combination with html code that I am getting with REST API.
The problem is: if I get html with ui.bootstrap directives inside, it is not displayed ...
1
vote
2
answers
4k
views
I want to add a "show password" button with bootstrap 5
i want something like this
Image form bootstrap
but i get this instead
Image on my localhost
And this is my code:
<input
type="password"
...
0
votes
1
answer
137
views
Remove date from ToDate on selection of fromDate in ng-Bootstrap
I want to clear date from toDate while selecting date from fromDate in ng-bootstrap.
<form class="row row-cols-sm-auto" *ngIf="showDateRangeImp">
<div class="col-...
0
votes
1
answer
56
views
How to display two texts in a column using bootstrap?
I am trying to understand how to use the bootstrap code in angular but I can't get the columns to work.
I want to display two columns next to one another but I can't get it to work.
I was told to wrap ...
-1
votes
1
answer
2k
views
how does row and columns work in angular + Bootstrap
I am trying to understand how angular calculates how the elements are rendered in the dom.
more specifically, how row and column work
I added some examples below with what i was expecting to see but i ...
1
vote
0
answers
228
views
toastr shows only after I refresh the page just for one condition
I am using the following line to display toastr success message. But there is one condition where this line is being hit but toastr is not getting displayed and it works when the page is refreshed.
...
1
vote
0
answers
86
views
How to style pagination bar in angular project
how i can style pager in angular inside TS file or HTML file without scss with this code
<div class="d-flex justify-content-center" *ngIf="totalCount && totalCount > 0&...
0
votes
0
answers
124
views
$(...).selectpicker is not a function angular
I'm trying to use bootstrap select on the angular project. And seems that some components, that are working with this kind of function are not working at all.
My package.json:
`
"dependencies&...
0
votes
1
answer
708
views
Display a details model where data comes from an object array (angular 14)
I'm having trouble to display a model with details for different elements.
Overall, I have a group of cards which contains different information data. The goal is: when I click on the button to ...
0
votes
2
answers
447
views
How to completely style an Angular Bootstrap Component
I would like to know if it is possible to completely take control of the style/css of a component that I'm using from ng-bootstrap?
Here's my problem:
I have this code...
<ngb-datepicker
#dp
[(...
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 ...
0
votes
2
answers
4k
views
How can i update ngx-bootstrap in my angular project
I am using angular version of @angular/cli": "~8.3.25 and ngx-bootstrap": "^5.3.2", and now I want to update my ngx-bootstrap version to ngx-bootstrap": "^8.0.0"...
-3
votes
2
answers
392
views
how to filter data by date in angular using dropdow
How Do I filter data by using a drop down menu in angular? I have no idea on how to start this. I am using HTTPGet to get my data from a backend API and I need to filter my data by 1 month/2months/...
1
vote
1
answer
302
views
Incorrect work of Angular and Bootstrap: columns stretched only by the size of the content
<div class="row">
<div *ngFor="let column of columns">
<div class="col">
<div *ngFor="let cell of column&...