[Solved] You want to create a shared module that provides a reusable IconButtonComponent and also re-exports Angular Material modules like MatIconModule and... Which configuration correctly achieves this? | Angular

Angular - Modules

You want to create a shared module that provides a reusable IconButtonComponent and also re-exports Angular Material modules like MatIconModule and MatButtonModule. Which configuration correctly achieves this?

A

<pre>@NgModule({
  declarations: [IconButtonComponent],
  imports: [CommonModule, MatIconModule, MatButtonModule],
  exports: [IconButtonComponent, MatIconModule, MatButtonModule]
})
export class SharedModule {}</pre>

B

<pre>@NgModule({
  declarations: [IconButtonComponent],
  imports: [CommonModule],
  exports: [IconButtonComponent]
})
export class SharedModule {}</pre>

C

<pre>@NgModule({
  declarations: [],
  imports: [CommonModule, MatIconModule, MatButtonModule],
  exports: [IconButtonComponent, MatIconModule, MatButtonModule]
})
export class SharedModule {}</pre>

D

<pre>@NgModule({
  declarations: [IconButtonComponent],
  exports: [IconButtonComponent],
  providers: [MatIconModule, MatButtonModule]
})
export class SharedModule {}</pre>

Step-by-Step Solution

Solution:

Step 1: Declare reusable component
IconButtonComponent must be declared in the shared module.
Step 2: Import Angular Material modules
Import MatIconModule and MatButtonModule so their components/directives are available.
Step 3: Export component and Material modules
Export both the reusable component and the Material modules to make them available to importing modules.

Step 4: Validate options

@NgModule({
  declarations: [IconButtonComponent],
  imports: [CommonModule, MatIconModule, MatButtonModule],
  exports: [IconButtonComponent, MatIconModule, MatButtonModule]
})
export class SharedModule {}

correctly imports and exports all needed items; others miss exports or declarations or misuse providers.

Final Answer:
Option A -> Option A
Quick Check:
Import and export shared components and modules [OK]

Quick Trick: Import and export all reusable declarations and modules [OK]

Common Mistakes:

Not exporting imported Angular Material modules
Adding modules to providers instead of imports
Omitting declarations for reusable components

Master "Modules" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Which configuration correctly achieves this?

Step 1: Declare reusable component

Step 2: Import Angular Material modules

Step 3: Export component and Material modules

Step 4: Validate options

Final Answer:

Quick Check:

Want More Practice?