1

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

Sandy Veliz
  • 690
  • 9
  • 16

1 Answers1

0

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

jahller
  • 2,705
  • 1
  • 28
  • 30
  • Thx @jahller for your time, i already try that, but the ViewChild always get 'undefined', i think is a problem in the button i try to use because is loaded AfterViewInit because part of a form, so i think is another problem with lifecycles, not the way a try to make the click event. – Sandy Veliz Feb 20 '19 at 22:32