0
votes

Ajouter une bordure et une couleur d'arrière-plan lorsque je clique sur le bouton Oui

Je développe une sorte de zone de texte pour commentaires. Lorsque je clique sur le bouton Oui, je voudrais la boîte où le clic est venu de, pour avoir une sorte de bordure et une couleur d'arrière-plan afin de signaler que le clic est venu de cette boîte.

Quelqu'un peut-il m'aider?

blitz

code xxx


0 commentaires

3 Réponses :


1
votes

Vous pouvez utiliser Utiliser aprèsViewInit code> pour attendre que le composant soit chargé. Ensuite, il suffit de mettre à jour chaque textarea code> à chaque fois que l'enfant BTN code> est cliqué à l'intérieur de chaque élément .SubmitComments code>.

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';
        });
    });
  }


4 commentaires

Je ne recommanderais pas d'utiliser QuerySelector sauf si nécessaire. Angular offre de nombreuses façons de gérer les éléments DOM et QuerySelector devrait être plus proche d'un dernier complexe OMI.


Merci beaucoup pour l'aide ! Lorsque nous cliquons sur le bouton, cela passe de YES à NO et les frontières changent de couleur. C'est génial, mais existe-t-il un moyen de retourner l'état oui aux bords disparaître, c'est-à-dire que je veux retourner à l'état initial?


@Jojofoulk L'une des voies que j'ai pensées à utiliser était avec JQuery, mais j'ai vu que ce n'est pas la meilleure solution. Par conséquent, je n'ai aucune idée de la façon dont je vais l'appliquer correctement :(


@Jojofoulk comme je l'ai dit, je suis sûr qu'il y a une manière plus angulaire de faire des choses.



1
votes

Essayez d'utiliser le [ngstyle] reliure dans votre HTML.

quelque chose comme ceci: xxx

Il y a des moyens plus courts d'écrire ngstyle mais celui-ci vous permet de choisir un style pour la boîte Les éléments qui ne sont pas cliqués aussi. En outre, vous voudrez peut-être déplacer la valeur ngstyle dans votre composant en tant que chaîne et utilisez-la à la place (pour rendre le HTML plus lisible).


0 commentaires

0
votes

essayez également d'oublier de vous upvote si c'est ce dont vous avez besoin parce que cela prend du temps pour que je fasse du temps et que je n'ai pas le temps de gaspiller de cela beaucoup, mais que si cela ne fonctionne pas du tout, vous n'avez pas à me faire uppoter Je ne fais que dire que si cela fonctionne, rappelez-moi de uploter moi

​​ p>

<button class='unk' id = 'yes'>yes!</button>


0 commentaires