i have developed an form in angular but wont show star rating after loading if i write in text box something it shows

Question

**i have developed a form in angular but won't show star rating after loading if i write in text box something it shows**

please help me to resolve this problem why is this not showing by default after typing in the textbox then only it shows

.card{
  margin-top: 2.5rem;
  margin-left: 12.5rem;
  margin-right: 13rem;
  padding: 0;
  width: 65%;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.97);
}
.card-body{
padding: 0;
}
.card_header{
  background-color: #083c74;
  color: white;
  width: 100%;
}
.card_header .card_header1{
  display: flex;
}
.alert{
  background-color: red;
  opacity: 0.5;
}
.card_header .card_header1 .logo_images{
width: 3.2rem;
height: 3.4rem;
padding: 2rem;
}
.card .card_header .card_header1 .heading{
text-align: justify;
padding-left: 3rem;
width: 70%;
justify-content: center;
margin-left: 5.2rem;
margin-top: 2rem;
}
.card_header .card_header1 .heading h3{
font-family: Arial, Helvetica, sans-serif;
}
.card_header .card_header2{
padding: 2rem;
width: 70%;
font-family: Arial;
font-size: 11.5px;
text-align: justify;
}
.requires{
  margin-left: 2rem;
  font-family: Verdana;
  font-size: 10.5px;
}
.form-group{
  margin-left: 2rem;
  margin-bottom: 1rem;
  padding-top: 1.4rem;
  font-family: Arial;
  font-size: 13px;
}
.form-control{
  margin-top: 1rem;
  margin-left: 0.7rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 12px;
  font-family: Arial;
}
.custom-control-input{
margin-top: 0.8rem;
padding-left: 0.8rem;
width: 14px;
height: 20px;
vertical-align: middle;
  position: relative;
  bottom: 6px;
}
.custom-control-label{
  font-family: Arial;
  font-size: 11px;
  padding-left: 0.5rem;
}
.chkl1{
  display: block;
  padding-left: 13px;
}
ngb-rating {
  color: #FFC107;
  font-size: 50px;
}


.btn{
background-color: #083c74;
color: white;
border-radius: 0;
margin-left: 2rem;
margin-bottom: 1rem;
padding-left: 3.3rem;
padding-right: 3.3rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.para{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding-left: 2rem;
}

<div class="container">
  <div class="row">
    <div class="card">
      <div class="card_header">
      <div class="card_header1">
        <div class="logo_images">
          <img src="assets/logo.png" width="50" height="50" />
        </div>
        <div class = "heading">
          <h3>
            Feedback Form (Visit
            <a href="bit.ly/sfolyfb1" style="color: white">bit.ly/sfolyfb1</a> if
            you are unable to fill this form.)
          </h3>

        </div>
        </div>
        <div class = "card_header2">
          <p>
            A short feedback form to help us consistently deliver you the best
            and improve. Compulsory to get certificates. Certificates will be
            sent via email in December. Request you to please fill correct
            details only so that we can know where we are lagging.
          </p>
      </div>
    </div>
      <div class="card-body">
        <span class="requires">
          <span style="color:#ff0000">*</span> Required
      </span>
      <form #formcomplete="ngForm" (ngSubmit)="submit(formcomplete)">
          <div class="form-group col-md-11">
              <label for="exampleInputName1">1.Name of participant<span style="color:#ff0000">*</span></label>
            <input #name="ngModel" type="text" class="form-control" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter your answer" required minlength="2" and maxlength="7" ngModel>
            <!-- <div class="alert" *ngif = "name.touched && name.invalid">
              <p>

              </p>
            </div> -->
            </div>
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <label for="examplecheckparticipated1">2.Participated for?<span style="color:#ff0000">*</span></label>
              <div class="custom-control custom-checkbox mb-3">
                <label class="chkl1">
                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required  ngModel>
                  <label class="custom-control-label" for="customControlValidation1">SIEO</label>
                </label>
                <label class="chkl1">

                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required  ngModel>
                  <label class="custom-control-label" for="customControlValidation1">SIMO</label>
                </label>
                <label class="chkl1">

                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required  ngModel>
                  <label class="custom-control-label" for="customControlValidation1">SISO</label>
                </label>
                <label class="chkl1">

                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required ngModel>
                  <label class="custom-control-label" for="customControlValidation1">Grads Olympiad</label>
                </label>
                <label class="chkl1">

                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required ngModel>
                  <label class="custom-control-label" for="customControlValidation1">Finance Olympiad</label>
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="rate">
              <label for="examplecheckparticipated1">3.How was the quality of the questions asked?<span style="color:#ff0000">*</span></label><br/>
              <span>
                <ngb-rating [max]="10" [(rate)]="starRating" [readonly]="false" ngModel></ngb-rating>
              </span>
            </div>
            </div>
  <div class="form-group col-md-11">
    <label for="exampleInputName1">7.Anything that we need to improve.<span style="color:#ff0000">*</span></label>
    <input type="text" class="form-control" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter your answer" required ngModel>
  </div>
  <div class="form-group col-md-11">
    <label for="exampleInputName1">8.What did you like the best about us?<span style="color:#ff0000">*</span></label>
    <input type="text" class="form-control" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter your answer" required ngModel>
  </div>

  <button type="submit" class="btn">Submit</button>
</form>

  <p class="para">
    Never give out your password.<a href="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAANAAcYkOJRUNFJHOVZRVkQ3SklLOFdCS0hMNk45VjVGSS4u#View=ReportAbuse">
      Report abuse
    </a>
  </p>
</div>
</div>
</div>
</div>

**typescript import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; import { NgForm } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {

  userData: any = {};
  starRating = 0;
  submit(formcomplete:NgForm) {
    console.log("Form Submitted",formcomplete)
    this.userData = formcomplete;
  }

}**

**app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxStarRatingModule} from 'ngx-star-rating';
import {MatSnackBarModule} from '@angular/material/snack-bar'
import {MatButtonModule} from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

@NgModule({
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule,
    NgxStarRatingModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatSnackBarModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }**