Home > Web Front-end > JS Tutorial > body text

Example code for extracting radio list of public components in Angular5_AngularJS

无忌哥哥
Release: 2018-07-12 14:26:51
Original
1897 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 '@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);
  }
}
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

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!