How to Show 1 element and hide multiple elements in Angular 7 - angular7

Question

I am trying to click a details about an element and I just want the details of that particular details to show and hide other element details.
“This is Angular 7. I’ve tried on using *ngIf and failed in it. I am using parent and child component communication technique.
Parent HTML
<h4>2 Days Bangalore Mysore</h4>
</div>
<div class="ft-foot">
<h4 class="ft-title text-upper"><a routerLink="/details"
(click)="detailsbm2d()" class="btn btn-primary">DETAILS</a></h4>
</div>
<h4>2 Days Kodaikanal</h4><br>
</div>
<div class="ft-foot">
<h4 class="ft-title text-upper"><a routerLink="/details"
(click)="detailskod2d()" class="btn btn-primary">DETAILS</a></h4>
</div>
<h4>2 Days Ooty</h4><br>
</div>
<div class="ft-foot">
<h4 class="ft-title text-upper"><a routerLink="/details"
(click)="detailsoo2d()" class="btn btn-primary">DETAILS</a></h4>
</div>
Parent component
show: boolean= true;
show1:any = true;
show2: boolean = true;
detailsbm2d() {
this.show = !this.show;
}
detailskod2d() {
this.show1 = !this.show1;
}
}
detailsoo2d() {
this.show2 = !this.show2;
}
ngOnInit() {
}
}
Child HTML
<div class="container">
<div class="row">
<section class="col-sm-6">
<h1 class="text-upper">TOUR PLAN</h1>
</section>
</div>
</div>
<div class="container" *ngIf="!show">
<div id="page" class="col-md-8">
<P> Element1 </p>
</div>
</div>
<div class="container" *ngIf="!show1">
<div id="page" class="col-md-8">
<P> Element2 </p>
</div>
</div>
<div class="main-contents" *ngIf="!show2">
<div id="page" class="col-md-8">
<P> Element3 </p>
</div>
</div>
Child component
export class {
#Input() show1: boolean;
#Input() show2: boolean;
#Input() public text: string;
constructor() { }
ngOnInit() {
}
}
I expect only the Element1 to be displayed when I click the DETAILS button, but I get all the Element1,Element2 and Element3 are getting displayed.

Answer 1

show: boolean= false ;
show1:any = false ;
show2: boolean = false ;
// making show; show1; show2 initially to false hides it. when you click the DETAILS
// button the click event shows it.
and convert all *ngIf = show // (i.e., remove "!" from all *ngIf's)

Answer 2

correction of #muzzu47's answer
Parent component
show: boolean= true; //Default True for initially show first content
show1:any = false ;
show2: boolean = false ;
detailsbm2d() {
this.show = !this.show;
this.show2 = false;
this.show1 = false;
}
detailskod2d() {
this.show = false;
this.show2 = false;
this.show1 = !this.show1;
}
detailsoo2d() {
this.show = false;
this.show1 = false;
this.show2 = !this.show2;
}
In function other element should be false because you want to display at a time single element
convert all *ngIf = show // (i.e., remove "!" from all *ngIf's)