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.
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