Materializecss tabs not working properly

Question

In the code below, I'm using materializecss and angular-materialize

<div class="row">
<div class="col s12">
    <ul tabs>
        <li class="tab col s3"><a href="#company">company</a></li>
        <li class="tab col s3"><a href="#fleet">fleet</a></li>
        <li class="tab col s3"><a href="#user">user</a></li>
        <li class="tab col s3"><a href="#vehicle">vehicle</a></li>
        <li class="tab col s3"><a href="#poi">poi</a></li>
        <li class="tab col s3"><a href="#driver">driver</a></li>
        <li class="tab col s3"><a href="#sim">sim</a></li>
        <li class="tab col s3"><a href="#device">device</a></li>
    </ul>
</div>
<div id="company" class="col s12" ng-include="'pages/companies.html'"></div>
<div id="fleet" class="col s12" ng-include="'pages/fleet.html'"></div>
<div id="user" class="col s12" ng-include="'pages/user.html'"></div>
<div id="vehicle" class="col s12" ng-include="'pages/vehicle.html'"></div>
<div id="poi" class="col s12" ng-include="'pages/poi.html'"></div>
<div id="driver" class="col s12" ng-include="'pages/driver.html'"></div>
<div id="sim" class="col s12" ng-include="'pages/sim.html'"></div>
<div id="device" class="col s12" ng-include="'pages/device.html'"></div></div>


<script>
$(document).ready(function () {
    $('ul.tabs').tabs();
});</script>

The problem is that when I select any tab at random, I always see the first one. If I select one by one in order, they look good, but I discovered that the other tabs that do not select continue to appear at the bottom of the page. Please if any of you could solve this inconvenience I will be grateful for the answer

Answer 1

In case someone is using Angular 2, here is an example:

1. In the template section of the component (html file):

<div class="card-tabs">
           <ul class="tabs tabs-fixed-width">
               <li class="tab"><a class="active"(click)='setScopeTab(1)'>Ingreso a la aplicación</a></li>
               <li class="tab"><a (click)="setScopeTab(2)">Registro Productos</a></li>
               <li class="tab"><a (click)="setScopeTab(3)">Maestro Productos</a></li>
               <li class="tab"><a (click)="setScopeTab(4)">Maestro Usuarios</a></li>
           </ul>
 </div>

2. In the ts file of the component

 .....
 import * as M from 'materialize-css'
 export class AlcanceComponent implements OnInit, AfterContentInit {
 scopeTab: number;

 constructor() {
 this.scopeTab = 1;
 }

 ngOnInit(): void {
 }

 ngAfterContentInit(): void {
 var elems = document.querySelectorAll('.tabs');
 var instance = M.Tabs.init(elems);
 }

 setScopeTab(value: number): void {
  this.scopeTab = value
 }

 ...