Ion-radio and ion-select inside custom component


I have a situation where I’ve created an ion-radio, ion-input and ion-select inside a custom component. I’m using ControlValueAccessor to get values of these from my custom component. I’m getting values from ion-input fine but its not working for ion-radio and ion-select.

ion-select and ion-radio value is setting up fine as if i output it inside my custom component but not inside ngmodel of page.ts

Here is the example plunkr I’m using to get values

This is my code

<question-label [(ngModel)]="response[html.key]" ngDefaultControl style="width:100%;" item-content *ngIf=" == 'question_label'" [object]="html"></question-label>

<ion-input *ngIf="object.question.type == 'input' || object.question.type == 'textarea'" [(ngModel)]="value" (blur)="onBlur()" type="text" placeholder="{{object.text}}"></ion-input>

<ion-list *ngIf="object.question.type == 'radio'" [(ngModel)]="value" radio-group>

  	<ion-item *ngFor="let radio of object.question.responses">
		<ion-radio value="{{radio.text}}"></ion-radio>

<ion-item  *ngIf="object.question.type == 'organization'">
  <ion-select [(ngModel)]="value">
    <ion-option disabled ="{{radio.disabled}}" *ngFor="let radio of object.question.responses" value="{{radio.text}}">{{radio.text}}</ion-option>

import { Component, Input, forwardRef} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {

    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => QuestionLabel),
    multi: true

 * Generated class for the QuestionLabel component.
 * See
 * for more info on Angular Components.
  selector: 'question-label',
  templateUrl: 'question-label.html'
export class QuestionLabel implements ControlValueAccessor {

	@Input() object: Object;

	private innerValue: any = '';

  	constructor() {

  	private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    get value(): any {
        return this.innerValue;

    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;

    onBlur() {

    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;

	registerOnChange(fn: any) {
        this.onChangeCallback = fn;

	registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;



for select I used [value]=“id” and it did gave me the correct key
so instead of

use this


As i said, it already gives me correct key inside custom component. but in actual page where i’ve implemented that component, it gives me empty result


Hey, sorry, my first post was broken.
What I meant was, you used value="{{radio.text}}"

I am saying you need to bind it like this [value]="radio.text"
then you will get the value outside