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
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
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
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
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
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
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
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
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; }
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