Using Computed Property Names in Angular

Computed property names can come in handy when you have complicated properties

Photo by Clément H on Unsplash

In most Angular projects, you will find that form property keys are not enclosed in quotes, simply because Typescript and or JavaScript allow for this.

For example, to create a form with two input elements, you will have two properties accordingly and the component code would look like this :

export class ProfileEditorComponent { 
   profileForm = new FormGroup({ 
   firstName: new FormControl(‘’), 
   lastName: new FormControl(‘’), 
   });
}

Note that the firstName and lastName property keys are not quoted and this works just fine. The aforementioned property keys could have equally been enclosed in quotes and this would also work.

At this point you might be wondering, why then would I ever want to enclose my property keys in quotes if they work just fine without them? You are right, but in some cases, you just have to use quotes on your property key(s).

What would you do if you had a property that had some strange character in it? For example, a vertical bar or pipe character.Take this property key, for example: firstName|Suffix . In this case, you just have to use quotes on your property key, and the code would look…