Questions tagged [angular-ui-bootstrap]

A set of AngularJS directives based on Twitter Bootstrap's markup and CSS

Filter by
Sorted by
Tagged with
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 ...
h.z.'s user avatar
  • 39
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'...
Junior Dev's user avatar
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 ...
Junior Dev's user avatar
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=&...
Abhilash Anand's user avatar
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 ...
KHUSHBU GUPTA's user avatar
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 ...
Spencer Gresoro's user avatar
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 ...
Mihail Nikolov's user avatar
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 ...
Banick's user avatar
  • 35
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 ...
Vivek Sharma's user avatar
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", ...
Smriti Bhawana's user avatar
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 ...
Frederico Rook's user avatar
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 ...
mmajic's user avatar
  • 1
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=&...
Andrei-Iulian Cristea's user avatar
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"...
Aakash Singh's user avatar
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 ...
Mohamed Jihed Jaouadi's user avatar
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 ...
Moataz Abdelraouf's user avatar
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 ...
the.lotuseater's user avatar
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 ...
DWA's user avatar
  • 530
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"> &...
Nikola's user avatar
  • 11
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"&...
Tomcat's user avatar
  • 21
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 ...
Oshadha Punchihewa's user avatar
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&...
Lowterm's user avatar
  • 101
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 ...
Adrian's user avatar
  • 1
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'...
marcom966's user avatar
-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 ...
Lucifer's user avatar
  • 66
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 ...
Olivier De Brabant's user avatar
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-...
Dave Amour's user avatar
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 ...
AjayVenkatesh's user avatar
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 ...
akrelj's user avatar
  • 151
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 ...
Chuck's user avatar
  • 51
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" ...
hpinzon15's user avatar
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-...
Supriya Kumari's user avatar
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 ...
Juan Casas's user avatar
-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 ...
Juan Casas's user avatar
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. ...
sai kiran's user avatar
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&...
ayoub code's user avatar
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&...
Nazarii Muliak's user avatar
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 ...
KimiH's user avatar
  • 39
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 [(...
pIO's user avatar
  • 17
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 ...
Petr Jelínek's user avatar
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"...
Amit Maurya's user avatar
-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/...
Andrelle John Nantes's user avatar
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&...
Александр's user avatar
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 ...
Marcel's user avatar
  • 21
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
user avatar
-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 ...
Mr Falariss's user avatar
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 ...
cha1nsaw's user avatar
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 ...
rac3b3nn0n's user avatar
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"...
Kiran Narayan's user avatar
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'...
user3432681's user avatar

1
2 3 4 5
93