I have a mat-sidenav in my project and I want to link a text to another URL, but when I use routerLink it doesn't work but it works out of the side-nav.it even works in the toolbar. what is the problem? here are my codes:
HTML:
<mat-toolbar>
<mat-toolbar-row>
<div>
<button mat-icon-button class="button" (click)="sidemenu.toggle()">
<mat-icon class="menu">menu</mat-icon>
</button>
</div>
<div mat-card-avatar class="example-header-image"></div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav mode="side" opened #sidemenu>
</mat-sidenav>
<mat-sidenav-content>
<div routerLink="/">home</div>
</mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-container>
Related
I been trying to create a navbar with a submenu. The nav bar data is rendered successfully but the submenu is not working, I am very new to this. Please let me know where is the problem.
<mat-nav-list class="navigation relative">
<div *ngFor="let link of navLinks; let i=index" style="padding-bottom: 14px;">
<div class="card">
<mat-list-item appAccordionlinks routerLinkActive="active-link" (click)="onClick(link.name)">
<a mat-button [matMenuTriggerFor]="submenu" *ngIf="link?.submenu?.length > 0" appAccordiontoggle
class="relative main-active">
<mat-icon *ngIf="link.icon">{{link.icon}}</mat-icon>
<img class="menu-img" *ngIf="link.img" [src]="link.img" alt="">
<app-menu-icon *ngIf="link.img" [name]="'employee'"></app-menu-icon>
<span>{{link.name}}</span><span fxFlex></span>
</a>
<a *ngIf="!(link?.submenu?.length > 0)" [routerLink]="link.path" appAccordiontoggle
class="relative main-active" mat-ripple fxLayout="row">
<mat-icon *ngIf="link.icon">{{link.icon}}</mat-icon>
<app-menu-icon *ngIf="link.img" [name]="link.name" [color]="link.color"></app-menu-icon>
<!-- <img class="menu-img" *ngIf="link.img" [src]="link.img" alt=""> this is need to mark as comment -->
<span>{{link.name}}</span>
</a>
</mat-list-item>
</div>
</div>
</mat-nav-list>
<mat-menu #submenu>
<ng-container *ngFor="let sublink of link?.submenu">
<ng-container *ngIf="link?.submenu?.length > 0">
<button mat-menu-item>
<img class="menu-img" *ngIf="sublink.img" [src]="sublink.img">
<span>{{sublink.name}}</span>
</button>
</ng-container>
</ng-container>
</mat-menu>
The mat-menu element is out of the scope of link variable. You need to include it (mat-menu) in the div you are dynamically rendering the links, i.e. within link's scope:
<div *ngFor="let link of navLinks; let i = index"...>
<--! card html -->
<mat-menu #submenu>
<--! submenu child elements... -->
</mat-menu>
</div>
Hi i am Learning Angular
I just Made an angular Panel But I want It To Be Rtl But I do not Know How To do That
This Is My Panel
this Is My Html Code
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button >
<mat-icon>menu</mat-icon>
</button>
<span> Admin Panel </span>
<div fxFlex fxLayout="row" fxLayoutAlign="flex-end">
<ul fxLayout="row" fxLayoutGap="20px">
<li>
<button mat-icon-button>
<mat-icon>settings</mat-icon>
</button>
</li>
<li>
<button mat-icon-button>
<mat-icon>help_outline</mat-icon>
</button>
</li>
</ul>
</div>
</mat-toolbar-row>
</mat-toolbar>
This Is My css
ul li{
list-style: none;
}
Do you mean something like that?
Code:
<mat-toolbar color="primary">
<mat-toolbar-row fxLayout="row-reverse">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span> Admin Panel </span>
<span fxFlex="1 1"></span>
<button mat-icon-button>
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>help_outline</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav position="end">
Sidenav content
</mat-sidenav>
<mat-sidenav-content>
Sidenav content
</mat-sidenav-content>
</mat-sidenav-container>
Using the fxLayout="row-reverse"-property in your <mat-toolbar-row>
Here is a stackblitz: https://stackblitz.com/angular/kgnvebakmpj
fyi if you only have one toolbar row, you can leave out the <mat-toolbar-row>.
I know this has been asked, but none of the solutions work.
I have following html and I can get the image displayed if I use the commented img-element
<img src="assets/utgmap.jpg">
and comment away the following div-element. However I would like to have background image for the div instead and it's not working. CSS definition is in the end of the file and there's no 404 error for the image so it can be fetched but is is not displayed.
HTML:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
<span>webgisproto</span>
<button mat-icon-button>
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>help_outline</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>exit_to_app</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="logout()">
<mat-icon>exit_to_app</mat-icon>
<span>Sign out</span>
</button>
</mat-menu>
</mat-toolbar-row>
</mat-toolbar>
<app-menu></app-menu>
<!-- THIS WORKS!!
<img src="assets/utgmap.jpg">
IF I UNCOMMENT THIS AND COMMENT OUT THE FOLLOWING DIV -->
<div class="bgimg">
<div class="testclass">
<mat-list color="primary">
<mat-list-item>
<button mat-icon-button>
<mat-icon>settings</mat-icon>
</button>
</mat-list-item>
<mat-list-item>
<button mat-icon-button>
<mat-icon>help_outline</mat-icon>
</button>
</mat-list-item>
</mat-list>
</div>
</div>
</mat-sidenav-content>
CSS:
.testclass {
float: right;
}
.bgimg {
background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
}
If I change the path above there will be error.
You need to set a dimension to your div. The following code will display the image in full screen.
html, body {
height: 100%;
}
.bgimg {
display:block;
width:100%;
height:100%;
background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
}
I have the responsive mat-sidenav which generated with Angular Material 6. Open/close button for navigation panel work excellent, but then navigation panel is open pannel obscure part of the content.
How to make the content part like a rubber:
<!--CONTENT-->
<main>
<router-outlet></router-outlet>
</main>
I mean when the navigation bar is closed then the content width is 100% of the page. But when navigation bar is opened then content compressed to 85% (My navigation bar have width: 15%)
This is template:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
mode="side"
#drawer
class="sidenav"
[(opened)]="isOpened"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async)"
>
<mat-nav-list>
<span
*ngFor="let link of links"
routerLinkActive="active"
>
<a mat-list-item [routerLink]="[link.url]">
{{link.name}}
</a>
</span>
<span style="position: absolute; bottom: 1px; width: 100%">
<a mat-list-item class="waves-effect waves-orange" (click)="logout($event)">
Выйти
</a>
</span>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button mat-icon-button (click)="drawer.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span style="margin-left: 45%">Oasis Bot Manager</span>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
<!--CONTENT-->
<main [ngStyle]="{'width': isOpened ? '85%' : '100%'}">
<router-outlet></router-outlet>
</main>
TypeScript side:
export class SiteLayoutComponent {
links = [
{url: '/vds_list', name: 'Статистика'},
{url: '/profile', name: 'Личный кабинет'}
];
isOpened;
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
constructor(private breakpointObserver: BreakpointObserver,
private auth: AuthService,
private router: Router) {
}
logout(event: Event) {
event.preventDefault();
this.auth.logout();
this.router.navigate(['/login']);
}
}
I'm trying bind width of content through [ngStyle] to [(opened)]="isOpened" state of mat-sidenav.
But not work. How to resolve this situation?
Your content area needs to be inside mat-sidenav-container below the toolbar:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
mode="side"
#drawer
class="sidenav"
[(opened)]="isOpened"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async)"
>
<mat-nav-list>
<span
*ngFor="let link of links"
routerLinkActive="active"
>
<a mat-list-item [routerLink]="[link.url]">
{{link.name}}
</a>
</span>
<span style="position: absolute; bottom: 1px; width: 100%">
<a mat-list-item class="waves-effect waves-orange" (click)="logout($event)">
Выйти
</a>
</span>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content style="display:flex; flex-direction:column;">
<mat-toolbar color="primary">
<button mat-icon-button (click)="drawer.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span style="margin-left: 45%">Oasis Bot Manager</span>
</mat-toolbar>
<!--CONTENT-->
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
I'm using angular 5 and angular material. i have a mat-sidenav-container that consists of mat-sidenav and a mat-sidenav-content. and I have a mat-toolbar in the top of my page. I want to use routerLink in my sidenav-content but it's not working however it works in my mat-toolbar. even a button click function is not working. here are my codes below
<mat-toolbar>
<mat-toolbar-row>
<div>
<button mat-icon-button class="button" (click)="sidemenu.toggle()">
<mat-icon class="menu">menu</mat-icon>
</button>
</div>
<div mat-card-avatar class="example-header-image"></div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened #sidemenu>
<mat-nav-list>
<mat-list-item appAccordionLink>
<a appAccordionToggle>
<mat-icon class="list-icon">inbox</mat-icon>
<span class="link">IncomingMail</span>
<span fxFlex></span>
</a>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<a routerLink="/">Home</a>
</mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-container>