SoFunction
Updated on 2025-04-13

Angular5 extracts the instance code of radio list of public components

This article will tell you about the extraction of public components of Radio List.

Radio List components are very convenient to extract, and they are not as complicated as Checkbox.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { RadioItem } from '../../model/radio';
import { NgModel } from '@angular/forms';
@Component({
  selector: 'app-radio-list',
  templateUrl: './',
  styleUrls: ['./']
})
export class RadioListComponent implements OnInit {
  @Input() list: RadioItem[];
  @Input() name: string;
  @Input() colNum: number = 6;
  @Input("selectModel") model: string;
  @Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {
  }
  changeSelected() {
    let data = { value: , name:  };
    (data);
  }
}

<div *ngIf="list" class="form-row">
  <div class="col-{{colNum}} mb-2" *ngFor="let item of list">
    <div class="form-check abc-radio abc-radio-primary">
      <input class="form-check-input" type="radio" [value]="" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" >
      <label class="form-check-label" for="{{name}}_{{}}">
        {{}}
      </label>
    </div>
  </div>
</div>

Register in the module referenced in the relevant

import { RadioListComponent } from '../components/radio-list/';
export const routes = [
  { path: '', component: xxxComponent, pathMatch: 'full' }
];
@NgModule({
  imports: [...],
  declarations: [...
    , RadioListComponent
    , ...],
  providers: []
})
export class xxxModule {
  static routes = routes;
}

The corresponding html references are as follows:

 <app-radio-list [list]="sourceArr"
         [name]="'selectedSource'"
         [colNum]="12"
        [(selectModel)]="selectedSource"
        (selectChange)="selectChange($event)">
 </app-radio-list>

Following the above steps, the corresponding selectChange($event):

 selectChange(model: any) {
   this[] = ;
 }

Summarize

The above is the example code of extracting radio list of public components in Angular5 introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!