Home  >  Article  >  Web Front-end  >  Example code for extracting radio list of public components in Angular5_AngularJS

Example code for extracting radio list of public components in Angular5_AngularJS

无忌哥哥
无忌哥哥Original
2018-07-12 14:26:511899browse

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 '@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);
  }
}

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>

Register in the relevant referenced module

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;
}

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>

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

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn