Карусель не работает внутри mat-tab в Angular 6

Я пытаюсь использовать карусель в mat-tab. В моем приложении у меня есть 3 вкладки (mat-tab-group). Я хочу, чтобы внутри всех вкладок была карусель.

Но в моем случае карусель работает внутри первой вкладки, только карусель второй и третьей вкладок не работает (она не переключает изображения автоматически по истечении определенного времени).

app.component.html

 <div class = "container" style = "padding-top: 50px">
          <mat-tab-group>
            <mat-tab label = "Mobile">
              <div style = "padding-top: 25px" class = "carousel slide carousel-fade" data-ride = "carousel">
                <div class = "carousel-inner">
                  <div class = "carousel-item active">
                    <img class = "d-block w-100 ProductImg" src = "{{activeMobileProduct.img}}" alt = "{{activeMobileProduct.alt}}">
                  </div>
                  <div class = "carousel-item" *ngFor = "let mobile of mobileProducts">
                    <img class = "d-block w-100 ProductImg" src = "{{mobile.img}}" alt = "{{mobile.alt}}">
                  </div>
                </div>
              </div>
            </mat-tab> //This part is working

            <mat-tab label = "Web">
              <div style = "padding-top: 25px" class = "carousel slide carousel-fade" data-ride = "carousel">
                <div class = "carousel-inner">
                  <div class = "carousel-item active">
                    <img class = "d-block w-100 ProductImg" src = "{{activeWebProduct.img}}" alt = "{{activeWebProduct.alt}}">
                  </div>
                  <div class = "carousel-item" *ngFor = "let web of webProducts">
                    <img class = "d-block w-100 ProductImg" src = "{{web.img}}" alt = "{{web.alt}}">
                  </div>
                </div>
              </div>
            </mat-tab> //It's not working as I mentioned above.

            <mat-tab label = "Windows">

            </mat-tab>
            <mat-tab label = "Clients"> Clients </mat-tab>
          </mat-tab-group>
        </div>

stackblitz: https://stackblitz.com/edit/angular-mat-tab-active-3haqea?file=app/tabs-template-label-example.html

Может ли кто-нибудь дать мне решение этой проблемы.