Angular Hide With Button

user_8250158 0
Viewed 94872

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.

show-hide angular typescript html
3 Answers

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;
}
user_10854830
Related