How do I get an interaction between 2 buttons (Angular)? - html

Question

I have two buttons that when activated
show the content of "shouldTrianglePropertyBeShown" or "shouldShapeBeShown". When I click a button, the color of the respective button also changes. Unfortunately, it is currently so that if one button is activated and I also activate the other button that both contents are displayed to me. Of course I would prefer if one is activated then the other should be deactivated.
I have tried several things but unfortunately I have not managed to create an interaction between the two buttons.
Does anyone have a tip for me how to disable another button and its content ?
Here is my code:
MY PAGE.TS
selectTriangleProperty(shownPropertiesNumber: number) {
this.arePropertiesOfTriangleVisible[shownPropertiesNumber] = !this.arePropertiesOfTriangleVisible[shownPropertiesNumber];
this.getStatusOfButtonDetailsActivation(shownPropertiesNumber);
}
shouldTrianglePropertyBeShown(shownPropertiesNumber: number) {
this.getStatusOfButtonDetailsActivation(shownPropertiesNumber);
return this.arePropertiesOfTriangleVisible[shownPropertiesNumber];
}
selectShapeInformation(shownShapeNumber: number) {
this.areShapeInformationVisible[shownShapeNumber] = !this.areShapeInformationVisible[shownShapeNumber];
this.getStatusOfButtonShapeActivation(shownShapeNumber);
}
shouldShapeBeShown(shownShapeNumber: number) {
this.getStatusOfButtonShapeActivation(shownShapeNumber);
return this.areShapeInformationVisible[shownShapeNumber];
}
getStatusOfButtonDetailsActivation(shownPropertiesNumber: number)
{
const propertyButtonActivated = document.getElementById('structure-properties-button');
const informationButtonActivated = document.getElementById('shape-information-button');
if(this.arePropertiesOfTriangleVisible[shownPropertiesNumber])
{
propertyButtonActivated.style.backgroundColor = '#9AD2C9';
}
else if(!this.arePropertiesOfTriangleVisible[shownPropertiesNumber])
{
propertyButtonActivated.style.backgroundColor = '#FFFFFF';
}
}
getStatusOfButtonShapeActivation(shownShapeNumber: number)
{
const informationButtonActivated = document.getElementById('shape-information-button');
if(this.areShapeInformationVisible[shownShapeNumber])
{
informationButtonActivated.style.backgroundColor = '#9AD2C9';}
else if(!this.areShapeInformationVisible[shownShapeNumber])
{
informationButtonActivated.style.backgroundColor = '#FFFFFF';
}
}
MY HTML
<ion-buttons>
<ion-button id="triangle-properties-button" class="table-button-green"
(click)="selectTriangleProperty(j)">
Details
</ion-button>
</ion-buttons>
<ion-buttons>
<ion-button id="shape-information-button" class="table-button-white" (click)="selectBridgeInformation(j)">
Brückeninformationen
</ion-button>
</ion-buttons>
<ion-row *ngIf="shouldTrianglePropertyBeShown(j)" size="12" class="content-subrow" id="triangle-properties" >
<ion-col size="4" *ngFor="let property of triangle.triangleProperties" style="margin-top: 8px; background-color:#f9efef; ">
<div class="detailView__label">{{property.propertyName}}</div>
<div class="detailView__text"> {{property.propertyValue}}</div>
</ion-col>
</ion-row>
<ion-row *ngIf="shouldShapeBeShown(j)" size="12" class="content-subrow" id="triangle-properties" >
<ion-row>

Answer 1

Does this work for you:
HTML:
<ion-buttons>
<ion-button
[disabled]="activateShape"
id="triangle-properties-button"
class="table-button-green"
(click)="selectTriangleProperty(j); activateShape=!activateShape;activateTriangle= false;">
Details
</ion-button>
</ion-buttons>
<ion-buttons>
<ion-button
[disabled]="activateTriangle"
id="shape-information-button"
class="table-button-white"
(click)="selectBridgeInformation(j); activateTriangle=!activateTriangle; activateShape=false;">
Brückeninformationen
</ion-button>
</ion-buttons>
TS (as attributes of your Class):
activateShape = false;
activateTriangle = false;
NOTE: If that works fine, you can move all the logic of the "clicks" to functions in the ts.