Error while creating a side bar navigation in Angular

I am trying to create a dashboard in Angular. I am using angular material package to create it.

My code works, but I have a problem with side navigation. As you could see from the image below when i click the button, the width of the side menu is decreased. rather I wanted it to be for whole page. Can anyone give me a lead where I am going wrong

Code : Component.html



<mat-sidenav-container class="sidenav-container">

  <mat-sidenav

    #drawer

    class="sidenav">

    <mat-toolbar color="primary"> Menu </mat-toolbar>

    <mat-nav-list>

      <a mat-list-item href="#">1</a>

      <a mat-list-item href="#">2</a>

      <a mat-list-item href="#">3</a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

      <button

        type="button"

        aria-label="Toggle sidenav"

        mat-icon-button

        (click)="drawer.toggle()">

        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

      </button>

      <span>Test Application</span>

    </mat-toolbar>

    <ng-content></ng-content>

  </mat-sidenav-content>

</mat-sidenav-container>

this is my ts file.

import { Component } from '@angular/core';



@Component({

  selector: 'app-main-nav',

  templateUrl: './main-nav.component.html',

  styleUrls: ['./main-nav.component.css']

})

export class MainNavComponent {





  constructor() {}



}

enter image description here

asked Jan 3 at 14:45

Mikz

198114

1

maybe you can create a working example here? stackblitz.com/edit/angular-playground

– itdoesntwork
Jan 3 at 15:01

i have not used it before

– Mikz
Jan 3 at 15:14

1

you don't want scrollbar or what please explain briefly!

– deepbchudasama
Jan 3 at 15:22

@deepbchudasama I want to extend the height. As you could see for some reason, the height of the sidebar is restricted. and I dont need the scrollbar

– Mikz
Jan 4 at 7:00

add a comment |

I am trying to create a dashboard in Angular. I am using angular material package to create it.

Code : Component.html



<mat-sidenav-container class="sidenav-container">

  <mat-sidenav

    #drawer

    class="sidenav">

    <mat-toolbar color="primary"> Menu </mat-toolbar>

    <mat-nav-list>

      <a mat-list-item href="#">1</a>

      <a mat-list-item href="#">2</a>

      <a mat-list-item href="#">3</a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

      <button

        type="button"

        aria-label="Toggle sidenav"

        mat-icon-button

        (click)="drawer.toggle()">

        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

      </button>

      <span>Test Application</span>

    </mat-toolbar>

    <ng-content></ng-content>

  </mat-sidenav-content>

</mat-sidenav-container>

this is my ts file.

import { Component } from '@angular/core';



@Component({

  selector: 'app-main-nav',

  templateUrl: './main-nav.component.html',

  styleUrls: ['./main-nav.component.css']

})

export class MainNavComponent {





  constructor() {}



}

enter image description here

asked Jan 3 at 14:45

Mikz

198114

1

maybe you can create a working example here? stackblitz.com/edit/angular-playground

– itdoesntwork
Jan 3 at 15:01

i have not used it before

– Mikz
Jan 3 at 15:14

1

you don't want scrollbar or what please explain briefly!

– deepbchudasama
Jan 3 at 15:22

@deepbchudasama I want to extend the height. As you could see for some reason, the height of the sidebar is restricted. and I dont need the scrollbar

– Mikz
Jan 4 at 7:00

add a comment |

I am trying to create a dashboard in Angular. I am using angular material package to create it.

Code : Component.html



<mat-sidenav-container class="sidenav-container">

  <mat-sidenav

    #drawer

    class="sidenav">

    <mat-toolbar color="primary"> Menu </mat-toolbar>

    <mat-nav-list>

      <a mat-list-item href="#">1</a>

      <a mat-list-item href="#">2</a>

      <a mat-list-item href="#">3</a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

      <button

        type="button"

        aria-label="Toggle sidenav"

        mat-icon-button

        (click)="drawer.toggle()">

        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

      </button>

      <span>Test Application</span>

    </mat-toolbar>

    <ng-content></ng-content>

  </mat-sidenav-content>

</mat-sidenav-container>

this is my ts file.

import { Component } from '@angular/core';



@Component({

  selector: 'app-main-nav',

  templateUrl: './main-nav.component.html',

  styleUrls: ['./main-nav.component.css']

})

export class MainNavComponent {





  constructor() {}



}

enter image description here

asked Jan 3 at 14:45

Mikz

198114

I am trying to create a dashboard in Angular. I am using angular material package to create it.

Code : Component.html



<mat-sidenav-container class="sidenav-container">

  <mat-sidenav

    #drawer

    class="sidenav">

    <mat-toolbar color="primary"> Menu </mat-toolbar>

    <mat-nav-list>

      <a mat-list-item href="#">1</a>

      <a mat-list-item href="#">2</a>

      <a mat-list-item href="#">3</a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

      <button

        type="button"

        aria-label="Toggle sidenav"

        mat-icon-button

        (click)="drawer.toggle()">

        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

      </button>

      <span>Test Application</span>

    </mat-toolbar>

    <ng-content></ng-content>

  </mat-sidenav-content>

</mat-sidenav-container>

this is my ts file.

import { Component } from '@angular/core';



@Component({

  selector: 'app-main-nav',

  templateUrl: './main-nav.component.html',

  styleUrls: ['./main-nav.component.css']

})

export class MainNavComponent {





  constructor() {}



}

enter image description here

angular intellij-idea angular-material mat-sidenav

asked Jan 3 at 14:45

Mikz

198114

asked Jan 3 at 14:45

Mikz

198114

asked Jan 3 at 14:45

Mikz

198114

asked Jan 3 at 14:45

Mikz

198114

asked Jan 3 at 14:45

Mikz

198114

1

maybe you can create a working example here? stackblitz.com/edit/angular-playground

– itdoesntwork
Jan 3 at 15:01

i have not used it before

– Mikz
Jan 3 at 15:14

1

you don't want scrollbar or what please explain briefly!

– deepbchudasama
Jan 3 at 15:22

@deepbchudasama I want to extend the height. As you could see for some reason, the height of the sidebar is restricted. and I dont need the scrollbar

– Mikz
Jan 4 at 7:00

add a comment |

1

maybe you can create a working example here? stackblitz.com/edit/angular-playground

– itdoesntwork
Jan 3 at 15:01

i have not used it before

– Mikz
Jan 3 at 15:14

1

you don't want scrollbar or what please explain briefly!

– deepbchudasama
Jan 3 at 15:22

@deepbchudasama I want to extend the height. As you could see for some reason, the height of the sidebar is restricted. and I dont need the scrollbar

– Mikz
Jan 4 at 7:00

maybe you can create a working example here? stackblitz.com/edit/angular-playground

– itdoesntwork
Jan 3 at 15:01

i have not used it before

– Mikz
Jan 3 at 15:14

you don't want scrollbar or what please explain briefly!

– deepbchudasama
Jan 3 at 15:22

@deepbchudasama I want to extend the height. As you could see for some reason, the height of the sidebar is restricted. and I dont need the scrollbar

– Mikz
Jan 4 at 7:00

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024562%2ferror-while-creating-a-side-bar-navigation-in-angular%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

m bdWXsiEA8diZAPXFHl,QwxM,ZX0EkT SmjJ5espdU,w2eBc rHNGWbX1XNl581Q1oi6zY vJvKDzy,h

搜尋此網誌

Bdtjtk