Component not getting displayed while using material theme

Question

I am not getting what is happening here. I have following components,

1) app.component 2) Dashboard component. 3) Login component 4) Home component ( child of dashboard

Answer 1

The problem is you are using mat-sidenav without mat-sidenav-content, you can even check that your sidenav is taking the whole screen.

The simple solution is you don't need that header component. Simply use that header component code in your dashboard component and put that router-outlet insdie your dashboard componenet mat-sidenav-content tag.

Example:

dashboard.component.html

  

  
  

  menu
  Hello
  
  
 

  
    
     
       Dashboard
        

          Login
        
        

        Map
        

        Home
   
   
   
     
   
  
 

change the dashboard.component.ts as per the header.component.ts