[BUG] Tabler into Angular

[abrahampe]

Sorry for opening this like a BUG, I know that Tabler it is not guilty, but at least I have a bug and need help...

I started to use tabler into Angular 14/15, basically using the css, instead of pure bootstrap (based on demo). Everything works, except dropdown (probably because of href="#), I tried following all kind of tips and nothing works.
Anybody is using tabler into Angular? If yes has solved this problem? Help me please

I've seen that there was an old repo of a tabler version for Angular, probably the team decided fucus first on the main repo.

[rjd22]

Without a jsfiddle it will be really hard to help you out.

Dropdown menu's are Bootstrap native so most likely you can find some sample code to make it work also in tabler.

[abrahampe]

@rjd22 Thanks for answereing, I did it work only using ng-bootstrap lib, even so I had to implement angular components for each bootstrap! I will try @rodrigo-guimaraes-codefix solution, and show some code if it fails

[ghost]

Hi @abrahampe !
Just remove the href="#" and use (click)="". I'm using angular 12 and it worked.

[abrahampe]

@rodrigo-guimaraes-codefix I will try this trick! Thank you!

[abrahampe]

I've solve so:

In component.ts I did this function
toggleView(element: HTMLElement) { if (element.className.includes('show')) { element.className = element.className.replace(/show/g,''); } else { element.className = element.className + ' show'; }

In template I've added this on link:
(click)="toggleView(sidebar_menu)"

and this in the hide/show element:

<div class="collapse navbar-collapse" #sidebar_menu id="sidebar-menu">

I am using the last version of Angular (15.0.0.4) the empty click does not works

[andremcdo]

Still working in Angular 16.2.2. Thank you so much @abrahampe !

Here's my html:

<div class="nav-item dropdown">
    <button class="nav-link d-flex lh-1 text-reset p-0" (click)="toggleView(sidebar_menu)" data-bs-toggle="dropdown"
        aria-label="Open user menu" aria-expanded="false">
        <span class="avatar avatar-sm" style="background-image: url(../icon.png)"></span>
        <div class="d-none d-xl-block ps-2">
            <div>Username</div>
            <div class="mt-1 small text-secondary">UI Designer</div>
        </div>
    </button>
    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" #sidebar_menu data-bs-popper="static">
        <a [routerLink]="" class="dropdown-item">Status</a>
        <a [routerLink]="['/profile']" class="dropdown-item">Profile</a>
        <a [routerLink]="['/feedback']" class="dropdown-item">Feedback</a>
        <div class="dropdown-divider"></div>
        <a [routerLink]="['/settings']" class="dropdown-item">Settings</a>
        <a [routerLink]="['/signin']" class="dropdown-item">Logout</a>
    </div>
</div>

Full setup:

• Angular CLI: 16.1.8
• Node: 18.17.1
• Package Manager: npm 9.6.7
• OS: linux x64