@angular/material/expansion#MatExpansionModule TypeScript Examples

@NgModule({
  declarations: [
    AddAccountComponent,
    AccountFormComponent,
    ViewAccountsComponent,
    EditAccountComponent,
    ViewAccountComponent,
    NoValueDisplayPipe
  ],
  imports: [
    CommonModule,
    FlexLayoutModule,
    DirectivesModule,
    MatIconModule,
    MatInputModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatSelectModule,
    MatRadioModule,
    MatExpansionModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatCardModule,
    MatListModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    AlertModule,
    NgxFlagPickerModule,
    RouterModule.forChild(routes)
  ]
})

export class AccountsModule { }

@NgModule({
  declarations: [DxcAccordionGroupComponent],
  imports: [
    CommonModule,
    MatExpansionModule,
    MatIconModule,
    DxcAccordionModule
  ],
  exports: [DxcAccordionGroupComponent],
})
export class DxcAccordionGroupModule {}

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DashboardPageRoutingModule,
    MatExpansionModule,
    SharedModule,
    MatIconModule,
    MatRippleModule,
    MatTabsModule,
    MatBottomSheetModule,
    MatSnackBarModule,
    SwiperModule,
  ],
  declarations: [DashboardPage, StatsComponent, StatBadgeComponent, TasksComponent, TasksCardComponent],
  providers: [DashboardService],
})
export class DashboardPageModule {}

@NgModule({
  declarations: [DxcAccordionComponent, DxcAccordionIconComponent],
  imports: [
    CommonModule,
    MatExpansionModule,
    MatIconModule,
    BackgroundProviderInnerModule,
  ],
  exports: [DxcAccordionComponent, DxcAccordionIconComponent],
})
export class DxcAccordionModule {}

@NgModule({
    declarations: [
        AppComponent,
        SlippageSettingsComponent,
        GasSettingsComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        BrowserAnimationsModule,
        MatButtonModule,
        MatSelectModule,
        FormsModule,
        ReactiveFormsModule,
        MatInputModule,
        MatFormFieldModule,
        MatTooltipModule,
        MatIconModule,
        MatRadioModule,
        NgxWebstorageModule.forRoot(),
        MatAutocompleteModule,
        NgxMatSelectSearchModule,
        MatExpansionModule,
        FontAwesomeModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

/** A capture profile dialog module. */
@NgModule({
  declarations: [CaptureProfileDialog],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatDialogModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatTooltipModule,
  ],
  exports: [CaptureProfileDialog]
})
export class CaptureProfileDialogModule {
}

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    CustomComponent,
    SchemaEditComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    JsonSchemaFormModule,
    MatExpansionModule,
    MatToolbarModule,
    AppRoutingModule,
    MatCardModule,
    MatTooltipModule,
    MatSlideToggleModule,
    FormsModule,
    MatButtonModule,
    NgxEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [JsonSchemaFormComponent, EditElementDialogComponent, WidgetDirective],
  imports: [
    MatCardModule,
    FlexLayoutModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatDatepickerModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    HttpClientModule,
    CommonModule,
    MatInputModule,
    MatNativeDateModule,
    MatButtonModule,
    MatExpansionModule,
    MatMenuModule,
    ReactiveFormsModule,
    MatDialogModule,
    MatChipsModule,
    DragDropModule
  ],
  exports: [JsonSchemaFormComponent],
  providers: [
    // turn off tooltip gestures on mobile: https://github.com/angular/components/issues/4892
    { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { touchGestures: 'off' } },
    { provide: EDIT_DIALOG_TOKEN, useValue: EditElementDialogComponent }
  ]

})
export class JsonSchemaFormModule { }

@NgModule({
  declarations: [HostSideAnalysisDetail],
  imports: [
    CommonModule,
    MatExpansionModule,
    ChartModule,
  ],
  exports: [HostSideAnalysisDetail]
})
export class HostSideAnalysisDetailModule {
}

@NgModule({
  declarations: [
    AccountInfoComponent,
    ProfileImageComponent,
    InboxComponent,
    MessageComponent,
    NoSanitizePipe,
    ComposeEmailComponent,
    EmailChoiceComponent,
    EmailRedirectComponent
  ],
  imports: [
    CommonModule,
    FlexLayoutModule,
    MatIconModule,
    MatInputModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatCardModule,
    MatSelectModule,
    MatListModule,
    MatTableModule,
    MatSortModule,
    MatCheckboxModule,
    MatPaginatorModule,
    MatStepperModule,
    MatRadioModule,
    MatExpansionModule,
    MatMenuModule,
    MatToolbarModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    QuillModule.forRoot(),
    AlertModule,
    ImageUploaderModule,
    RouterModule.forChild(routes)
  ]
})
export class UserModule { }

/** A normalized accelerator performance view module. */
@NgModule({
  declarations: [NormalizedAcceleratorPerformanceView],
  imports: [
    CommonModule,
    MatExpansionModule,
  ],
  exports: [NormalizedAcceleratorPerformanceView]
})
export class NormalizedAcceleratorPerformanceViewModule {
}

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    FlexLayoutModule,
    RouterModule.forChild(routes),
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatExpansionModule,
    MatListModule,
    MatSnackBarModule,
    MatTooltipModule,
    LayoutModule,
  ],
  declarations: [
    LayoutComponent,
    ContentComponent,
    ExampleComponent,
    ViewerComponent,
    StackblitzComponent,
  ],
  providers: [
    ContentService,
  ],
})
export class DocsModule {}

