Angular 2. Change class ONLY of focused element

Question

I have few buttons and div elements. divs are hidden. I want to reveal the specific div, when the specific button is clicked.

For example: You click first button - only first div appears (appears by changing his class).

Code: app.component.html

<button class="BUTTON" (click)="isHidden = !isHidden">
</button>
<div class="ELEMENTTOSHOW" [ngClass]="{ 'subMenuShow':isHidden }">first
</div>

<button class="BUTTON" (click)="isHidden = !isHidden">
</button>
<div class="ELEMENTTOSHOW" [ngClass]="{ 'subMenuShow':isHidden }">second
</div>

app.component.ts

export class AppComponent {
  isHidden = false;
}

This solution is wrong because when I click e.g. first BUTTON then both divs ELEMENTTOSHOW appear. It shouldnt work like that, it should only work on a specific div.

Any help appreciated.

Edit: here is my code preview on plunker:

https://plnkr.co/edit/BQKanrtuoADClGLVSdBC?p=preview

Its not my whole app, only the mentioned, VERY simplified part.

I have added AngularJS tag, because you can give me a solution related with angular1 and I will just rewrite it into angular2.

Could you provide a Plunker with the current state of your application? In the code snippets presented above there aren't any actual buttons, only <span> elements with a "button" class. — Tudor Ciotlos
– Tudor Ciotlos, Commented Nov 20, 2016 at 20:08

Bhetzie · Accepted Answer · 2016-11-20 21:50:56Z

1

I'd restructure it like this:

HTML

<button class="BUTTON" (click)="isHiddenfirst = !isHiddenfirst">
</button>
<div *ngIf="isHiddenfirst" class="ELEMENTTOSHOW subMenuShow">
    first
</div>

<button class="BUTTON" (click)="isHiddensecond = !isHiddensecond">
</button>
<div *ngIf="isHiddensecond" class="ELEMENTTOSHOW subMenuShow">
    second
</div>

TS

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html',
  styleUrls: ['src/hello_world.css']
})
export class HelloWorld {

isHiddenfirst = false;
ishiddensecond = false;
}

https://plnkr.co/edit/BOLCoRY0SmLe8GZT3PUG?p=preview

answered Nov 20, 2016 at 21:50

Bhetzie

2,94010 gold badges34 silver badges44 bronze badges

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

3 Comments

J. Doe Over a year ago

Thanks, but it's not really dynamic. Upvote my question because I need 15 rep points to upvote your answer :P

J. Doe Over a year ago

I still need 4 rep to upvote, when I get it I will upvote u. If nobody else answers I will check it as the best answer.

Bhetzie Over a year ago

I created another solution so that it's more dynamic: plnkr.co/edit/dDIwSH6BFwIR0ZI10vlO?p=preview I think your issue is that they are both appearing when isHidden is true because they're both set to show when it's true and hide when it's false

Collectives™ on Stack Overflow

Angular 2. Change class ONLY of focused element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related