NgbDropdown using autoClose in template and dynamically changing it does not work

[Jan Widmer]

Bug description:

According to the documentation and this bug fix, my understanding is, that one should be able to define the autoClose Option within the component template like this:

<div ngbDropdown autoClose="false">
	<button type="button" class="btn btn-outline-primary" id="dropdownConfig" ngbDropdownToggle>Toggle</button>
	<div ngbDropdownMenu aria-labelledby="dropdownConfig">
		<button ngbDropdownItem>Action - 1</button>
		<button ngbDropdownItem>Another Action</button>
		<button ngbDropdownItem>Something else is here</button>
	</div>
</div>

Setting the autoClose option like this does not seem to have en effect and it stays at the default value of outside. The only way I have managed to set the option is, by setting it via Config Service in the constructor:

constructor(config: NgbDropdownConfig) {
	config.autoClose = false;
}

This does not work for my case, as I need to change the value of autoClose conditionally AFTER the component was created depending on the actions, the user is doing within the dropdown. When opening a tooltip in the dropdown, autoClose should change from outside to false.

It does also not seem to work for the Popover Component, see https://stackblitz.com/edit/angular-j68rlc

Link to minimally-working StackBlitz that reproduces the issue:

• ng-bootstrap 14 (angular 15): https://stackblitz.com/edit/angular-lx1niz
• ng-bootstrap 16 (angular 17): https://stackblitz.com/edit/angular-vcqqvk

Versions of Angular, ng-bootstrap and Bootstrap:

I have tested with both versions for angular 15 and 17:

Angular:

• 15.2.10
• 7.0.9

ng-bootstrap:

• 14.2.0
• 16.0.0

Bootstrap:

• 5.2.3
• 5.3.2

[JB Nizet]

I'm not sure why the template compiler doesn't complain, but you just forgot the square brackets: [autoClose]="false".

[Jan Widmer]

@jnizet Thanks for the input.. that was actually just wrong in the Stackblitz.. BUT you still helped me to find out the problem.

It seems that

autoClose="{{false}}" is not working (which I was using in my project)

but

[autoClose]="false" is working

That's a little odd, because in the code example for the option container, they also use the option without square brackents:

I Am closing the ticket since it's working when using the correct forma..

[JB Nizet]

@janwidmer-work this is fundamental Angular stuff.

[foo]="bar" is property/input binding. It evaluates the bar Angular expression and sets the the result (which can be of any type) as the value of the property/input foo.

If you use foo="bar", then you pass the string "bar" to the property/input.

foo="{{ bar }}" should never be used. It evaluates the angular expression bar, transforms the result into a string (so in your case, the string "false", and sets bar to that string.

So container="body" is perfectly fine, because we do want to pass the string "body" as input. It's equivalent to [container]="'body'".

But autoClose="false" or autoClose="{{ false }}" are not, because you want to pass the boolean false, and those are passing the string "false".

[Jan Widmer]

@jnizet thanks for lighting it up for me and explaining. :)

BR Jan