Hello I am using angular 8 and I want to toggle sidenav component on mobile view. So on mobile media query I am using this CSS to hide the sidenav
@media screen and (max-width: 600px)
.sidenav {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
So on mobile view I have a hamburger icon on header component . So on clicking how can I toggle sidenav component ?
Header HTML:-
<div class="header">
<fa-icon class="hamburger" [icon]="faBars"></fa-icon>
<div class="logo-section">
<img class="logo" [routerLink]="['/dashboard']" src="../../../assets/images/abc.png"/>
</div>
</div>
Header Component:-
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
searchText: string;
faBars = faBars;
constructor(private route: Router) { }
ngOnInit() {
}
}
Sidennav HTML :-
<div class="sidenav">
<div class="logo">
<!--
<img src="../../../assets/images/logo.png" alt="SKS" /> -->
</div>
<div class="sidenavbar">
<div class="menu" appMenuactive [routerLink]="['/dashboard']" [routerLinkActive]="['selected']">
<p class="menuicons">
<fa-icon [icon]="faTh"></fa-icon>
</p><span>
Dashboard
</span>
</div>
<div class="menu" appMenuactive [routerLink]="['/data']" [routerLinkActive]="['dataselect']">
<p class="menuicons">
<fa-icon [icon]="faTachometerAlt"></fa-icon>
</p><span>
Info
</span>
</div>
<div class="menu" appMenuactive [routerLink]="['/storage']" [routerLinkActive]="['dataselect']">
<p class="menuicons">
<fa-icon [icon]="faStar"></fa-icon>
</p><span>
Storage
</span>
</div>
</div>
</div>
Sidenav Component :-
@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {
faTachometerAlt = faTachometerAlt;
faTh = faTh;
faStar = faStar;
constructor() { }
activatemenu = false;
ngOnInit() {
}
}
How can I make navbar visible on clicking of header fa-icon in mobile view ?
I will post it as an answer but normally, you have all you need on this link (Thanks @Roman Šimík).
Make a service like :
export class HeaderService {
isDisplayed = false;
private showSideNavSubject = new Subject<boolean>();
constructor() {}
toggle(): void {
this.isDisplayed = !this.isDisplayed;
this.showSideNavSubject.next(this.isDisplayed);
}
get(): Observable<boolean> {
return this.showSideNavSubject.asObservable();
}
}
Header
<fa-icon class="hamburger" [icon]="faBars" (click)="toggle()"></fa-icon>
constructor(private headerService: HeaderService) {}
toggle() {
this.headerService.toggle();
}
Sidenav
<p>Show sidenav : {{ showSideNav }}</p>
showSideNav = false;
subscription: Subscription;
constructor(private headerService: HeaderService) {}
ngOnInit() {
this.subscription = this.headerService.get().subscribe(sideNav => this.showSideNav = sideNav);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
I implement it on a Stackblitz but without a router. It's working. Is this what you need ?