Angular tips

 <!-- If user is loaded show the form, else show the loading template -->

<form
  *ngIf="user | async; else loading"
  [formGroup]="form"
  (ngSubmit)="submit()">
  <label for="firstname">First Name</label>
  <input id="firstname" formControlName="firstName" />
  <div
    *ngIf="form.controls.firstName.errors?.required &&
 form.controls.firstName.touched"
    class="error"  >
    *Required
  </div>

  <label for="lastname">Last Name</label>
  <input id="lastname" formControlName="lastName" />
  <div
    *ngIf="form.controls.lastName.errors?.required 
&& form.controls.lastName.touched"
    class="error"
  >
    *Required
  </div>

  <label for="about">About</label>
  <textarea id="about" formControlName="about"></textarea>

  <button [disabled]="!form.valid">Save Profile</button>
</form>

<ng-template #loading>
  Loading User...
</ng-template>

localstorage

this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');

 <div>
      <h2>Angular multi checkboxes</h2>
      
      <b>Template</b>
      <checkbox-group [(ngModel)]="selectedItems">
        <checkbox value="item1">Item 1</checkbox>
        <checkbox value="item2">Item 2</checkbox>
        <checkbox value="item3">Item 3</checkbox>
        <checkbox value="item4">Item 4</checkbox>
      </checkbox-group>
      <p>Selected items - {{selectedItems | json}}</p>
      
      <b>Reactive</b>
      <form [formGroup]="form" novalidate> 
        <checkbox-group formControlName="items">
          <checkbox value="item1">Item 1</checkbox>
          <checkbox value="item2">Item 2</checkbox>
          <checkbox value="item3">Item 3</checkbox>
          <checkbox value="item4">Item 4</checkbox>
        </checkbox-group>
      </form>
      <button (click)="form.reset()">Reset</button>
      <p>Form - {{form.value | json}}</p>
    </div>