-1
votes

La couleur du bouton radio angulaire Ngbootstrap ne change pas de manière dynamique

J'essaie de changer la couleur du bouton sur le bouton enfoncé ou sur l'événement. Même la couleur de fond de couleur de la bordure sera également. Mais cet extrait de code n'applique pas les couleurs requises. Il semble que la méthode soit appelée mais que les couleurs ne s'appliquent pas.

boutons-radioréactive.html xxx

boutons-radioréactive.ts xxx

boutons-radioréactive.css xxx

angular css ng-bootstrap

0 commentaires

3 Réponses :

0
votes

Veuillez vérifier Ceci

dans votre HTML, vous appelez l'appel ( ) PROCÉDÉ DU BOUTON DE LA RADIO 'MOYEN' 'SEULEMENT ... D'où l'effet que vous vouliez s'appliquer uniquement à celui-ci. P>

import {  Component,  OnInit,  Renderer2 ,ElementRef} from '@angular/core';
import {  FormBuilder,  FormGroup} from '@angular/forms';
import {  ViewChild} from '@angular/core/';

@Component({
  selector: 'ngbd-buttons-radioreactive',
  templateUrl: './buttons-radioreactive.html',
  styles: [`
          .pressed {
  border-color: #ff9800;
  color: orange;
}

.un-pressed {
  border-color: #ffffff;
  color: white;
}
`]
})
export class NgbdButtonsRadioreactive implements OnInit {
  @ViewChild('value1') el: ElementRef;

  public radioGroupForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private renderer: Renderer2) {}

  ngOnInit() {
    this.radioGroupForm = this.formBuilder.group({
      'model': 1
    });
  }

  call() {
    this.renderer.addClass(this.el.nativeElement, 'pressed');
  }
}

4 commentaires

J'ai cliqué sur le bouton central seulement. Sa ne s'applique pas là-bas

@Aniket: Que se passe-t-il lorsque vous cliquez sur le bouton radio moyen dans le lien I Collé ci-dessus ... Stackblitz. com / edit / angulaire-pgb1rl ??

@Akberiqbal, je pense qu'il veut faire une classe personnalisée aux boutons

Merci mais le problème était réellement lié à NG-Bootstrap. Encore, merci beaucoup

0
votes

Essayez d'utiliser ngclass:

en composant: xxx

dans html: xxx

CSS: < / p> xxx

démo < / p>

1 commentaires

Désolé pour la réponse tardive.Merci beaucoup

0
votes

Vous pouvez attribuer une classe personnalisée à vos boutons, voir Stackblitz

styles:[`
    .btn-custom.focus
    {
      outline:none!important;
      box-shadow:0 0 0 0
    }
    .btn-custom{
      background-color:orange;
      color:white;

    }
    .btn-custom.active{
      background-color:red;
      color:white;
      border-color:firebrick;
    }
  `
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
  <label ngbButtonLabel class="btn-custom">
    <input ngbButton type="radio" [value]="1"> Left (pre-checked)
  </label>
  <label ngbButtonLabel class="btn-custom">
    <input ngbButton type="radio" value="middle"> Middle
  </label>
  <label ngbButtonLabel class="btn-custom">
    <input ngbButton type="radio" [value]="false"> Right
  </label>
</div>
<hr>
<pre>{{model}}</pre>

0 commentaires