Search code examples
angularnativescriptnativescript-angular

Nativescript get properties from child element in ng-repeat


I've got a dynamically generated checklist in Angular/Nativescript like so:

<StackLayout *ngIf="assessment">
         <StackLayout *ngFor="let instance_item of assessment.exam_instance_items; let i= index">
               <ns-examitem [attr.id]="'item_'+instance_item.id" [assessmentitem]="instance_item"
                  (changeEvent)="validateExam($event)"></ns-examitem>
          </StackLayout>
</StackLayout>

where the examitem has a radio button control bound to a value

(in examitem.component.ts- the child component)

// get the values out
   public selectedvalue: string = '';

   // tell the world something's changed, trigger validation
  @Output() changeEvent = new EventEmitter();

  changeCheckedRadio(radioOption: RadioOption): void {
    // uncheck all other options
    this.radioOptions.forEach(option => {
      if (option.value !== radioOption.value) {
        option.selected = false;
      } else {
        option.selected = true;
        this.selectedvalue = option.value;
        this.assessmentitem.selectedValue = this.selectedvalue;
      }
    });
    // tell the world the value has changed
    console.log('ExamitemComponent.Radio option changed to:' + this.selectedvalue)
    this.changeEvent.emit();
  }

I'm really struggling getting the selectedvalue out of the examitem components in the parent component. I can get the component reference by ID, but can't read the value.

Anyone able to help?


Solution

  • You have to emit the value you want to get in parent component like so

    this.changeEvent.emit(this.selectedvalue);
    

    Then in parent component you can use this value in the validateExam function .