CODEWITHSUNDEEP
javascriptangulartypescript
Paul sk
Paul sk

Reputation: 293

Add border and background color when I click the yes button

I am developing a kind of text boxes for comments. When I click on the YES button I would like the box where the click came from, to have some kind of borders and a background color in order to signal that the click came from that box.

Can someone help me?

BLITZ

code

<div class="Submitcomments" *ngFor="let c of data; let  i = index;">
    <div>
        <div class="row rowComments" style="margin-top: 11px;">
        </div>
        <div class="form-group">
            <textarea  #myinput type="text" class="form-control AreaText" rows="2"></textarea>
        </div>
        <div class="row" style="margin-top: -20px; margin-left: 5px;">
            <button *ngIf="c.currentState=='pause'" class="btn reply" (click)="adjustState(i)">Yes</button>
            <button *ngIf="c.currentState=='start'" class="btn reply1" (click)="adjustState(i)">No</button>
        </div>
    </div>
</div>

Upvotes: 1

Views: 3537

Answers (3)

DarticCode
DarticCode

Reputation: 62

try this also don't forget to upvote me if this is what you need becuse this takes time for me to do and i dont have time wasting to do this alot but if this isnt working at all you dont have to upvote me im just saying if it works remember to upvote me

window.onload = function() {
//onclick event

    document.getElementById("yes").onclick = function fun() {
 

       var element = document.getElementById("yes");
  element.classList.add("yeep");
            element.classList.remove("unk");


    }
}
.yeep{
background-color:green ;
border-color:limegreen ;
border-width:5px;
color:white;
}
.unk{

background-color:darkgray;
border-color:gray;
border-width:5px;
color:white;
}
<button class='unk' id = 'yes'>yes!</button>

Upvotes: 0

JossFD
JossFD

Reputation: 2216

Try to use the [ngStyle] binding in your html.

Something like this: 

<textarea #myinput type="text" class="form-control AreaText" rows="2"
  [ngStyle]="{
    'background-color': c.currentState=='start' ? '#daf4d5' : 'initial', 
    'border': c.currentState=='start' ? '1px solid green' : ''
  }">
</textarea>

There are shorter ways to write the ngStyle but this one allows you to choose a style for box elements that aren't clicked too. Also, you might want to move the ngStyle value in your component as a string, and use that instead (to make the html more readable).

Upvotes: 3

Josh
Josh

Reputation: 1474

You can use use AfterViewInit to wait until the component has loaded. Then just update each textarea styles everytime the child btn is clicked inside of each element .Submitcomments.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';   

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    let submitComments = document.querySelectorAll('.Submitcomments');
    [].slice.call(submitComments).forEach((submitComment, index) => {
        submitComment.querySelector('.btn').addEventListener('click', (event) => {
            submitComment.querySelector('textarea').style.border = '1px solid red';
        });
    });
  }

https://stackblitz.com/edit/angular-qe9hac?file=src/app/app.component.ts

NOTE: I'm not an angular 2 developer, so I'm sure there is a more "angular" type of way to do this. But this works for now.

Upvotes: 1

Related Questions