Angular7 button not rendering when import the custom component separately from material design components

Question

I am playing with angular material design and noticed something strange. I have simple app with router, one Login component and two shared modules:

• material design module (imports/exports all material design components)
• custom components module (imports/exports all custom components, in my case it's only one)

The shared modules are imported in the router. When the Login component is exported from the material design module the Login button renders correctly. The problem is when I export the Login component from the custom components module - then the login button does not render as material design component.

I prepared two stackblitz examples to illustrate this:

https://stackblitz.com/edit/angular-mat-ok?embed=1&file=src/app/app.component.ts - here the button is styled as material design button.

https://stackblitz.com/edit/angular-mat-not-ok?embed=1&file=src/app/app.component.ts - here the button is rendered as normal, not styled button.

Can someone tell me the reason why the button does not render correctly when it's imported from the custom components module? I intended to use that module to group and distribute the custom components in the app.

Answer 1

LoginFormComponent lives in CustomComponentsModule and looks for other components and directives to render in it. To be able to use material button from MaterialComponentsModule you should import MaterialComponentsModule to CustomComponentsModule