ng-zorro-antd

NG-Zorro nz-tabs angular component not behaving properly


I am writing a vs code extension and using the angular NG-Zorro nz-tabs component in a web view application component. I used the very simplest template:

<nz-tabset>
  <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
  <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
  <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
</nz-tabset>

Here is a snippet of the app.component.ts file:

import { NzTabsModule, NzTabSetComponent } from "ng-zorro-antd/tabs";

@Component({
  standalone: true,
  imports: [
    NzTabsModule,
  ],
...

The behavior I get is when a new tab is clicked, the content that should be displayed is added to what is already displayed unless it has already been displayed. This demonstrates:
unexpected nz-tabs behavior

I tried searching everywhere for someone with a similar issue but found nothing related on any web site.

Is there something simple that I am missing in my workspace that causes the nz-tab content to overlay the tab content like that? Thank you in advance.


Solution

  • The problem is you're missing the registration of the Animations provider in your ApplicationConfig value.

    providers: [
      provideNzI18n(en_US),
      provideAnimations(),   // This is missing
      ...
    ]
    

    Which now results in

    tabs