CODEWITHSUNDEEP
jqueryangularmaterializeangular-materialize
Sandy Veliz
Sandy Veliz

Reputation: 732

ngx-materialize Switch Tabs programmatically

i m working with Angular 7 and ngx-materialize (ngx-materialize GitHub) The thing is i made a form with tabs and i want to chenge the active tab with a button, for accessibility purpose, the idea is that in the last input 'tabs' to the button and if the form is valid can continue to the other tab.

for now i can get the current active tab with Jquery

$('ul.tabs .active').attr('href')

but i cant "click" in the other tab with Jquery, so i suppose that is not the way, i must set active the new tab and inactive the previous one. Any idea how i can do this?

I believe that use the same feature that MaterializeCss but i cannot fin anything.

Thanks in advance!

DOCS ngx-materialize DOCS MaterializeCss

Upvotes: 1

Views: 392

Answers (1)

jahller
jahller

Reputation: 2953

since you are in the context of an angular component you don't really need to use jquery, but instead can elevate the functionality that angular offers to you

try to add an hashed identifier to your tabs e.g. #tab1

<mz-tab-item
  [active]="'true'"
  [disabled]="'false'"
  [label]="'Tab 1'"
  #tab1
>
  Tab 1
</mz-tab-item>

and do this inside the controller:

@ViewChild('tab1') tab1;
...
this.tab1.getNativeElement().click();

you can find the whole documentation on ViewChild here https://angular.io/api/core/ViewChild

also see this answer: angular2 manually firing click event on particular element

Upvotes: 0

Related Questions