title: bind data to the multiple radio buttons in angular 2
body: <p>I have rating star inputs made with the radio buttons. I can add this rating perfectly but when I want to show it on the page or edit it shows me only 1(1 start is highlighted of 5) even if the rating is 5. As I understood angular binds rating to the 1 star only. How can I bind it properly to all the stars??</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Rating&lt;/label&gt;
          &lt;fieldset&gt;
            &lt;span class="star-cb-group"&gt;
              &lt;input type="radio" id="rating-5" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/&gt;&lt;label for="rating-5"&gt;5&lt;/label&gt;
              &lt;input type="radio" id="rating-4" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/&gt;&lt;label for="rating-4"&gt;4&lt;/label&gt;
              &lt;input type="radio" id="rating-3" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/&gt;&lt;label for="rating-3"&gt;3&lt;/label&gt;
              &lt;input type="radio" id="rating-2" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/&gt;&lt;label for="rating-2"&gt;2&lt;/label&gt;
              &lt;input type="radio" id="rating-1" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/&gt;&lt;label for="rating-1"&gt;1&lt;/label&gt;
            &lt;/span&gt;
            &lt;div class="alert alert-danger"
                 *ngIf="r.invalid"&gt;
              Rating is required
            &lt;/div&gt;
          &lt;/fieldset&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/p3jDV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p3jDV.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/OIKTr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OIKTr.png" alt="enter image description here"></a></p>
  
  <p>the <code>edit</code> function below will be called when clicking <code>submit</code> button to upload data to database.</p>
  
  <pre><code>edit(book) {
      const id = this.activeRoute.snapshot.params['id'];
      const updbook = {
        _id: id,
        title: book.title,
        author: book.author,
        description: book.description,
        status: book.status,
        displayStatus: book.displayStatus,
        rating: book.rating
      };
      console.log(book);
      //
      this.bookService.editBook(updbook).subscribe(data =&gt; {
        if (data.success) {
          console.log('book edited');
          this.router.navigate(['/']);
        } else {
          console.log('error book edit');
        }
      });
    }
  </code></pre>