Radio Button List Hangs Application in Angular 10

1

I am new in angular 10 and was developing a simple template driven form by dynamically adding list of radio buttons. The code compiles successfully but when the application launch in browser it continuously loading and show the following error in FireFox:

"A web page is slowing down your browser. What would you like to do? [Stop it] [Wait]

I am attaching the source code and angular details:

<form #f="ngForm">
  <div class="form-group">
    <label for="courseList">Course List</label>
    <select
      required
      ngModel
      name="courseList"
      #courseList="ngModel"
      id="courseList"
      class="form-control"
    >
      <option value=""> ----Please select ----</option>
      <option *ngFor="let course of getCourses()" [value]="course.Id">
        {{ course.Name }}
      </option>
    </select>
  </div>

  <div class="form-group">
    <label for="">Experience</label>
    <div class="checkbox" *ngFor="let level of getLevels()">
      <input ngModel type="radio" [value]="level.Id" name="contactMethod" />
      {{ level.Name }}
    </div>
  </div>

  <div class="form-group">
    <button class="btn btn-primary" [disabled]="!f.valid">Submit</button>
  </div>
  <p>{{ f.value | json }}</p>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css'],
})
export class PostComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  getCourses() {
    return [
      { Id: '1', Name: 'Course-A' },
      { Id: '2', Name: 'Course-B' },
      { Id: '3', Name: 'Course-C' },
    ];
  }

  getLevels() {
    return [
      { Id: '1', Name: 'Beginner' },
      { Id: '2', Name: 'Intermediate' },
      { Id: '3', Name: 'Expert' },
    ];
  }
}

image

Can anyone helps how to show the radio buttons? Thanks

2

Welcome to Angular, hope you’re having a fun ride till now.
Your Angular seems to be fine but there could be something in your project structure that’s preventing you from running your app.

As far as the radio buttons, I’m not sure I figured the reason you want to have ngModel, but technically if you’re trying to use default radio buttons of HTML you’d need a label tag for each input tag. If you’re trying to use angular way then you’d need options DOM property.