Error:Cannot read properties of null in Angular addressForm is not getting data

Question

<ng-template #addressSection let-addressForm="form" let-resetCityMethod="resetCityMethod" let-address="address">

    Street Address*
    <input type="text" class="form-control"
      placeholder="Street Address" formControlName="street">
    
  


  
    Country* 
    <select name id class="form-select" formControlName="country"
      (change)=" resetCityMethod">
      Select country
      India
      USA
      Canada
    
    
  

  <!-- country=India -->
  <div class="col"
    *ngIf="addressForm.get(['address','country']).value==='india'">
    <label for="City">City<span>*</span></label>
    <select name class="form-select" id formControlName="city">
      <option value disabled selected>Select city</option>
      <option value="Kolkata">Kolkata</option>
      <option value="Kochi">Kochi</option>
      <option value="Mumbai">Mumbai</option>
      <option value="Chennai">Chennai</option>
      <option value="Banglore">Bangalore</option>
      <option value="Delhi">Delhi</option>
    </select>
    <app-validation-component [control]="addressForm.get(['address','city'])" [key]="'City'"></app-validation-component>
  </div>

  <!-- country=USA -->
  <div class="col"
    *ngIf="addressForm.get(['address','country']).value==='usa'">
    <label for="City">City<span>*</span></label>
    <select name class="form-select" id formControlName="city">
      <option value disabled selected>Select city</option>
      <option value="California">California</option>
      <option value="New York">New York</option>
      <option value="Dallas">Dallas</option>
      <option value="Florida">Florida</option>
      <option value="Los Angles">Los Angles</option>
      <option value="Miami">Miami</option>
      <option value="Detroit">Detroit</option>
      <option value="Alaska">Alaska</option>
    </select>
    <app-validation-component [control]="addressForm.get(['address','city'])" [key]="'City'"></app-validation-component>
  </div>

  <!-- country=Canada -->
  <div class="col"
    *ngIf="addressForm.get(['address','country']).value==='canada'">
    <label for="City">City<span>*</span></label>
    <input type="text" class="form-control" placeholder="City"
      formControlName="city">
    <app-validation-component [control]="addressForm.get(['address','city'])" [key]="'City'"></app-validation-component>
  </div>

  <!-- country=null -->
  <div class="col"
    *ngIf="addressForm.get(['address','country']).value===''">
    <label for="City">City<span>*</span></label>
    <input type="text" class="form-control" placeholder="City"
      formControlName="city">

    <app-validation-component [control]="addressForm.get(['address','city'])" [key]="'City'"></app-validation-component>
  </div>

</div>
<div class="row mt-3">
  <div class="col">
    <label for="Region">Region<span>*</span></label>
    <input type="text" class="form-control" placeholder="Region"
      formControlName="region">
    <app-validation-component [control]="addressForm.get(['address','region'])" [key]="'Region'"></app-validation-component>
  </div>
  <div class="col">
    <label for="postal_code">Postal Code<span>*</span></label>
    <input type="text" class="form-control" placeholder="Postal Code"
      mask="000-000" formControlName="postal_code">
    <app-validation-component [control]="addressForm.get(['address','postal_code'])" [key]="'Postal Code'"></app-validation-component>
  </div>
</div>

<ng-container *ngTemplateOutlet="addressSection; context:{form: regform, resetCityMethod: resetPermanentCity, address:'permanent_address'}"></ng-container>

ng-container value is not passing into the ng-template it was working fine at the begining but it is not working properly at this time.