CODEWITHSUNDEEP
javascriptangularionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2515

change background color of div using color picker

I have created a div, currently when I click it, its color changes from green to red. I want to add a button, click which a color picker appears and the color I select becomes its background.

Below is my current code of

home.html

        <div class="stileone">
            Div Content
        </div>

//I want code on this button click to select color from color picker and selected color shall become the div's background color
    <button ion-button (click)="select_color()">Select Color</button>

home.ts

ngOnInit(){
$(".stileone").on("click", function() {
        $(this).css("background", "red");
    }); 
}

home.scss

.stileone {
    background: green
}

Please note I am using js in above code and I am fine with it, I can use Ionic or JS, both are ok for me. For HTML manipulation I am using DOM sanitizer, so I can use JS or jQuery for the same.

Upvotes: 0

Views: 1331

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58543

I think all you need is :

Component Side :

color = 'transparent';

select_color(){
    this.color = this.getRandomColor();
}

Template Side :

<div class="stileone"  [ngStyle]="{'background-color': color}">
    Div Content
</div>

WORKING DEMO

Upvotes: 1

Related Questions