Other Directive

NgAceTabSwipe

NgAceTabSwipe directive is applied to ngbNavOutlet of ng-bootstrap library.
It's a wrapper for Ace's tab swiping functionality.

Input

NgAceTabSwipe

Optionally used to configure swiping direction, etc similar to Ace's JS swiping options.
It's an object which each key being the ID of the tab pane, and corresponding next, prev tab pane IDs.

For example in login page we have:

<div [ngbNavOutlet]="nav" [NgAceTabSwipe]='{"swipe": "right", "forgot": {"prev": "signin"}, "signup": {"prev": "signin"}}' class="tab-sliding p-0 border-0">
</div>

It means:

• Only swiping right is allowed. (not swiping to the element on right, but swiping your finger to right)
• Although the HTML pane before forgot is signup, we want it to swipe to signin and skip other panes.

So you can specify an alternative pane when swiping a pane right/left.

NgAceScroll

Wrapper for Ace's scrollbar plugin. With similar options.

<div [NgAceScroll]='{"height": 300}'>
...
</div>

NgAceScrolltop

Clicking on this will scroll window to top

<button type="button" NgAceScrollTop>
    Go to top
</button>

The button on page's bottom that scrolls top top when clicked is using the directive.

NgAceSticky

Add sticky events for a sticky element:

Outputs

stuck

Emitted when a sticky element is stuck/unstuck:

<div class="sticky-nav" NgAceSticky (stuck)="isStuck($event)">
...
</div>

isStuck($event: boolean) {
    let $isStuck = $event;
    if ($isStuck) doSomething()
}

NgAcePopover

In order to have popovers with custom borders and arrows, you can use this directive like this:

<ng-template #customPopover1>
    <div NgAcePopover class="brc-primary-m3 border-b-2">
        <div class="arrow arrow2 brc-primary-l2"></div>
        <div class="arrow brc-primary-m1"></div>
        <h3 class="popover-header bgc-primary-l2 border-0 text-110 text-dark-tp3 text-600">Title</h3>
        <div class="popover-body text-grey-d3 text-105">Custom arrows and colors</div>
    </div>
</ng-template>

<button class="btn" placement="bottom" [ngbPopover]="customPopover1">
    Popover on bottom
</button>

You just need to put the custom popover HTML inside the ng-template that is going to be shown using ngbPopover of @ng-bootstrap

ngb-alert[remove]

If an ngb-alert component from @ng-bootstrap is closed, it will be removed from DOM as well:

<ngb-alert remove [dismissible]='false' ...>
...
</ngb-alert>

NgAceAutofocus

Automatically focus on this element when a dropdown is opened or navbar collapse is shown (in mobile view):

<div #collapse="ngbCollapse" [ngbCollapse]="true" class="collapse navbar-collapse">
    <input NgAceAutofocus type="text" />
</div>

NgAceClass

Helper directive for overriding class names for elements in 3rd party components/elements that are not in DOM yet or set class names anyway.

For example when using ngbNavLink directive, we sometimes in Ace don't need the .nav-link class name and should remove it but it is set by the directive:

<a ngbNavLink [NgAceClass]='{"-1": "nav-link"}' class="btn btn-light-lightgrey ...">
    Contact
</a>

(-1) means remove "nav-link" class from this element.
If it was (+1) it would add "nav-link" class to this element.

Or in the wizard page, the steps are inserted in DOM later and are not accessible until component is rendered.
So using NgAceClass we update class names when component is inserted in dom:

If the number was (+3) it would mean add class to parent's parent, and so on.
If the number was (-3) it would mean remove class from parent's parent, and so on.