I want to toggle menu in Angular 6

Question

I want to toggle the the side navigation bar for that I am -

1. Taken a boolen value toggle_menu to true
2. and I am calling a function togg() on button click in the menu bar which sets the boolean value false anf hence div is toggled

But problem is there are 4 button, each button has it's own div container each button is calling function on click togg()

which result all the div is opening at the same time.

But I want to open each div for each button click

ts code :

import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent{
   toggle_menu: boolean = true;
    constructor() { }
    togg() {
      return this.toggle_menu = !this.toggle_menu;
      }
  }

html code :

<button class="dropdown-btn" (click)="togg();"> Besics</button>
        <div *ngIf="!toggle_menu">
        <a routerLink="/imp-style"> Implimenting Style  </a>
        </div>

<button class="dropdown-btn" (click)="togg();">Image</button>
        <div *ngIf="!toggle_menu">

        <a routerLink="/slider"> Image Slider</a>
        </div>
<button class="dropdown-btn" (click)="togg();">Forms</button>
        <div *ngIf="!toggle_menu">
        <a routerLink="/signup"> Signup </a>
        <a routerLink="/signup"> Login </a>
        <a routerLink="/signup"> Register </a>
        </div>
<button class="dropdown-btn" (click)="togg();">Service</button>
        <div *ngIf="!toggle_menu">
        <a routerLink="/dipika-task"> Data Display </a>
        <a routerLink="/social-media"> Social Media </a>
        <a routerLink="/student"> Student </a>
        </div>

Answer 1

export class AppComponent{
   dropdowns = {
    "besics": false,
    "images": false,
    "forms": false, 
    "service": false,
   }

    constructor() { }
    togg(string name) {
      dropwdowns[name] = !dropwdowns[name];
  }

And in your html use *ngIf

<button class="dropdown-btn" (click)="togg('besics');"> Besics</button>
        <div *ngIf="dropdowns['besics']">
        <a routerLink="/imp-style"> Implimenting Style  </a>
        </div>

<button class="dropdown-btn" (click)="togg('image');">Image</button>
        <div *ngIf="dropdowns['image']">
        <a routerLink="/slider"> Image Slider</a>
        </div>
<button class="dropdown-btn" (click)="togg('forms');">Forms</button>
        <div *ngIf="dropdowns['forms']">
        <a routerLink="/signup"> Signup </a>
             ....
        </div>
<button class="dropdown-btn" (click)="togg('service');">Service</button>
        <div *ngIf="dropdowns['service']">
        <a routerLink="/dipika-task"> Data Display </a>
             ....
</div>