Netanel Basal

Starting from version 14, Angular adds the option of setting the page title through the router. We can set the title property in our route definition:

There are times when a dynamic title is needed. For example, we might want to show a todo’s title on a todo page. This can be accomplished by passing an injectable that implements a resolver:

We would also like the company name to appear before each title in the application. Luckily, we can provide a custom title strategy and do it automatically for every route:

Follow me on Medium or Twitter to read more about Angular and JS!

--

--

Dates are an integral part of almost every application. Angular provides a date pipe out-of-the-box. The date pipe allows users to convert dates according to predefined or custom Angular date formats. For example:

Using it today is disadvantageous because we load a bunch of code when we can probably achieve the same functionality natively. The Intl.DateTimeFormat API can be used unless there is a special use-case you need that is only supported by Angular.

Let’s use that as the basis for a date pipe:

It can be customized to meet your needs. It supports timezones, locales, and custom formats, among other features.

--

--

You’ve probably used the as type assertion at least once when working with Typescript. For example:

Type assertions are a way to tell the compiler, “trust me, I know what I’m doing.”

The problem is that it doesn’t do any special data checking. TypeScript assumes that you, the programmer, have performed any special checks that you need.

Now let’s say we need to update our interface and add a new property:

We won’t get any Typescript errors in this case, which can lead to bugs in our application. A safer option is always to type the variable explicitly:

Follow me on Medium or Twitter to read more about Angular and JS!

--

--

In Typescript, Record is a common way to express an object type. For example:

The disadvantage of using a Record in some cases is that you lose the benefit of expressing the meaning of the key. Let’s take the following example:

Looking at this code, I can’t know that the string type inside the memory Record refers to a Lambda’s id.

There are two possible solutions. The first is to use an index signature:

This approach has the advantage that you can choose the property’s name. Consequently, you are limited to using a string, number, or symbol as the type.

The second is to point to the Lambda id type directly:

Now I can understand the relationship in my schema more easily.

Follow me on Medium or Twitter to read more about Angular and JS!

--

--

Netanel Basal

Netanel Basal

A FrontEnd Tech Lead, blogger, and open source maintainer. The founder of ngneat, husband and father.