NgbDropdown: remove dropdown arrow

Solution Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element: .dropdown-toggle::after { display:none; } Why? By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element. Doing this removes it. Here is a LIVE DEMO demonstrating it. How do you work it out? Using chrome dev … Read more

EventEmitter from bootstrap modal component to parent

It is actually very simple as you can directly subscribe to the @Output events of the component opened as modal’s content: export class NgbdModalComponent { constructor(private modalService: NgbModal) {} open() { const modalRef = this.modalService.open(NgbdModalContent); modalRef.componentInstance.name=”World”; modalRef.componentInstance.clickevent.subscribe(($e) => { console.log($e); }) } } Here is a working plunker: http://plnkr.co/edit/rMJ7qfSSLK0oHspIJbDB?p=preview Side note: I’m not sure what … Read more

Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste

Update This warning is coming from ng-packagr (and there’s now a section of the ng-packagr docs about this). Turns out ng-packagr is just telling you that it wants you to add all dependencies to an “allowedNonPeerDependencies”: [] property in ng-package.json (this option used to be called “whitelistedNonPeerDependencies”). For example: { “allowedNonPeerDependencies”: [ “tslib”, … ] … Read more

Angular Material: How to close all mat-dialogs and sweet-alerts on logout

This is what i have done to close any open mat-dialog throughout the application: import {MatDialog} from ‘@angular/material’; export class myClass { constructor(private dialogRef: MatDialog) { } logOut() { this.dialogRef.closeAll(); } } If you would like to close only a specific dialog you can loop through dialogRef.openDialogs and close the respective dialog using close() This … Read more

Angular7 and NgbModal: how to remove default auto focus

The focus is needed to be within modal for accessibility and keyboard navigation reasons. By default the focus is on the first focusable element within modal, which in your case is the close button. You can add ngbAutofocus attribute to the element where you want the focus to be. Focus management demo. <button type=”button” ngbAutofocus … Read more

stop closing the modal by clicking backdrop or outside the modal

As per the answer of @anshuVersatile, I understand we need to use some modal options. Then I create a object of NgbModalOptions and pass it as second parameter of my open method and it works. Code is as follows : let ngbModalOptions: NgbModalOptions = { backdrop : ‘static’, keyboard : false }; console.log(ngbModalOptions); const modalRef … Read more

How to programmatically close ng-bootstrap modal?

To expound upon pkozlowski.opensource’s response, the way I actually got the reference to the NgbModalRef class was by modifying what is in his plunker on the this.modalService.open as follows: this.modalReference = this.modalService.open(content); this.modalReference.result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); Then I was able to call: … Read more

Is it correct to implement a custom NgbDateParserFormatter to change the format of the input value on NgbInputDatepicker?

As of today implementing a custom NgbDateParserFormatter is the best way to go. So yes, it is a correct way. In the future we might have a more sophisticated implementation of the NgbDateParserFormatter where you will be able to just pass a desired format (ex. yyyy-MM-dd). Adding this feature will depend on user’s interest. You … Read more

ng-bootstrap Modal size

The cleanest solution that I could find is to use the windowClass property. I.e.: this.modalService.open(MyModalComponent, { windowClass : “myCustomModalClass”}); Then add the following to your global CSS styles. This is important as the style won’t be picked up from your components CSS. .myCustomModalClass .modal-dialog { max-width: 565px; }

Dynamic template reference variable inside ngFor (Angular 9)

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope. So you can just use one variable for your template reference <div *ngFor=”let member of members”> <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template> <button type=”button” class=”btn btn-secondary” [ngbPopover]=”popupContent” popoverTitle=”Fancy content”> I’ve got markup and … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)