Angular Hide With Button

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.

you have a spelling mistake in the component: flase should be false. Could you include the template for the buttons that you wish to display/hide as well in your question — 0mpurdy
– 0mpurdy, Commented Aug 7, 2017 at 14:29
Ok, just checking :) It may also be worth trying to replicate the problem in a plunk here's a template. The best directive for hiding would probably be *ngIf - here's a tutorial — 0mpurdy
– 0mpurdy, Commented Aug 7, 2017 at 14:31

GxTruth · Accepted Answer · 2017-08-07 14:47:07Z

30

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.

edited Aug 7, 2017 at 14:47

answered Aug 7, 2017 at 14:41

GxTruth

5294 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RaptorJesus Over a year ago

Angular now references all versions of Angular above 2.0.0 and AngualrJS refers to all versions before that. so in fact im working with Angular 4 but its similar to 2 and uses the same name now.

RaptorJesus Over a year ago

this also works really well. is there a way to do a bring the element back?

GxTruth Over a year ago

Yes! *ngIf will not hide the element, if the condition evaluates true, so setting the variable isButtonVisible to true is sufficient. Just change the (click) event code to a toggle function like (click)="this.isButtonVisible = !this.isButtonVisible". However, you can set the variable wherever you want (this can be another button like a Reset-Button).

GxTruth Over a year ago

@RaptorJesus I just remembered that there is another important difference between *ngIf and [hidden]. While [hidden] sets the element to display: none thus making it invisible, using *ngIf removes the element from the DOM, resetting it's state when displayed again. For instance, if you hide a scrollable list of messages using *ngIf and its condition becomes true later, you end up at the start again, as if you loaded it for the first time. [hidden] avoids this afaik, as it just hides the element, but it's "still there".

Mozgor Over a year ago

There is a huge difference between hidden and *ngIf. Former is the way to go if target's visibility will be toggled a lot, latter otherwise. While in this case *ngIf* could be the best practise, I feel the accepted answer should at least mention hidden property as it's what title contains and therefore a keyword leading other readers here.

FAISAL · Accepted Answer · 2017-08-07 14:59:39Z

13

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

edited Aug 7, 2017 at 14:59

answered Aug 7, 2017 at 14:34

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

5 Comments

RaptorJesus Over a year ago

this worked perfectly. i didn't realize that you had to use [hidden] and (click) at the same time. lastly could you flip it around with a different variable in the component to show it again if a different button was clicked?

FAISAL Over a year ago

check this plunker link I created: plnkr.co/edit/BGIQZV7V69pYUPuO2sFV?p=preview

FAISAL Over a year ago

@RaptorJesus why downvoted? The solution works as per your requirements. Strange :/

RaptorJesus Over a year ago

sorry mate, your answer does work, but after more research *ngif is the preferred method. [hidden] is generally considered to be avoided if possible. and after more work i do need to remove the object from the DOM, which is what *Ngif does. ill put the vote back up because it did work.

FAISAL Over a year ago

thanks, my answer was based on your question description, thats why I used [hidden]

Rui Marques · Accepted Answer · 2021-03-24 12:27:59Z

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

Guest · Accepted Answer · 2025-04-17 11:34:56Z

0

In Angular 17 and above you can use @if

@if (something) {
  <a>content</a>
}

answered Apr 17 at 11:34

Guest

1

Collectives™ on Stack Overflow

Angular Hide With Button

4 Answers 4

5 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related