Angular 8 hide divs and show div on button click

Question

I am new to angular and having an issue with hide and show content. I have 3 buttons, button A, button B and button c. When i click on button A, the content of the button A ie div A should be visible,the content of button B ie div B and button C ie div C should hide like that.

But i can display the respective divs when clicked on the respective buttons, but i am not able to hid the other two divs.

Can any one help me out.

Thanks in advance.

Please find below the code which i am trying out.

previousWeekData(){
  console.log("Previous Button Clicked");
  this.isShow = !this.isShow; 
}
nextWeekData(){
  console.log("Next Button Clicked");
  this.isShow = !this.isShow;   
}
todaysWeekData(){
  console.log("Todays Button Clicked");
  this.isShow = !this.isShow;
}

<div class="container">
 <div class="row">
                <div class="col-md-4">
                    <div class="btn-group">
                        <div class="btn btn-dark"  [(viewDate)]="viewDate" (click)="previousWeekData()">
                            Previous
                        </div>
                        <div class="btn btn-outline-secondary" (click)="todaysWeekData()">
                            Today
                        </div>
                        <div class="btn btn-dark"  [(viewDate)]="viewDate" (click)="nextWeekData()">
                            Next
                        </div>
                    </div>
                </div>
	</div>
	<div class="row">
	<div *ngIf = "isShow">Previous week datay.</div>
            <div *ngIf = "!isShow">Next week data.</div>
            <div *ngIf = "isShow">Current week data</div>
	</div>
</div>

Answer 1

<div *ngIf="div1">
    ABC
</div>
<div>
    DEF
</div>
<div>
    GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>

TS FILE

    div1:boolean=true;
    div2:boolean=true;
    div3:boolean=true;

    div1Function(){
        this.div1=true;
        this.div2=false;
        this.div3=false
    }

    div2Function(){
        this.div2=true;
        this.div1=false;
        this.div3=false
    }

    div3Function(){
        this.div3=true;
        this.div2=false;
        this.div1=false
    }

Answer 2

Try like this:

Working Demo

Template:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="btn-group">
                <div class="btn btn-dark"
                    (click)="showDiv.previous = !showDiv.previous;showDiv.current = false;showDiv.next = false">
                    Previous
                </div>
                <div class="btn btn-outline-secondary"
                    (click)="showDiv.current = !showDiv.current;showDiv.previous = false;showDiv.next = false">
                    Today
                </div>
                <div class="btn btn-dark" (click)="showDiv.next = !showDiv.next;showDiv.previous = false;showDiv.current = false">
                    Next
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div *ngIf="showDiv.previous">Previous week datay.</div>
        <div *ngIf="showDiv.next">Next week data.</div>
        <div *ngIf="showDiv.current">Current week data</div>
    </div>
</div>

TS:

showDiv = {
  previous : false,
  current : false,
  next : false
}