fix(module:carousel): fix nzAfterChange callback value not correctly (#…

…7326)

close #7323

components/carousel/carousel.component.ts

@@ -308,7 +308,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
       this.nzBeforeChange.emit({ from, to });
       this.strategy!.switch(this.activeIndex, index).subscribe(() => {
         this.scheduleNextTransition();
-        this.nzAfterChange.emit(index);
+        this.nzAfterChange.emit(to);
         this.isTransiting = false;
       });
       this.markContentActive(to);

components/carousel/carousel.spec.ts

@@ -17,7 +17,7 @@ describe('carousel', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [BidiModule, NzCarouselModule],
-      declarations: [NzTestCarouselBasicComponent, NzTestCarouselRtlComponent]
+      declarations: [NzTestCarouselBasicComponent, NzTestCarouselRtlComponent, NzTestCarouselActiveIndexComponent]
     });
     TestBed.compileComponents();
   }));
@@ -284,6 +284,26 @@ describe('carousel', () => {
     // already covered in components specs.
     // describe('opacity strategy', () => {});
   });
+
+  describe('carousel nzAfterChange return value', () => {
+    let fixture: ComponentFixture<NzTestCarouselActiveIndexComponent>;
+    let testComponent: NzTestCarouselActiveIndexComponent;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestCarouselActiveIndexComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+    });
+
+    it('carousel activeIndex should be equal to nzAfterChange return value', fakeAsync(() => {
+      fixture.detectChanges();
+      [0, 1, 2, 3, 4].forEach(_ => {
+        testComponent.nzCarouselComponent.next();
+        tickMilliseconds(fixture, 700);
+        expect(testComponent.index).toBe(testComponent.nzCarouselComponent.activeIndex);
+      });
+    }));
+  });
 });
 
 describe('carousel custom strategies', () => {
@@ -421,3 +441,22 @@ export class NzTestCarouselRtlComponent {
   @ViewChild(Dir) dir!: Dir;
   direction = 'rtl';
 }
+
+@Component({
+  template: `
+    <nz-carousel (nzAfterChange)="afterChange($event)">
+      <div nz-carousel-content *ngFor="let index of array">
+        <h3>{{ index }}</h3>
+      </div>
+    </nz-carousel>
+  `
+})
+export class NzTestCarouselActiveIndexComponent {
+  @ViewChild(NzCarouselComponent, { static: true }) nzCarouselComponent!: NzCarouselComponent;
+  array = [0, 1, 2, 3, 4];
+  index = 0;
+
+  afterChange(index: number): void {
+    this.index = index;
+  }
+}