각각 특정 색상을 배경으로 적용하는 4개의 라디오 버튼을 추가하여 이전 샘플을 향상해 보겠습니다. div 요소의 backgroundColor 속성을 구성 요소의 selectedColor 속성에 바인딩합니다. selectedColor도 NgModel 지시어를 통해 양방향 바인딩 관계에 참여하므로 사용자가 다른 라디오 버튼(색상)을 선택할 때마다 해당 값이 업데이트됩니다.
<!--radiogroup.component.html--><igx-radio *ngFor="let color of colors"name="color" [value]="color.hex" [(ngModel)]="selectedColor">
{{color.name}}
</igx-radio><div [style.background-color]="selectedColor">...</div>html
양방향 데이터 바인딩에서 NgModel 지시문을 사용하지 않는 경우 FormsModule 가져와 NgModule의 가져오기 목록에 추가해야 합니다.
@for (color of colors; track color) {
<igx-radioname="color" [value]="color.hex" [(ngModel)]="selectedColor">
{{color.name}}
</igx-radio>
}
<divclass="box" [style.background-color]="selectedColor"><div><h5>New York City</h5>
New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is
Manhattan, a densely populated borough that's among the world's major commercial, financial and cultural
centers.
</div></div>html
라디오 버튼 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
가장 간단한 접근 방식에 따라 radio-theme 확장하고 기본 테마의 매개변수 중 일부를 허용하는 새 테마를 만듭니다.
Ignite UI for Angular 자식 라디오 구성 요소를 더 잘 제어할 수 있는 그룹화 컨테이너를 제공하고 템플릿 기반 및 반응형 양식을 지원합니다.
데모
EXAMPLE
TS
HTML
SCSS
import { Component } from'@angular/core';
import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from'@angular/forms';
import { IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective } from'igniteui-angular';
@Component({
selector: 'app-radio-group-sample',
styleUrls: ['./radio-group-sample.component.scss'],
templateUrl: './radio-group-sample.component.html',
imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective]
})
exportclassRadioGroupSampleComponent{
public fruitsForm: FormGroup;
public fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
public newModel: FruitData;
public model: FruitData;
constructor(private _formBuilder: FormBuilder) {
// Simulate getting data from external servicethis.model = {
favFruit: this.fruits[0],
fullName: 'John Doe'
};
this.createForm();
}
publiconSubmit() {
if (this.fruitsForm.valid) {
// simulate new model creation and send the new data to external servicethis.newModel = {
favFruit: this.fruitsForm.value.favoriteFruit,
fullName: this.fruitsForm.value.fullName
};
} else {
this.newModel = null;
}
}
publiconReset() {
this.fruitsForm.patchValue({
favoriteFruit: this.model.favFruit,
fullName: this.model.fullName
});
this.newModel = null;
}
privatecreateForm() {
this.fruitsForm = this._formBuilder.group({
favoriteFruit: ['', Validators.required],
fullName: ''
});
this.fruitsForm.setValue({
favoriteFruit: this.model.favFruit,
fullName: this.model.fullName
});
}
}
exportclassFruitData{
public fullName: string;
public favFruit: string;
}
ts
<divclass="sample-wrapper"><label>Choose a fruit and submit your choice:</label><form [formGroup]="fruitsForm" (ngSubmit)="onSubmit()"><igx-input-group><inputigxInputname="fullName"type="text"formControlName="fullName"required /></igx-input-group><igx-radio-groupname="fruitsRadioGroup"formControlName="favoriteFruit">
@for (fruit of fruits; track fruit) {
<igx-radioclass="radio-sample"value="{{fruit}}">
{{fruit}}
</igx-radio>
}
</igx-radio-group><buttonigxButton="contained"igxRippletype="submit">Submit</button><buttonigxButton="contained"igxRippletype="button" (click)="onReset()">Reset</button></form>
@if (newModel) {
<labeligxLabel>{{newModel.fullName}} favourite fruit is {{newModel.favFruit}}.</label>
}
</div>html
<!--radio-group.component.html--><igx-radio-groupname="fruitsRadioGroup"><igx-radio *ngFor="let fruit of fruits"value="{{fruit}}">
{{fruit}}
</igx-radio></igx-radio-group>html
GitHub