Using Getters and Setters in TypeScript and Angular

Common things about Getters and Setters in TypeScript and using them with Input decorator in Angular

Photo by Liz Sanchez-Vegas on Unsplash

Getters and setters are a well known pattern that is used in different languages. In this article, I want to help you to understand getters and setters by examples in TypeScript. And see how it could be useful in angular app.

At first make a small trip to TypeScript.

Getters and Setters in TypeScript

Let’s imagine we have a simple class product with properties: price, name, serialNumber.

Here we have one private property price and two public properties name and serial number. And we decide to create a new instance of product class — a car. As you could see on picture below, we could access any public properties of Product class, but not to the private one. Price property is only accessible from Product class, but not outside.

To solve this problem we could use getters and setters. Getters and Setters are well-known pattern in almost all languages. They help you to add additional logic to your properties as we will see above.

So, let’s make our price property private and add getter and setter to them.

Syntax is very simple, right? Now we call not a private property, but getter with the same name and getter return a value of the private property. But according to these changes, now we had access to price property value from our car instance.

Besides that, now we could add extra logic to the set method, just near value assignment. For example — check price value before assigning the value and many more complex logics.

Getters and Setters in Angular

In Angular getters and setters are often used like one of the ways to Intercept input property changes. For example, we have two components. products as a parent component and product as a child component with two inputs (price, name).

So, every time we have an input value, the setter is triggered and as we did above, we could add some additional logic to our setter. But there are some restrictions on using extra logic in input setter:

1. Don’t use side effects in setters.
2. Don’t use subscription in setters.
3. Don’t use changeDetector.detectChanges(). If it’s really necessary, for example you call a method in the setter that toggle some properties that using in ngStyle attribute or using like css variables, it’s better to choose changeDetector.markForCheck(). Angular doesn’t accept detectChanges in input and could cause console errors and performance problems.

4. This is often the situation if you are passing a non-primitive object down to a child component, with a change in one of the nested properties. This would preserve reference to the object. If you are configuring your component with OnPush change detection you could find that inputs would not be triggered because of modification absence to the underlying object reference. You’ll often experience this trouble with hard-coded values, those that don’t come from asynchronous streams such as an Observable.

If you are using Angular’s default change detection mechanism, direct object mutation would be allowed, and therefore changes to an object without providing a new reference would be detected.

But, if you are applying not default change detection — just using Observable and async pipe is your way!

Thanks for reading! Here i’ve tried to describe common principles of getters and setters in TypeScript and some useful tips to use them in Angular app. Hope the article was helpful for you, see you in my next posts.