Delay in getting value of Formcontrol

Question

I have a radiobutton that based on the value selected should move a user to the next step in my angular stepper or to show the next DIV in the same stepper. However it appears that when I click the radiobutton the function is correctly called, however the value of the radiobutton (returned by this.chesPainFormGroup.get) is NULL, when I click it a second time then the value is correct. Does anybody now the solution.

HTML code snippet:

  <mat-grid-tile [colspan]=3 [rowspan]=3>
      <div>
          <label id="example-radio-group-label">Pijn op de borst (gehad) ?</label>
          <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group" formControlName="pobCtrl">
            <mat-radio-button class="example-radio-button" *ngFor="let ja of janee" [value]="ja" (click)="showDiv(stepper)">
              {{ja}}
            </mat-radio-button>
          </mat-radio-group>
        </div>

Angular code snippet

  showDiv (stepper: MatStepper) {
    const pobgehadcheck = this.chestPainFormGroup.get('pobCtrl').value;
    console.log(pobgehadcheck);
    if (pobgehadcheck === 'Nee') {
      console.log ('Geen Chestpain gehad.');
      stepper.next();
    } else {
      this.pobgehad = !this.pobgehad;
    }

Answer 1

You can add that ja as another parameter to the click handler:

<mat-radio-button class="example-radio-button" *ngFor="let ja of janee"
   [value]="ja" (click)="showDiv(stepper, ja)">

showDiv (stepper: MatStepper, pobgehadcheck) {
   console.log(pobgehadcheck);
//...