Questions tagged [ng-bootstrap]
A collection of custom-made Angular 2+ components that leverage the features and styles from the latest version (4+) of Twitter Bootstrap's HTML structure and CSS design.
HTML <ngb-datepicker (select)="onDateSelect($event)" [(ngModel)]="datePickerModel"></ngb-datepicker> <ngb-timepicker [meridian]="meridian" [(ngModel)]="time" class="fromTimePick"> </ngb-timepicker> Is it possible to restrict the ...
Just delving into the world of Angular2 and trying to learn through hands-on experience. However, I've hit a roadblock! I attempted to import ng-bootstrap and encountered this error: https://i.stack.imgur.com/QDVJ3.png Here's my systemjs.config ...
I encountered a console error that I couldn't resolve while working on my project. The technology stack involves Angular 4 and Bootstrap. Unfortunately, my frontend developer is unavailable this weekend, and I'm unsure if there are any missing d ...
I have integrated ngb-carousel into my Angular application for a basic website. Overall, everything is functioning correctly, but I have noticed that when I refresh the page, the carousel's image takes longer to load compared to the indicators and arrows. ...
My modal setup in the Component Library looks like this. Keep in mind, I am working within a Component Library, not just the application. Within my Component Library... The template is as follows: <div class="modal-header"> <h4 class="mt- ...
While testing the various components on ng-bootstrap, I encountered an issue with getting the carousel to work. Strangely enough, all the other ng-bootstrap components are functioning perfectly. Upon implementing the code from , the result is a blank white ...
My setup consists of a single parent component and 2 child components structured as follows: Parent-component.html <child-component-1 [id]="id"></child-component-1> <child-component-2></child-component-2> The child-compo ...
Is there a way to determine if a modal window is open? In order to accomplish this, I create a variable called modalInstance: NgbModalRef; and initialize the modal by using the code below this.modalInstance = this.modalService.open(UpdateModalConten ...
I've been grappling with sending data to a custom modal content component in Angular 2. My objective is to have the flexibility of calling this modal from any other component without duplicating code. Despite my efforts, including referencing the "Com ...
Struggling to understand why the modal displays when using Bootstrap 4 with ng-bootstrap, but not displaying with Bootstrap 3. ...
Here is the code snippet written in .ts file: openFormModal(id: number) { console.log(id); const modalRef = this.modalService.open(PartidoComponent); modalRef.componentInstance.id = id; //modalRef.componentInstance.id = id; modalRef.r ...
{ "name": "ModalWindow", "version": "1.0.0", "repository": { "type": "git", "url": "" }, "scripts": { "build": "webpack --mode production", "start": "webpack-dev-server --mode development --open" }, "license": "MIT", "depend ...
Utilizing ng-bootstrap, I am creating a Popover with HTML and bindings. However, the ng-template keeps getting recreated every time I click the button, causing a delay in the initialization of my component. Is there a way to hide the ng-template instead? ...
Utilizing ng-bootstrap in my latest project has allowed me to easily create a grid with breakpoints, like so: <div class="row"> <div class="col-sm-12 col-md-6 col-xl-4"></div> </div> Although these breakpoints are convenient, ...
Whenever I open the modal, a form will appear. If the user starts filling out the form but accidentally clicks on the backdrop, the default action is for the modal to close. However, I am interested in capturing this event because I want to display a new ...
Just a heads up for everyone, the current version of ng-bootstrap is not compatible with the latest release of Bootstrap (Alpha 6). This includes collapsing elements like collapses, dropdowns, navs, etc. I haven't figured out how to make the package work ...
Struggling with configuring the NgbDatepicker directive in my Bootstrap 4 and Angular 4 powered app. I only want to display months and years, similar to credit cards. Selecting a specific day is not important to me, I just need to choose the month and yea ...
I am facing a challenge with having multiple NgbPagination components on a single page. For more information, please visit: Initially, I attempted to use ids but encountered an issue where changing one value in the first pagination affected both tables. ...
Currently, I am utilizing ng-bootstrap to create my modals. I have been pondering the most effective approach to customize the modal window's HTML. The default appearance of the modal html is somewhat like this: <div role="document" class="modal- ...
I need help changing the position and icon of control arrows using Bootstrap. I've tried targeting "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing seems to work. Any suggestions on how to properly solve this issue? Here is the HTM ...
I encountered a situation like this: I need to implement a Ngb Bootstrap carousel with buttons for Previous and Next to control the slide images. Clicking on the Previous button should display the previous slide image, and clicking on the Next button shou ...
In my Angular application, I am trying to implement bootstrap's ngbDatepicker for a non-required date field. However, when the field contains a date and is then set to null, it causes the form to be marked as invalid. The following code demonstrates the i ...
I am contemplating the idea of integrating a component into an application that can function both as a Bootstrap modal and as a regular child component within a page. In the example provided on the referenced link, a component being used in a modal requir ...
I'm new to Angular/Typescript and have a question. I recently tried out the example from Wikipedia in ng-bootstrap typeahead. Instead of using the Wikipedia call, I decided to use a custom REST service that has the following GET endpoint: GET /pers ...
I am currently utilizing a multi-dimensional array connected to a reactive poller that waits for a database state update. Interestingly, when I initially load the state once, the user interface functions as intended. However, a challenge arises when I act ...
My journey with Bootstrap began by executing the command below: npm install --save bootstrap The installation was a success, and I proceeded to incorporate the CSS as follows: "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", ...
I am currently utilizing the PopoverModule feature from ng-bootstrap. One of the options available is to display the popup when hovering over it. Inside my popover, I have included an href link that directs to another page. The issue I am facing is that wh ...