Questions tagged [angular-ui-bootstrap]
A set of AngularJS directives based on Twitter Bootstrap's markup and CSS
4,644
questions
0
votes
0
answers
15
views
ngxTypeahead not open list dropdwon angular 15
I want to create an autocomplete with ngx-typeahead, but the dropdown menu does not open when typing, the input-text appears and you can type in it, but there is no response beyond that,
I use in ...
0
votes
0
answers
46
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
37
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
0
answers
36
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
0
answers
33
views
Please define one of these @NgModule.bootstrap
"main.ts:12 Error: NG0403: The module AppModule was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of ...
0
votes
2
answers
35
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
0
answers
15
views
NgbModal dialog is not opening consistnetly when app is openend in more than 1 browser tabs
I have an Angular application that has an user inactivity timer implemented. The idea is that if the user is not interacting with the app for certain period of time, the app will open a bootstrap ...
0
votes
1
answer
55
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
0
answers
26
views
Angular JS Autofocused first child on opening the dropdown [closed]
I am new to AngularJs. I have created a searchable bootstrap dropdown with the list of items from which we can search any item. What i am looking for here is when i open the dropdown the first child ...
0
votes
1
answer
28
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
21
views
How do I set up this "Adzilen" portfolio in Angular?
I downloaded this Bootstrap portfolio to modify and use in Angular, but I can't implement it so that the bootstrap and the changes work, can you help me with the config step by step that you have to ...
0
votes
0
answers
23
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
15
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
0
answers
40
views
ngx bootstrap sortable in custom template usage
<div class="row">
<div class="col-xs-6 col-6 col-md-5 col-lg-3">
<bs-sortable
[(ngModel)]="objectGroups"
filedName="displayName"...
0
votes
1
answer
74
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
383
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
73
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
68
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
58
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
134
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
85
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
43
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&...
0
votes
0
answers
65
views
customElements Bootstrap and Primeflex class names clash
I have an Angular App A, which I build using customElements to be used in Angular App B. The problem is that App A uses Primeflex and App B uses Bootstrap so that when I incorporate A in B, there will ...
0
votes
1
answer
267
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
580
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 ...
1
vote
1
answer
207
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
598
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-...
0
votes
0
answers
34
views
Angular - I added ngbtimepicker in a ngbpopover in the ag grid and the popover is hiding at the back
I'm trying to add a ngbtimepicker in a ngbpopover. The popover is triggered and it is hiding at the back of the element. I tried to add some z-index to the popover to bring that to the front, but ...
1
vote
1
answer
88
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 ...
0
votes
0
answers
18
views
Problem with typeahead in AngularJS version 1.6.9
Everything looks fine as far as I can tell but the controller code and html will only return 'undefined - undefined' on the UI. I should warn that I am an AngularJS newby.
Here is the controller.js ...
1
vote
2
answers
1k
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
58
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
35
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
207
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 ...
0
votes
0
answers
69
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
44
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
92
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
443
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
128
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
638
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
2k
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
218
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
185
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&...
2
votes
1
answer
1k
views
The 'buildOptimizer' option cannot be used without 'aot'
when I try to run the "ng serve" command I get the follow error:
[error] Error: The 'buildOptimizer' option cannot be used without 'aot'.
at generateWebpackConfig (C:\Users\Acasa\0 SDA\0 ...
5
votes
1
answer
8k
views
bootstrap installation in angular 14 fail
I wanted to install Bootstrap in Angular 14 using "ng add @ng-bootstrap/ng-bootstrap" but I get an error in PhpStorm IDEA. What should I do?
Error
Error
-1
votes
1
answer
357
views
Changing existing application to responsive angular
How do i make an existing angular application and bootstrap was used !! How do i make it mobile responsive. Do i have to rewrite the whole css file , html files again or is there anyway. I m new to ...
0
votes
1
answer
629
views
ngStyle for specific condition
<h4 *ngFor="let x of textAddedList"
[ngStyle]="{backgroundColor:textAddedList.length>2?'grey':'transparent'}">
{{x}}
</h4>
I want to apply the grey styling ...
0
votes
1
answer
653
views
Angular Draggable under ng-template with TypeScript
Apologies if it's been asked before, I haven't been able to find anything hence asking around if anyone could be of assistance. So I am working on creating a Bootstrap Modal popup with form in it and ...
0
votes
1
answer
1k
views
Angular Bootstrap Navigation unable to switch between nav-tabs
I'm using bootstrap navigation in angular application as shown in below HTML
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist"...
1
vote
1
answer
2k
views
How to put custom bootstrap theme in Angular 12?
I have an angular website with bootstrap from npm and the @ng-bootstrap/ng-bootstrap. I really don't like the default theme. So I found some themes on bootswatch. and I downloaded the '_variables.scss'...