angular bootstrap drop down items to opens on left

Question

I am using ngbDropdown. By default drop down items shows on the right side. The item gets invisible if the drop down alignment is right most of the page.

Here is HTML

<div ngbDropdown class="d-inline-block float_right">
   <span id="dropdownBasic1" ngbDropdownToggle class="cursor-pointer">Sort by</span>
   <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button class="dropdown-item">Name</button>
      <button class="dropdown-item">Date of creation</button>
   </div>
</div>

I tried class dropdown-menu-left but it did not work. How can I align drop down item to show on left side so that text don't break?

Answer 1

I have solved it by putting placement="bottom-right" in main div. Updated html is

<div ngbDropdown class="d-inline-block float_right" placement="bottom-right">
   <span id="dropdownBasic1" ngbDropdownToggle class="cursor-pointer">Sort by</span>
   <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button class="dropdown-item">Name</button>
      <button class="dropdown-item">Date of creation</button>
   </div>
</div>

Answer 2

Adding to the officially accepted answer, using Angular 8:

When adding placement="bottom-right" property to a tag that is a descendant of a tag with the navbar class, you'll also have to add display="dynamic" to it.

The default for children of navbar classed tags is display="static", and Sony-Khan's solution did not work for me until I added the override. Ng-bootstrap docs state:

When dropdown is used inside the Bootstrap's navbar, it will not be positioned (to match Bootstrap behaviour and work fine on mobile). You can override it by using the display input.

So, modify the opening tag in the example code above to:

<div
  ngbDropdown
  class="d-inline-block float_right"
  placement="bottom-right"
  display="dynamic"
  >
  ...
</div>

I am concerned about the part in the docs that says that static is the default so it "matches Bootstrap behaviour and works fine on mobile". I won't be able to test my solution on mobile for now, and in the meanwhile will be grateful for a more detailed description on what exact side-effects can be expected from applying the override.