Untitled

<div *ngFor="let ds of Disaster">
  <div style="border: 1px solid #BCE0EA; height: auto; width: 95%; padding-top: 4px; padding-left: 4px; background-color: #E9EEF8; border: 1px solid #C1B4E1;">

    <!-- Disaster Type start -->
    <div style="width: 30%; margin-left: 8px; margin-top: 8px; padding-bottom: 5px;">
      <span class="labelICR" style="float: right; font-size: 12px; margin-right: -7px;" *ngIf="!viewMode">{{ds.disasterType.length+0}} of 100 </span>
      <span style="font-weight: bold;" class="bcmLable"><span>Disaster Type</span></span><span style="font-weight: bold;">:</span>
      <br />
      <textarea id="disasterType{{i}}" [disabled]="viewMode" style="width: 100%; overflow-y: scroll; resize: none; height: 30px; overflow-x: hidden; white-space: pre-wrap" [(ngModel)]="ds.disasterType" maxlength="100"></textarea>
    </div>
    <!-- Disaster Type end -->

    <!-- Base Period (in Years): Type start -->
    <div style="width: 14%; margin-top: -75px; float: right; margin-right: 526px;">
      <span class="bcmLable">Base Period (in Years):</span>
      <br />
      <input type="text" [disabled]="viewMode" (keypress)="isNumberKey($event)" maxlength="2" (paste)="false" style="width: 36px; margin-left: 1px; margin-top: 2px;" [(ngModel)]="ds.basePeriod" id="basePeriod{{i}}">
    </div>
    <!-- Base Period (in Years): Type end -->

    <!-- Remarks start -->
    <div style="width: 40%; margin-left: 8px; padding-bottom: 5px; float: right; margin-right: 47px; margin-top: -75px;">
      <span class="labelICR" style="float: right; font-size: 12px; margin-right: -7px;" *ngIf="!completeView || !viewMode">{{ds.remarks.length+0}} of 200 </span>
      <span style="font-weight: bold;" class="bcmLable"><span>Remarks</span></span><span style="font-weight: bold;">:</span>
      <br />
      <textarea id="remarks{{i}}" [disabled]="viewMode" style="width: 100%; overflow-y: scroll; resize: none; height: 30px; overflow-x: hidden; white-space: pre-wrap" [(ngModel)]="ds.remarks" maxlength="200"></textarea>
    </div>
    <!-- Remarks end -->

  </div>
</div>