Angular Hide With Button - html

Question

So I'm working with Angular and I'm trying to make a button that when clicked disappears. I have tried to use [hidden], (click)="showHide = !showHide", and a bunch of other methods. Nothing is working so far.
My html (currently):
<div class="rows">
<div class="a-bunch-of-styles-for-my-button">
<a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
</a>
</div>
</div>
and my component:
export class AppComponent {
inboundClick = false;
}
In essence I have 2 buttons on a page and when one button is clicked I want to hide both buttons and display a set of new buttons.
I'm very new to Angular and I'm very confused why this won't work.

Answer 1

Your HTML
<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>
Your TypeScript
export class AppComponent {
private isButtonVisible = true;
}
This should do the job. *ngIf automatically hides the element, if the condition evaluates false, so setting the variable to false is sufficient.
The problem I see here is, that you don't control the visibility at any point. Using [ngClass] to add a specific class, if a condition is met, or *ngIf is helpful, whenever you try to change elements on user interaction.
For more information on [ngClass], you can read about its usage here: https://angular.io/api/common/NgClass
You can read about *ngIf here: https://angular.io/api/common/NgIf
Especially the "Common Use" part should be interesting for you.
Edit:
Reading your comment below it seems you did not notice what [hidden] and (click) actually do. [hidden] controls the visibility of the element, usually dependent on a certain condition. (click) however is a quick way to bind a Click-Event to your element.
Using both of those tools enables to hide an element, by changing a variable, if a user clicks on your element (the new value of the variable may be assigned by a function called by (click) or inline, as demonstrated in the example code).
Edit2: Yep, you meant Angular2/4 ;) So this should do the job.

Answer 2

Here is how you can achieve that:
In your component.html:
<a type="button" class="more-styles"
[hidden]="!inboundClick"
(click)="inboundClick = !inboundClick"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" class="more-styles"
[hidden]="!outboundClick "
(click)="outboundClick = !outboundClick "
[routerLink]="['/outbound']" href="">
</a>
... and in your AppComponent:
export class AppComponent {
inboundClick = true;
outboundClick = true;
}
PLUNKER DEMO

Answer 3

Here is a neat way to hide/remove items, specially handy if there is a list of items.
Note how it takes advantage of Angular's template variables (#ListItem).
So your template can either be something like:
<a type="button" #ButtonA
(click)="onClick(ButtonA)"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" #ButtonB
(click)="onClick(ButtonB)"
[routerLink]="['/outbound']" href="">
</a>
Or like this:
<ng-container *ngFor="let item of list">
<div #ListItem>
<button (click)="onClick(ListItem)">
</div>
</ng-container>
Depending on how you want to hide - if you want to remove it from DOM, or just hide it with CSS. And depending if you want to toggle it or just remove it completely. There are a few options:
Remove element from DOM (no way to get it back):
close(e: HTMLElement) {
e.remove();
}
Hiding it with the hidden attribute - beware that the hidden attribute can be overriden by CSS, it will happen if you are changing the display property and the rule has more precedence:
close(e: HTMLElement) {
e.toggleAttribute('hidden');
}
Hiding it "manually" with CSS:
close(e: HTMLElement) {
e.classList.toggle('hide-element');
}
.hide-element {
display: none;
}