toggle - How to show hamburger menu only on mobile-Angular?

Question

I have a regular navbar on larger screens. I want to have a hamburger menu only on mobile devices and the menu icon only to be shown on mobile. I want to achieve that with Angular(I am beginner). How do I do that , don't want to use Angular material. Here is my code.

<div class="b-navbar">
    <div class="b-navbar__toggle">
      <button (click)="onToggle()" class="b-navbar__button">
        <fa-icon [icon]="hamburgerBars" class="b-navbar__icon"></fa-icon>
      </button>
    </div>
    <ul class="b-navbar__nav" *ngIf="showToggle">
      <li class="b-navbar__nav">
        <a routerLink="/home" class="b-navbar__link">Home</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Services</a>
      </li>
      <li class="b-navbar__nav">
        <a routerLink="/about" class="b-navbar__link">About</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Reviews</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Locations</a>
      </li>
      <li class="b-navbar__nav">
        <a routerLink="/contact" class="b-navbar__link">Contacts</a>
      </li>
    </ul>
  </div>

Angular Code`

hamburgerBars = faBars;
onToggle() {
    this.showToggle = !this.showToggle;
}





    

question from:https://stackoverflow.com/questions/65862683/how-to-show-hamburger-menu-only-on-mobile-angular

Answer 1

If you want to display something in small screens only, you can use media queries in CSS.

.hamburger {
  display: block;
}

@media (max-width: 600px) {
  .hamburger {
    display: none;
  }
}

Here is the final solution in Stackbiltz