wuno wuno - 27 days ago 14
Javascript Question

Angular 2 Toggle Views On Click

I have a bootstrap card which has three different content views inside it. I am controlling the view of each of the separate data sets onclick of a link for each one. The problem is when I click a link it does not hide the previous one. I am having trouble getting the function right with typescript.

in my component.ts file

public showEquifax:boolean = true;
public showExperian:boolean = false;
public showTransunion:boolean = false;


Then in my html file

<div class="btn-group" role="group" aria-label="Credit Report Navigation">
<button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary">Equifax Report </button>
<button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary">Experian Report </button>
<button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary">Transunion Report </button>
</div>


Based on this logic how can I change the
boolean
value of the functions to
false
when the link clicked value gets changed to
true


I tried to do something like this,

public showEquifax() {
showExperian() = false;
showTransunion() = false;
return true;
}


But I get an error for left-hand side assignment expression.

How can I write each of these boolean functions to change the others to false when the current function is set to true?

Answer

What you want is: when one is shown, the other two are hidden, right? What about change your logic to something like this:

// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';

Then, the buttons would act like this:

<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...

Then you could show your components like this:

<div *ngIf="shown === 'EQUIFAX'">
    content here
</div>

<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>
Comments