Angular Hide With Button

问题

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 im very confused why this wont work.

回答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.

回答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

来源：https://stackoverflow.com/questions/45549297/angular-hide-with-button

标签

html5

angular

typescript

show-hide