title: Data binding on first page load after load ngFor
body: <p>I have a page with a list of options to user choose with a radio button. onclick this binding some data to a summary right a side from a method. I wanna check the last item by default and load the data in the summary as way in the first page load</p>
  
  <p>Anyone has deal with something like that?</p>
  
  <p>Template</p>
  
  <pre><code> &lt;!-- homebasic_cplan start --&gt;
    &lt;section class="homebasic_cplan common_sec"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;div class="mainbox1"&gt;
              &lt;div class="title_box1"&gt;
                &lt;h2&gt;Choose the plan&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="boxbody1"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-lg-5 col-md-6"&gt;
                    &lt;h3 class="choose_head"&gt;Choose the plan that best suits you&lt;/h3&gt;
                    &lt;form class="form_hlp"&gt;
                        &lt;div class="row" *ngFor="let item of items; let isLast = last"&gt;
                          &lt;div class="col-12"&gt;
                            &lt;div class="borer_bottom"&gt;
                               &lt;div class="row"&gt;
                                  &lt;div class="col-5 padleft0"&gt;
                                    &lt;label class="contain"&gt;{{item.months}} {{item.title}}
                                      &lt;input (click)="selectplan(baselineRate-baselineRate*item.discount/100,item.months)" type="radio" name="radio" [checked]="isLast"&gt;
                                      &lt;span class="checkmark"&gt;&lt;/span&gt;
                                    &lt;/label&gt;
                                  &lt;/div&gt;
                                   &lt;div class="col-7 padright0"&gt;
                                      &lt;p class="rs_plan" &gt;R$ {{baselineRate-baselineRate*item.discount/100}}/mo&lt;/p&gt;
                                      &lt;p class="rs_plan1"&gt;R$ {{baselineRate}}/mo&lt;/p&gt;
                                      &lt;p class="rs_plan2"&gt;Save {{item.discount}}% with discount&lt;/p&gt;
                                  &lt;/div&gt;
                               &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
  
                    &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 col-md-6 offset-lg-1"&gt;
                      &lt;div class="summary_box clearfix"&gt;
                        &lt;h3&gt;SUMMARY&lt;/h3&gt;
                        &lt;p class="home_protxt"&gt;{{productname}}&lt;span class="rs_txt1"&gt;${{totalprice | number : '1.2-2'}}&lt;/span&gt; &lt;/p&gt;
                        &lt;p class="mnth_txt"&gt;For {{duration}} months&lt;/p&gt;
                        &lt;div class="line"&gt;&lt;/div&gt;
                        &lt;p class="dis_txt"&gt;${{totalprice | number : '1.2-2'}}&lt;/p&gt;
                        &lt;p class="home_protxt"&gt;TOTAL&lt;span class="rs_txt"&gt;{{duration}}x of &lt;sup&gt;${{price}}&lt;/sup&gt;,&lt;sub&gt;00&lt;/sub&gt; &lt;/span&gt; &lt;/p&gt;
  
  
                        &lt;a class="btn btn_apply" (click)="homestartnow()"&gt;START NOW&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;!-- homebasic_plan end --&gt;
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { CommonService } from '../../services/common.service';
  import { environment } from './../../../environments/environment';
  import { AuthenticationService } from './../../services/authentication.service';
  @Component({
    selector: 'app-homebasic-cplan',
    templateUrl: './homebasic-cplan.component.html',
    styleUrls: ['./homebasic-cplan.component.css'],
    providers: [CommonService]
  })
  export class HomebasicCplanComponent implements OnInit  {
    /*Declare varialbles */
    items: any;
    baselineRate: any;
    productname: any;
    price: any;
    totalprice: any;
    duration: any;
    id: any;
  
    private _planUrl = 'subscription/getSubscriptionById';
  
    constructor(
      public _commonService: CommonService,
      public router: Router,
      private route: ActivatedRoute,
      private authenticationService: AuthenticationService
    ) {
      this.router.routeReuseStrategy.shouldReuseRoute = () =&gt; false;
      localStorage.removeItem('totalprice');
      localStorage.removeItem('price');
      localStorage.removeItem('duration');
      localStorage.removeItem('planName');
  
      /*getting the route id from here */
      this.route.params.subscribe(params =&gt; {
        localStorage.setItem('subid', params['id']);
        this.getData(params['id']);
      });
    }
  
    ngOnInit() {
      this.price = '0.00';
      this.totalprice = '0.00';
      this.duration = '0';
    }
  
    /*Get the subscription by id */
    getData(id) {
      const value = {
        subscriptionId: id
      };
  
      this._commonService.callingpostapi(this._planUrl, value).subscribe(
        response =&gt; this.handleResponse(response),
        error =&gt; this.handleResponse(error)
      );
    }
  
    handleResponse(response) {
      this.items = response.result.subscriptionData[0].discounts;
      this.baselineRate = response.result.subscriptionData[0].feesCharge.baselineRate;
      this.productname = response.result.subscriptionData[0].product_name;
    }
  
    /*select the plan and set the value in local storage */
    selectplan(price, duration) {
      this.duration = duration;
      this.price = price;
      this.totalprice = duration * price;
      localStorage.setItem('totalprice', this.totalprice);
      localStorage.setItem('price', this.price);
      localStorage.setItem('duration', this.duration);
      localStorage.setItem('planName', this.productname);
      console.log( this.totalprice);
    }
  
    /*login check for routing */
    homestartnow() {
      if (
        this.authenticationService.getAccessToken() &amp;&amp;
        this.authenticationService.getUser()
      ) {
        this.router.navigate(['/homebasicstart']);
      } else {
        sessionStorage.setItem(
          environment.storageConstants.LANDING_PAGE_AFTER_LOGIN,
          JSON.stringify('/homebasicstart')
        );
        this.router.navigate(['/login']);
      }
    }
  }
  </code></pre>