Блог

Этот код позволяет пользователю выбрать цвет и сохранить свой выбор конфигурации. Моя цель — сделать видимыми только круглые кнопки и скрыть переключатели (я пытался их стилизовать, но, как я читал, это невозможно), есть ли какой-нибудь способ использовать ngModel с группой кнопок вместо кнопок radiobuttons? Мой другой вопрос: можно ли сделать кнопку «активной» на основе переменного состояния? Заранее спасибо

 this.colorOptions = ['#0068d8', '#51cbce', '#ffd000', '#d80041', '#d84400', '#179906', '#026366'];
  

 setColor(event){
   console.log(event.target)
   this.userDetails.settings.colorButtons = event.target.value;
      
}
  

 .color-picker{
    width: 30px;
    height: 30px;
    margin: 6px;
    border-radius: 25px;
    outline: none;
    color: transparent;
}

.color-picker:focus,
.color-picker:active{
    box-shadow: 0 0 0 2pt black;
}

#color1{
    background-color: #0068d8;   
}

#color2{
    background-color: #51cbce;
}

#color3{
    background-color: #ffd000;
}

#color4{
    background-color: #d80041;
}

#color5{
    background-color: #d84400;
}

#color6{
    background-color: #179906;
}
#color7{
    background-color: #026366;
}
  

  <div class="form-group">
            <input type="button" class="color-picker" id="color1" value="#0068d8" (click)="setColor($event)" required>
            <input type="button" class="color-picker" id="color2" value="#51cbce" (click)="setColor($event)" required>
            <input type="button" class="color-picker" id="color3" value="#ffd000" (click)="setColor($event)" required>
            <input type="button" class="color-picker" id="color4" value="#d80041" (click)="setColor($event)" required>
            <input type="button" class="color-picker" id="color5" value="#d84400" (click)="setColor($event)" required>
            <input type="button" class="color-picker" id="color6" value="#179906" (click)="setColor($event)" required>
            <input type="button" class="color-picker" id="color7" value="#026366" (click)="setColor($event)" required>
          </div>

          <div class="custom-control custom-radio" *ngFor="let option of colorOptions">
            <input id="{{option}}" type="radio" class="custom-control-input" [value]="option" name="colorButtons" #colorButtons="ngModel" [(ngModel)]="userDetails.settings.colorButtons" ngModel (change)="setColor($event)" >
            <label class="custom-control-label" for="{{option}}">{{option}}</label>
          </div>