Converting AngularJS $q to JavaScript Promise

Since I had to upgrade my app from AngularJS to Angular, I would also need to change my promise returned codes. I needed to change all of my codes that were using $q AngularJS service to the new JavaScript Promise.
These codes:

getItems = function () {
  var deferred = $q.defer();

  try {
   . . .
   deferred.resolve(itemsToBeReturned);
  }
  catch(error) {
   . . .
   deferred.reject(error);
  }
  
  return deferred.promise;
};

are converted into:

getItems() {
 return new Promise((resolve, reject) => {
   try {
    . . .
    resolve(itemsToBeReturned);
   }
   catch(error) {
    . . .
    reject(error);
   }
 });
};

The consuming function can remain the same:

this.getItems()
 .then((items) => {
  // success
  . . .
 })
 .catch(error => {
  // error
  . . .
 });

The new JavaScript Promise also allowed the promises returned to be chained:

getItems() {
 return new Promise((resolve, reject) => {
  this.doSomething()
   .then((rs) => {
    . . .
    return Promise.resolve(123); 
   })
   .then((rs) => {
    . . .
    return 456;   // this returns a promise as well
   })
   .then((rs) => { 
    . . .
    resolve(result); 
   })
   .catch(error => reject(error));
 });
};

Reference:
Promise - TypeScript Deep Dive

Easy Way to Highlight Invalid Fields in Submitted Angular Form

Here is one way to highlight invalid input fields after submitting a form in Angular (Template Driven Form approach) to help user quickly seeing the invalid input fields.

First we create a variable to indicate whether the form has been submitted or not:

export class PropertyPage {
    isSubmitted: boolean;

    constructor() {
        this.isSubmitted = false;
        . . .
    }
 
    addPropertyDetails(form: NgForm) {
        this.isSubmitted = true;
        . . .
        if (form.valid) {
            . . .
        }  
    }
}

Then use this variable to assign a CSS class to the form using ngClass:

<form #propertyDetailsForm="ngForm" (ngSubmit)="addPropertyDetails(propertyDetailsForm)" [ngClass]="{'submitted': isSubmitted}">
    . . .
</form>

Finally, add the style in the page stylesheet. By default, invalid input field will be assigned ng-invalid class by Angular.

.submitted input.ng-invalid {
    border: 1px solid #f00;
}