Get the default value of select radio Angular 6

I have this mapping User *------------------------1 Profession. I'd like to modify one user. So I select one from list-users.component.html, I'll be redirected to modify-user.component.html.

Bellow are the required files:

modify-user.component.html

<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
        </div>
        <div *ngFor='let pro of professions; let i = index'>
            <label>
                <input type="radio"
                       id="pro.id" 
                       checked="pro.selected" 
                       name="pro"
                       [(ngModel)]="this.editForm.pro"
                       (change)='radioChecked(pro.id, i)'
                       [value]="pro.libelle">
                <span></span>
                <span class="check"></span>
                <span class="box"></span>
                {{pro.libelle}}
            </label>
        </div>
        <p>==> {{selectedProfessionRadio}}</p>
        <button class="btn btn-success">Update</button>
    </form>

modify-user.component.ts

export class ModifyUserComponent implements OnInit
{

    private selectedProfessionRadio;
    professionLib: string;
    editForm: FormGroup;
    usrId: String;

    professions: Profession[] =
    [
        {id: 1, libelle: "Engineer", selected: false},
        {id: 2, libelle: "Student", selected: false},
    ];

    radioChecked(id, i, pro)
    {
        this.professions.forEach(pro=>
        {
            if(pro.id !== id)
            {
                pro.selected = false;
            }
            else
            {
                pro.selected = true;
            }
        })

        this.userService.getProfessionById(id).subscribe(data =>
        {
            console.log(data);
            pro = data as Profession;

            localStorage.removeItem("ProfessionLibelle");
            localStorage.setItem("ProfessionLibelle", pro.libelle);

        },error => console.log(error));

        this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
    }

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) {}

  ngOnInit()
  {
      let userId = localStorage.getItem("editUserId");
      this.usrId = localStorage.getItem("editUserId");

      this.userService.getProfessionLibelleByIdUser(+userId).subscribe(data =>
      {
          console.log(data);
          let pro = data as string;
          this.professionLib = pro;

          localStorage.removeItem("ProfessionLibe");
          localStorage.setItem("ProfessionLibe", this.professionLib);

      },error => console.log(error));

      this.selectedProfessionRadio = localStorage.getItem("ProfessionLibe");

      this.editForm = this.formBuilder.group
      ({
          id: [],
          name: ['', Validators.required],
          pro: [this.selectedProfessionRadio, Validators.required]
      });

      this.userService.getUserId(+userId).subscribe( data =>
      {
          this.editForm.patchValue(data);
      });
  }

}

My problem is that after redirecting to modify-user, I got usually the first profession (which is wrong), exactly like described by this.

Could you please tell me what I missed? Thanks a lot.

The code snippet you share lack some information and contains some errors. I was able to recreate it on stackblitz, hope it captures what you're trying to achieve.

When working with forms in Angular, it is not recommended to mix template driven forms and reactive forms. In your case, this resulted in the error:

ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead 

Also, editForm.item with result in an error, because item is not defined in the form group editForm