I got a big problem using this example from material's SideNav Example
I don't want my sidenav to overlap on my navbar/toolbar
here's my code
<mat-sidenav #drawer class="sidenav"
[fixedInViewport]="false"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<li *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a routerLinkActive="active" [routerLink]="[menuItem.path]" class="nav-link">
{{menuItem.title}}
</a>
</li>
</mat-nav-list>
</mat-sidenav>
here's an image of it
Related
I have created a navbar with this command ng generate #angular/material:material-nav --name=home and I want my navbar to be fixed on the top when I am scrolling down.
I tried position: fixed; with my mat-sidenav-content but it didn't worked. You guys have any idea how I can do this?
navbar.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="false"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<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">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>checkout</span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>
navbar.component.ts
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
Thanks!
Try to change fixedInViewport from false to true.
If you have content(s) above sidenav you can use position sticky:
<mat-sidenav-container class="sidenav-container" style="position:sticky; top: 0">
....
</mat-sidenav-container>
But unfortunately, it is not supported by all browsers (https://caniuse.com/css-sticky).
The second way, you can use position fixed (in this case there should be no element above it):
<mat-sidenav-container class="sidenav-container" style="position:fixed; width: 100%; top: 0">
....
</mat-sidenav-container>
Was trying to get material sidebar to open over two hours, and discovered, that if there is no height set on sidenav-content, then sidebar is not opening at all.
My goal is to have sidebar full height always on the left side, not same height what content has. Current situation with 40vh: SideNav not full height
Does somebody know why it is so, or should my sidenav-content be something different than at the moment?
<app-header (toggleSidenav)="navigationSidenav.toggle()"></app-header>
<mat-sidenav-container autosize="true">
<mat-sidenav #navigationSidenav [fixedInViewport]="false">
<mat-nav-list>
<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-list-item [routerLink]="'/activities'"> Activities </a>
<a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
<a mat-list-item (click)="navigationSidenav.toggle()">Close</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 40vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
App header looks like so
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
Official docs:
The <mat-sidenav> will, by default, fit the size of its content.
Therefore, you should tell the component explicitly what is the desired height.
i have issue with active class in tablist/listgroup of angular. when i click any items it becomes active,but active class is not being removed from old tab. Please help me out
<div class="list-group" id="list-tab" role="tablist">
<span *ngFor="let itm of serviceitms;let i = index">
<a *ngIf="i == 0" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
href="#list-home" role="tab" aria-controls="itm.name">{{itm.name}}</a>
<a *ngIf="i != 0" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
href="#list-home" role="tab" aria-controls="itm.name">{{itm.name}}</a>
</span>
</div>
Seems like you are using angular with bootstrap directly. Use ng-bootstrap or ngx-bootstrap angular should not be directly used with bootstrap. That is a very bad practice.
ng-bootstrap option:
https://ng-bootstrap.github.io/#/components/nav/overview
ngx-bootstrap option (combine groups with accordion):
https://valor-software.com/ngx-bootstrap/#/buttons
https://valor-software.com/ngx-bootstrap/#/accordion
i think you should change the id and href for every item.
also you should do this for tab content divs.
<div class="list-group" id="list-tab" role="tablist">
<span *ngFor="let itm of serviceitms;let i = index">
<a [class.active]="i == 0" class="list-group-item list-group-item-action" id="list-home-list{{ i }}" data-toggle="list"
href="#list-home{{ i }}" role="tab" aria-controls="itm.name">{{itm.name}}</a>
</span>
</div>
I want to change the font across my whole website (effectively changing the font globally), so I've overwritten the Bootstrap font by updating my styles.scss file as below:
$theme-colors:(
"primary": #84329b,
);
#import '../node_modules/bootstrap/scss/bootstrap';
html, body { height: 100%; }
body { margin: 0; font-family: 'MuseoModerno', cursive !important; }
This works successfully, however, the font in my header does not change in-line with this (see the below image).
How can I ensure the font changes for the header?
For completeness, I've included the html code for my header below. As you can see, I've attempted to update the font specifically on the header, as it wasn't working after updating the styles.scss file. Unfortunately, this doesn't seem to work either.
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap" rel="stylesheet">
<mat-sidenav-container class="sidenav-container">
<!---links to appear in the sidenav if the device is a mobile-->
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/catalogue" (click)="drawer.close()"
>Catalogue</a
>
<a mat-list-item routerLink="/notepads" (click)="drawer.close()"
>Explore Pads</a
>
<hr class="divider-line">
<a mat-list-item routerLink="/login" (click)="drawer.close()">Login</a>
<a mat-list-item routerLink="/sign-up" (click)="drawer.close()"
>Sign Up</a
>
</mat-nav-list>
<hr class="divider-line">
</mat-sidenav>
<!---content below is for everything contained along the header, mobile or not-->
<mat-sidenav-content>
<mat-toolbar>
<!---this is the menu icon to appear on mobile-->
<button
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async"
>
<mat-icon>menu</mat-icon>
</button>
<!---spacer between the mobile menu button and Padder logo-->
<span class="left-spacer" *ngIf="isHandset$ | async"></span>
<!---Padder logo for desktop-->
<span *ngIf="!(isHandset$ | async)" class="logo" routerLink="/"
><img
class="logo-image"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!--links for the header when the device is not a handset-->
<div class="nav-links" *ngIf="!(isHandset$ | async)">
<a mat-button routerLink="/catalogue">Catalogue</a>
<a mat-button routerLink="/notepads">Explore Pads</a>
</div>
<div class="search-container" *ngIf="!(isHandset$ | async)">
<mat-form-field class="header-search">
<input matInput placeholder="Search for products or pads.." />
</mat-form-field>
</div>
<!---Padder logo for mobile-->
<span *ngIf="isHandset$ | async" class="logo" routerLink="/"
><img
class="logo-image-mobile"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!---spacer between Padder logo and login button-->
<span class="right-spacer" *ngIf="isHandset$ | async"></span>
<!--login / sign-up button to be shown when user not logged in, desktop-->
<div class="login-links">
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Login</a
>
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Sign Up</a
>
</div>
<!---search icon to be shown when the user is on mobile-->
<div>
<button mat-icon-button *ngIf="isHandset$ | async">
<mat-icon>search</mat-icon>
</button>
</div>
<!---dropdown to be down when the user is logged into the website-->
<!---
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a mat-menu-item routerLink="/profile">
<span>Profile</span>
</a>
<a mat-menu-item href="">
<button mat-stroked-button>Logout</button>
</a>
</mat-menu>
</div>--->
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
In you styles.scss, do the following:
#import "https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap";
* {
font: 500 20px/32px Roboto, 'MuseoModerno', sans-serif !important
}
This will definitely work
This is what I have:
home.html
<li *ngFor="let item of myList">
<div *ngIf="item.messageText === {{myVar}}" class="bordered">{{item.messageText}}</div>
<div *ngIf="item.messageText !== {{myVar}}" class="greyedOut">{{item.messageText}}</div>
</li>
in home.ts I have defined the variable myVar and I've assigned to it a value.
I want to assign bordered class to the element of myList which has a value equal to myVar and assign another class if that element's value is different.
*ngIf would work if you change {{myVar}} to myVar(without interpolation) in expression.
<li *ngFor="let item of myList">
<div *ngIf="item.messageText === myVar" class="bordered">{{item.messageText}}</div>
<div *ngIf="item.messageText !== myVar" class="greyedOut">{{item.messageText}}</div>
</li>
Though I would prefer you to use ngClass here, more cleaner and better solution.
<li *ngFor="let item of myList">
<div [ngClass]="item.messageText == item.messageText ? 'bordered': 'greyedOut'">
{{item.messageText}}
</div>
</li>
OR
<li *ngFor="let item of myList">
<div [ngClass]="{'bordered': item.messageText == item.messageText, 'greyedOut': item.messageText !== item.messageText }">
{{item.messageText}}
</div>
</li>
To complete Panjak Parkar's answer, and to answer to the question in the title (style)
<li *ngFor="let item of myList">
<div [ngStyle]="{'background-color':item.country === 'UK' ? 'green' : 'red'}">
</div>
</li>