Typescript Like this?

I write this article due to the fact that it's totally possible to use Typescript and provide zero value add for API discovery. Intellisense is the best part of Typescript, without it, we might as well use just the 4 Javascript types and forget using Typescript.

The component is NG-Select. Its main typescript entry is this code Notice that there is zero JSDOC annotation! Sure classes are contained within the package but to have to read only the documentation provided at the site on how to use it, bypasses intellisense.

This is similar to how things were done in 1990, we had books on our desks to read about the API. One other odd thing, is that the @types for NG-Select show zero comments, and all use type of Any. Talking about a liability to the programmer.

Until this all improves, I wouldn't touch this component, if you have any issues with it, it's an immediate deep dive into single stepping through its code to learn what's going on. A total waste of time because after all we're talking about a simple Select and a set of options.

Instead use simple *ngFor binding on the options with a built-in [selected] directive on the options. Say goodbye to deep dives.

Take Away
Before you decide on any Angular component, take a look at it's definitely typed (@types/...) listing. If you see almost nothing there, skip that package.

Closer to the Metal

<div class="TwoCols" >
   <label>City</label>
   <select formControlName="city">
     <option
       *ngFor="let city of address.cities"
       [selected]="city.name == address.city"
       [ngValue]="city"
     >
       {{ city.name }}
     </option>
   </select>
 </div>

Note: Always use FormControls for validation!

Advice

If we are writing a 3rd party component for others, and we want to be successful, then we must pay close attention to how intellisense works on the component. This is only one part of the puzzle, the other part is there needs to be an introduction to the entire package in the readme file as well as an extracted version of the API documentation in the readme.

JWP2020