Angular multiple components rendering view problem

Question

I have 2 components: the first one contains a toolbar, and the second one an other toolbar elements. I call my 2 components inside my app.component.html like this:

<first-component></first-component>
<second-component></second-component>

My problem is that the only the toolbar contained within the first component is displayed. Otherwise If I put the two toolbar directly in the app.component.html I don't get the problem.

Could someone help me with this?

Answer 1

Change the css on your first component to

mat-toolbar {
  position: sticky;
  position: -webkit-sticky; /* For macOS/iOS Safari */
  top: 0; /* Sets the sticky toolbar to be on top */
  z-index: 1000; 
}