!: (bang colon) notation in Angular

If you have strictNullChecks on then anything you decorate with @Input will usually complain. For example...

public class MyComponent {

  @Input()
  public myField: string;

  constructor() {}

}

This will lead to TS complaining. This is because myField has not be declared nullable so it should never be set to null or undefined. At the same time, it is not initialized in the constructor, so it will get an initial value of undefined.

Normally, this is fine. We know that Angular will set the value shortly after construction. If we mark the field nullable public myField: string? then we will have to deal with this field may be null errors all over the place when we try and use it.

So, as a compromise, we throw a ! on the field declaration to tell Typescript "I know this looks like it is getting initialized to null/undefined but trust me, I will take care of it".

The exclamation mark ! tells, that the field is non-null non-undefined (see Microsoft's TypeScript documentation).

The colon : is just the separator between field name and type.