CODEWITHSUNDEEP
ng-bootstrap
user3373970
user3373970

Reputation: 58

NgbDropdown autoClose "outside" is not working

I am using angular4 with ng-bootstrap. I want to close my dropdown on clicking outside the dropdown (rest of document). After reviewing the documentation i identified that autoClose Type: boolean | "outside" | "inside". But when i tried to set it as param config.autoClose = 'outside' then my script start showing this error "Type '"outside"' is not assignable to type 'boolean'."

Any suggestions or help on it.

Upvotes: 3

Views: 12175

Answers (2)

Inamur Rahman
Inamur Rahman

Reputation: 3291

In Angular, if you are using ng-Bootstrap. If you want that your dropdown gets closed on click in any part of the screen, then add this line in your code.

[autoClose]="true"

Your code will look like

<div ngbDropdown class="d-inline-block" [autoClose]="true">
     <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Option 1 </button>
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Option 2 </button>
 </div>

If you don't want then put.

[autoClose]="false"

Upvotes: 6

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

I was suspecting that you are using a version of ng-bootstrap that doesn't have support for autoClose="outside" yet (it was introduced very recently, in 1.0.0-beta.1, see the changelog: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md#100-beta1-2017-08-11)

After closer investigation, though, it turned out that we had a small bug in ng-bootstrap for which I've sent a PR already: https://github.com/ng-bootstrap/ng-bootstrap/pull/1754. This fix will be merged before the next release.

I believe that as a for now you can use a work-around by casting config like so:

(<any>config).autoClose = 'outside';

Upvotes: 3

Related Questions