Angular Hide With Button
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.
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