Untitled

<div class="container">

  <app-disaster-list 
    (disasterSelected)="onDisasterSelect($event)">
  </app-disaster-list>

  <app-disaster-details
    [disaster]="selectedDisaster"
    (saved)="onSave($event)">
  </app-disaster-details>

  <div class="bcmBodyContainer">
    <div id="rightDiv" style="margin-left: 7px; margin-top: -18px; width: 98.6%;" class="span">
      <div id="rightDiv" style="margin-left: 7px; margin-top: -18px; width: 98.6%;" class="span">
        <!-- Validation div start -->
        <div *ngIf="duplicateNote">
          <span class="card" style="color: red; position: relative; margin-left: 0px; top: 10px; background-color: #FFFFD6; font-family: 'Roboto'; font-size: 14px; font-weight: bold;">
            <span> 
              <img src="assets/Error_icon.png" alt="Add" style="cursor: pointer; height: 16px; color: green; position: relative; margin-left: 0px; top: 20px; background-color: #FFFFD6; font-family: 'Roboto'; font-size: 14px; font-weight: bold;">
              <img src="assets/green_tick.png" alt="Add" style="cursor: pointer; height: 16px; margin-left: 3px; margin-top: 5px; margin-bottom: 5px" />
              Saved successfully!
            </span>
          </span>
        </div>
        <div *ngIf="emptyNote">
          <span class="card" style="color: red; position: relative; margin-left: 0px; top: 10px; background-color: #FFFFD6; font-family: 'Roboto'; font-size: 14px; font-weight: bold;">
            <span> 
              <img src="assets/Error_icon.png" alt="Add" style="cursor: pointer; height: 16px; width: 17px; margin-left: 3px; margin-top: -5px;" />
              Disaster Type Name cannot be empty!
            </span>
          </span>
        </div>
        <!-- Validation Div End -->
      </div>
      <div class="bcmBlueDivBorder" style="margin-left: 7px; margin-top: 20px; width: 98.6%;">
        <div class="arrow" style="margin-left: -8px; cursor: default; width: 215px;">
          <div style="margin-top: 2%; margin-left: 2%; width: 200px;">
            <span>{{arrowText}}</span>:
          </div>
        </div>
        <div id="rscrolldiv" class="bcmBlueDivBorder" style="margin: -2px 15px; margin-top: 43px; background-color: #B9CDE5; width: 60%;">
          <div>
            <span style="float: left; margin-left: 16px; font-weight: bold;">{{headingText}}</span>:
          </div>
          <div style="height: 28px; margin-left: 13px; margin-top: 10px; resize: none; width: 500px;">
            <select style="height: 28px; margin-left: 11px; margin-top: -5px; resize: none; width: 500px;" [(ngModel)]="selectedvalue" (ngModelChange)="getDisList()">
              <option value="">Select</option>
              <option *ngFor="let d of disasterlist" (click)="getDisList(d.lookUpID)">{{d.lookUpName}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="bcmBlueDivBorder" style="margin-left: 7px; margin-right: 617px; cursor: pointer; font-size: 14px; font-family: 'Roboto'; color: blue; text-decoration: underline; margin-top: -24px;">
        Edit
      </div>
      <!-- Disaster dd div start -->
      <div class="background bcmBlueDivBorder bcmPanel" style="margin-top: 20px; width: 88%; max-height: 373px; overflow-y: scroll">
        <span class="bcmLable">Disaster Type and Details</span>
        <span style="color: red;" *ngIf="viewMode">*</span>
        <span style="font-weight: bold;">:</span>
        <!-- fainted div for actual disaster details start -->
        <!-- repeating div start -->
        <div *ngFor="let d of disasterlist">
          <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"> of 100 </span>
              <span style="font-weight: bold;" class="bcmLable"><span>Disaster Type</span></span>
              <span style="font-weight: bold;"></span>
              <span style="font-weight: bold;"></span>
            </div>
            <!-- 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]="!isEditing" onkeypress="return isNumberKey(event)" maxlength="2" onpaste="return false" style="width: 36px; margin-left: 1px; margin-top: 2px;" [(ngModel)]="ds.basePeriod">
            </div>
            <!-- Base Period (in Years): Type end -->
            <!-- Disaster 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"> of 200 </span>
              <textarea [disabled]="!isEditing" 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 style="background-color: #B9CDE5; height: 12px"></div>
          <!-- gap div -->
          <!-- fainted div for actual disaster details end -->
          <div style="float: right; margin-top: -70px; margin-right: 7px;"> </div>
        </div>
        <!-- repeating div end -->
        <div style="margin-top: 15px; margin-left: 16px;">
          <button type="submit" class="submitButton" (click)="warningPopup()">
            <span>Submit</span>
          </button>
          <a class="bcmLink" style="cursor: pointer; font-size: 16px; margin-right: 388px; margin-left: 10px; text-decoration: