Change another div's background color on click of div with angular2

Question

I have a component on the page which has following divs

<div style=" width:400; height:400; float:left">
 <div style="background-color:red; width:50%; height:50%; float:left">
 </div>
 <div style="background-color:blue; width:50%; height:50%; float:right">
 </div>
 <div style="background-color:green; width:50%; height:50%; float:left">
 </div>
 <div style="background-color:orange; width:50%; height:50%; float:right">
 </div>
 </div>

I have another div on the same page as

<div class="eventBox eventBox__colorBar"></div>

When i click on any of the div above, i want to get the selected color and apply as a background-color for the 2nd div.

How to do with angular2?

Aravind · Accepted Answer · 2017-02-24 02:44:44Z

2

You can use the below code

<div>      
    <div style="background-color:red; width:50%; height:50%;" (click)="readColor($event)"> XYZ</div>
    <div style="background-color:blue; width:50%; height:50%; float:right" (click)="readColor($event)">blue</div>
    <div style="background-color:green; width:50%; height:50%; float:left" (click)="readColor($event)">green</div>
    <div style="background-color:orange; width:50%; height:50%; float:right" (click)="readColor($event)">black</div></div></div>

    <div  [style.background-color]="color">some text here</div>
</div>

Typescript method

 readColor(value){
    this.color=value.srcElement.style['background-color'];
    console.log(value.srcElement.style['background-color']);
  }

LIVE DEMO

answered Feb 24, 2017 at 2:44

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

1 Comment

Aravind Over a year ago

@Sajeetharan welcome. bro. happy to help you guru jee. :)

Collectives™ on Stack Overflow

Change another div's background color on click of div with angular2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related