Inside angular material tab first time it's working if I am changing the tab and coming back again then width is increasing it's not initializing properly

[Amitshaale]

Hi,

Please help... I have puted slider inside tab and it's working fine for first time, if I go to some other tab and coming again to slider tab it's not working properly.

Here is my code...

// HTML <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig" (init)="slickInit($event)" (breakpoint)="breakpoint($event)" (afterChange)="afterChange($event)" (beforeChange)="beforeChange($event)"> <div ngxSlickItem *ngFor="let slide of slides" class="slide">

// Component.ts

slides = [ { img: 'http://placehold.it/350x150/000000' }, { img: 'http://placehold.it/350x150/111111' }, { img: 'http://placehold.it/350x150/666666' }, { img: 'http://placehold.it/350x150/333333' }, { img: 'http://placehold.it/350x150/666666' }, { img: 'http://placehold.it/350x150/666666' } ]; slideConfig = { slidesToShow: 4, slidesToScroll: 4, infinite: false };

addSlide() { this.slides.push({ img: 'http://placehold.it/350x150/777777' }); }

removeSlide() { this.slides.length = this.slides.length - 1; }

slickInit(e) { console.log('slick initialized'); }

breakpoint(e) { console.log('breakpoint'); }

afterChange(e) { console.log('afterChange'); }

beforeChange(e) { console.log('beforeChange'); }

[filol]

Not only in material tab, i have the problem on a basic page

[kalathiyan]

+1 facing same issue, anyone found solution ?

[bhargav-spinx]

facing the same issue, did anyone found the solution?

[rajeevudayan1]

Facing the same issue. Any solution?

[Kanaan95]

You can try using the slickGoTo() method in the AfterViewInit lifecycle.

If this doesn't work, here's something I did, and it works. Set the variableWidth property to true on init, then in the AfterViewInit, set it back to false.

Hope this helps