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: './radio-list.component.html',

     styleUrls: ['./radio-list.component.css']

 })

 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: this.model, name: this.name };

         this.onChange.emit(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]="item.id" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" id="{{name}}_{{item.id}}">

             <label class="form-check-label" for="{{name}}_{{item.id}}">

                 {{item.name}}

             </label>

         </div>

     </div>

 </div>

 import { RadioListComponent } from '../components/radio-list/radio-list.component';

 export const routes = [

     { path: '', component: xxxComponent, pathMatch: 'full' }

 ];

 @NgModule({

     imports: [...],

     declarations: [...

         , RadioListComponent

         , ...],

     providers: []

 })

 export class xxxModule {

     static routes = routes;

 }

 <app-radio-list [list]="sourceArr"

                 [name]="'selectedSource'"

                 [colNum]="12"

                 [(selectModel)]="selectedSource"

                 (selectChange)="selectChange($event)">

 </app-radio-list>

 selectChange(model: any) {

     this[model.name] = model.value;

 }