CODEWITHSUNDEEP
cssangularsidenav
NoobCoder
NoobCoder

Reputation: 503

How to toggle sidenav component from header component using a button

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 ?

Upvotes: 0

Views: 1093

Answers (1)

Emilien
Emilien

Reputation: 2759

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 ?

Upvotes: 1

Related Questions