How to place app in main content ? Angular sidenav

Viewed 28

I build website by using Angular sidenav but I don't know how to place app inside the main content. everytime I try to use router function. it routes me to different page that is not inside the main content. What should I do ? thanks for helping me out

My Picture App

*Updated

https://github.com/FlameDickyHead/Electric-Device-Borrowing-Website/tree/master

<mat-toolbar>
        <button mat-icon-button *ngIf="sidenav.mode =='over'" (click)="sidenav.toggle()">
            <mat-icon *ngIf="!sidenav.opened">menu</mat-icon>
            <mat-icon *ngIf="sidenav.opened">close</mat-icon>
        </button>
        Electric Devices Borrowing Website
        <button mat-button (click)="logout()">
            <mat-icon>logout</mat-icon>
            Logout
        </button>
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav #sidenav="matSidenav">
            <img width="100" height="100" class="avatar mat-elevation-z8" src="assets/image/logoproject.png">
            <h4 class="name">EDBW Company</h4>
            <mat-divider></mat-divider>
            <button mat-button class="menu-button" (click)="home()">
                <mat-icon>home</mat-icon>
                <span>Home</span>
            </button>
            <button mat-button class="menu-button">
                <mat-icon>person</mat-icon>
                <span>Employees</span>
            </button>
            <button mat-button class="menu-button">
                <mat-icon>add_shopping_cart</mat-icon>
                <span>Borrowing Devices</span>
            </button>
            <button mat-button class="menu-button">
                <mat-icon>backspace</mat-icon>
                <span>Returning Devices</span>
            </button>
            <button mat-button class="menu-button">
                <mat-icon>list_alt</mat-icon>
                <span>Status Tables</span>
            </button>
            <br /><br /><br />
            <mat-divider></mat-divider>
            <button mat-button class="menu-button">
                <mat-icon>info</mat-icon>
                <span>About us</span>
            </button>
            <button mat-button class="menu-button">
                <mat-icon>help</mat-icon>
                <span>Help</span>
            </button>
        </mat-sidenav>
        <mat-sidenav-content>
            <div class="content mat-elevation-z4">
                Main Content
            </div>
        </mat-sidenav-content>
    </mat-sidenav-container>
1 Answers

Add router outlet inside mat-sidenav-content

 <mat-sidenav-content>
        <div class="content mat-elevation-z4">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>

Also make sure your routing setup is there in app.routing.ts file or in app module.

Related