CODEWITHSUNDEEP
angular
Tshepo Mboweni
Tshepo Mboweni

Reputation: 37

How to hide div when specific menu item is clicked - Angular 6 +

How can I show a div when an item is clicked in angular?

Div show fine when I click list item, but dsn't disappear when I navigate to other menu items.

html

<li>
  <a class="nav-link slots" (click)="showme = true" >Slots</a>
</li>
<div ng-hide="showme">
  <div class="ribbon" *ngIf="game.categories[0]">
    <span>TOP</span>
  </div>

  <div class="ribbon" *ngIf="game.categories[2]">
    <span>NEW</span>
  </div>
</div>

component.ts

showme: boolean = false;

Upvotes: 0

Views: 302

Answers (4)

Tshepo Mboweni
Tshepo Mboweni

Reputation: 37

managed to get it right by adding showme = false to other list items Thanks.

Upvotes: 0

German Cosano
German Cosano

Reputation: 107

taking for granted that

showme : boolean = false;

is declared in a .ts file,

it is a known issue, using ngIf instead of ng-hide it will works, also using 

[ngClass]="{'ng-hide': expression}"

Upvotes: 0

Kishin Karra
Kishin Karra

Reputation: 140

Not quite able to understand the problem here. ng-hide is angularjs method of showiing things. Try ngIf?

For reference: https://angular.io/api/common/NgIf

Upvotes: 2

Kurt Hamilton
Kurt Hamilton

Reputation: 13515

Try using a <button (click)> instead of an <a (click)>.

Can you provide a stackblitz to demonstrate the problem?

And as Kishin says,

<div *ngIf="showMe">
</div>

Upvotes: 1

Related Questions