Example code for extracting radio list of public components in Angular5

Example code for extracting radio list of public components in Angular5_AngularJS

无忌哥哥

Release： 2018-07-12 14:26:51

Original

1921 people have browsed it

This article mainly introduces the example code for extracting the radio list of public components in Angular5. It is very good and has certain reference value. Friends in need can refer to it.

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

The Radio List component is very convenient to extract and is not as complicated as Checkbox.

radio-list.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from &#39;@angular/core&#39;;
import { RadioItem } from &#39;../../model/radio&#39;;
import { NgModel } from &#39;@angular/forms&#39;;
@Component({
  selector: &#39;app-radio-list&#39;,
  templateUrl: &#39;./radio-list.component.html&#39;,
  styleUrls: [&#39;./radio-list.component.css&#39;]
})
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);
  }
}

Copy after login

radio-list.component.html

<p *ngIf="list" class="form-row">
  <p class="col-{{colNum}} mb-2" *ngFor="let item of list">
    <p 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>
    </p>
  </p>
</p>

Copy after login

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

Copy after login

The corresponding html reference is as follows:

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

Copy after login

Follow the above steps, but the corresponding selectChange($event) is still missing:

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

Copy after login

The above is the detailed content of Example code for extracting radio list of public components in Angular5_AngularJS. For more information, please follow other related articles on the PHP Chinese website!