dropright variation for dropdown not working in ng-bootstrap

Question

I'm trying to integrate dropright variation to a bootstrap dropdown. I can see it in bootstrap documentation https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright

They have given code

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

I want to integrate this in ng-bootstrap.https://ng-bootstrap.github.io/#/components/dropdown/examples . They have given example code https://ng-bootstrap.github.io/stackblitzes/dropdown/basic/stackblitz.html.

I tried just like in bootstrap documentation.

        <div ngbDropdown class="d-inline-block dropright">
            <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
                Toggle dropdown
            </button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem>Action - 1</button>
                <button ngbDropdownItem>Another Action</button>
                <button ngbDropdownItem>Something else is here</button>
            </div>
        </div>

But this doesn't do anything. Appreciate your help Thanks

Answer 1

okay need to add placement property. possible values are in https://ng-bootstrap.github.io/#/guides/positioning#api

<div ngbDropdown class="d-inline-block dropright" placement="right-top">

putting dropright in class will make the arrow point in right direction