@NgModule({
  declarations: [
    AppComponent,
    SampleDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSlideToggleModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatDialogModule,
    FlexLayoutModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

storiesOf(`${COMPONENT_SECTION_NAME}/Empty State`, module)
    .addDecorator(
        moduleMetadata({
            imports: [
                BrowserAnimationsModule,
                EmptyStateModule,
                MatButtonModule,
                MatIconModule,
                UtilModule,
                MatExpansionModule,
            ],
        })
    )
    .addDecorator(withKnobs)
    // @accessibility
    .addDecorator(withA11y)
    .addDecorator(storyWrapper())
    .addDecorator(useWhiteBackground())
    .addParameters({
        ...STORY_PARAMS,
        notes: { markdown: getReadMe('EmptyState.md') },
    })
    .add(README_STORY_NAME, getReadMeStory)
    .add(WITH_MIN_PROPS_STORY_NAME, withBasicConfig)
    .add('with description', withDescription)
    .add('with actions', withActions)
    .add(WITH_FULL_CONFIG_STORY_NAME, withFullConfig)
    .add('within a card', withinACardConfig);

@NgModule({
    declarations: [DrawerNavItemComponent],
    imports: [
        MatTooltipModule,
        CommonModule,
        InfoListItemModule,
        MatIconModule,
        MatDividerModule,
        MatRippleModule,
        MatExpansionModule,
    ],
    exports: [DrawerNavItemComponent],
})
export class DrawerNavItemModule {}

materialModules = [
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCheckboxModule,
  MatExpansionModule,
  MatDatepickerModule,
  MatDialogModule, // For focus
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatMenuModule,
  MatNativeDateModule,
  MatOptionModule,
  MatProgressSpinnerModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatTableModule,
  MatToolbarModule,
  MatTooltipModule,
]

@NgModule({
  declarations: [
    AppComponent,
    AlertDialogComponent,
    DockerDialogComponent,
    SambaDialogComponent,
    RsyncDialogComponent,
    CaptureOneDialogComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatToolbarModule,
    MatStepperModule,
    MatButtonModule,
    MatIconModule,
    MatFormFieldModule,
    MatDialogModule,
    MatMenuModule,
    MatDividerModule,
    MatAutocompleteModule,
    MatInputModule,
    MatSelectModule,
    MatButtonToggleModule,
    MatExpansionModule,
    MatSlideToggleModule,
    SocketIoModule.forRoot(config),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

modules = [
  MatCheckboxModule,
  MatButtonModule,
  MatInputModule,
  MatAutocompleteModule,
  MatDatepickerModule,
  MatFormFieldModule,
  MatRadioModule,
  MatSelectModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatMenuModule,
  MatSidenavModule,
  MatToolbarModule,
  MatListModule,
  MatGridListModule,
  MatCardModule,
  MatStepperModule,
  MatTabsModule,
  MatExpansionModule,
  MatButtonToggleModule,
  MatChipsModule,
  MatIconModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatDialogModule,
  MatTooltipModule,
  MatSnackBarModule,
  MatTableModule,
  MatSortModule,
  MatPaginatorModule,
  MatBadgeModule,
  MatBottomSheetModule,
]

@NgModule({
  exports: [
    MatExpansionModule,
    MatIconModule,
    MatListModule,
    MatButtonModule
  ]
})
export class ConsumerCommonModule { }

@NgModule({
  declarations: [],
  exports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatDialogModule,
    MatInputModule,
    MatRadioModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatListModule,
    MatToolbarModule,
    MatExpansionModule,
    MatTooltipModule,
    MatIconModule,
    MatProgressBarModule
]
})
export class SharedMatModule { }

modules = [
	MatToolbarModule,
	MatRippleModule,
	MatIconModule,
	MatTooltipModule,
	MatButtonModule,
	MatDividerModule,
	MatFormFieldModule,
	MatInputModule,
	MatCheckboxModule,
	MatProgressSpinnerModule,
	MatProgressBarModule,
	MatPaginatorModule,
	MatDialogModule,
	MatMenuModule,
	MatRadioModule,
	MatDatepickerModule,
	MatNativeDateModule,
	MatExpansionModule,
	MatSelectModule,
	MatBadgeModule,
	MatChipsModule
]

expose = [
  BrowserAnimationsModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatDialogModule,
  MatGridListModule,
  MatIconModule,
  MatListModule,
  MatMenuModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatTabsModule,
  MatToolbarModule,
  MatButtonModule,
  MatCardModule,
  MatGridListModule,
  MatIconModule,
  MatMenuModule,
  MatTreeModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatOptionModule,
  MatProgressSpinnerModule,
  MatExpansionModule,
  MatTooltipModule,
]

@NgModule({
  exports: [
    MatSelectModule,
    MatAutocompleteModule,
    MatCardModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatDialogModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatRadioModule,
    MatInputModule,
    MatRippleModule,
    MatDividerModule,
    MatExpansionModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatBadgeModule
  ]
})
export class MaterialComponentsModule {}

@NgModule({
  declarations: [
    GeneComponent,
    ResearchesComponent,
    GeneOntologyComponent,
    HumanProteinAtlasComponent,
    ExpressionComponent,
    DynamicContentAnchorsDirective,
    GeneLocationComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(GENE_ROUTES),
    TranslateModule,
    MatProgressBarModule,
    MatCardModule,
    MatListModule,
    MatExpansionModule,
    PipesModule,
    MaterialModule,
    NgToArrayPipeModule,
    UiComponentsModule,
    SidebarModule,
    DirectivesModule,
    NoContentModule,
    IconModule,
    GeneReferenceModule,
    PublicationInfoModule,
    AssociatedDiseasesModule,
    AssociatedDiseaseCategoriesModule,
    NgSplitPipeModule,
    ResearchTablesModule,
  ],
})
export class GeneModule {}

@NgModule({
  declarations: [TopOpsTable],
  imports: [MatExpansionModule],
  exports: [TopOpsTable]
})
export class TopOpsTableModule {
}

@NgModule({
  declarations: [
    AppComponent,
    LineChartComponent,
    AlgoSelectorComponent,
    ToolbarComponent,
    GroupToggleComponent,
    StatsTableComponent,
    PortfolioSettingsComponent,
    OpenTradesComponent,
    DateFilterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    MatIconModule,
    MatTabsModule,
    MatTreeModule,
    MatCardModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatTableModule,
    MatSortModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSlideToggleModule,
    AngularResizedEventModule,
    ChartModule,
    StoreModule.forRoot(
      { tradeLogs: tradeLogsReducer },
      { metaReducers: [storageSyncMetaReducer] }
    ),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
    EffectsModule.forRoot([TradeLogEffects]),
  ],
  providers: [
    {
      provide: useMockData,
      useFactory: () => !!environment.useMockData,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule {}

describe("DxcAccordion tests", () => {
  test("should render dxc-accordion", async () => {
    const { getByText } = await render(DxcAccordionComponent, {
      componentProperties: {
        label: "test-button",
        assistiveText: "assistiveText",
      },
      imports: [MatExpansionModule, BackgroundProviderInnerModule],
    });

    expect(getByText("test-button")).toBeTruthy();
    expect(getByText("assistiveText")).toBeTruthy();
  });

  test("defaultIsExpanded dxc-accordion", async () => {
    const projection = "Content inside the ng-content!";
    const onClickFunction = jest.fn();

    await render(
      `<dxc-accordion label="test-accordion" defaultIsExpanded="true" assistiveText="assistiveText" (onClick)="onClickFunction($event)">${projection}</dxc-accordion>`,
      {
        componentProperties: { onClickFunction },
        imports: [MatExpansionModule, BackgroundProviderInnerModule],
        declarations: [DxcAccordionComponent],
      }
    );

    expect(screen.getByText("test-accordion")).toBeTruthy();
    expect(screen.getByText("assistiveText"));

    expect(screen.getByText(projection).hidden).toBeFalsy();;
    fireEvent.click(screen.getByText("test-accordion"));
    expect(onClickFunction).toHaveBeenCalled();
    expect(screen.getByText(projection).hidden)
    fireEvent.click(screen.getByText("test-accordion"));
    expect(screen.getByText(projection).hidden).toBeFalsy();
  });

  test("controlled dxc-accordion", async () => {
    const projection = "Content inside the ng-content!";
    const onClickFunction = jest.fn();
    // TestBed.overrideComponent(DxcAccordionComponent, {
    //   set: { selector: "accordion" },
    // });
    const { getByText } = await render(
      `<dxc-accordion label="test-accordion" assistiveText="assistiveText" isExpanded="false" (onClick)="onClickFunction($event)">${projection}</dxc-accordion>`,
      {
        componentProperties: { onClickFunction },
        declarations: [DxcAccordionComponent],
        imports: [MatExpansionModule, BackgroundProviderInnerModule],
      }
    );

    expect(getByText("test-accordion")).toBeTruthy();
    expect(getByText("assistiveText"));

    expect(getByText(projection).hidden);
    fireEvent.click(getByText("test-accordion"));
    expect(onClickFunction).toHaveBeenCalled();
    expect(getByText(projection).hidden);
    fireEvent.click(getByText("test-accordion"));
    expect(getByText(projection).hidden);
  });
});

@NgModule({
  declarations: [
    AppComponent,
    ProfileManagerComponent,
    SupportComponent,
    ProfileOverviewTileComponent,
    ProfileDetailsEditComponent,
    InfoComponent,
    CpuDashboardComponent,
    GlobalSettingsComponent,
    ShutdownTimerComponent,
    ToolsComponent,
    ChangeCryptPasswordComponent,
    FanGraphComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatExpansionModule,
    MatInputModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatDividerModule,
    MatSliderModule,
    MatGridListModule,
    MatStepperModule,
    MatButtonToggleModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MarkdownModule.forRoot(),
    OverlayModule,
    GaugeModule.forRoot(),
    ChartsModule
  ],
  providers: [
    DecimalPipe,
    ThemeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }