joanllenas / ngx-date-fns

⏳ date-fns pipes for Angular
163 stars 14 forks source link

Support `strictTemplates` / All pipes should accept null and undefined #347

Closed MickL closed 3 years ago

MickL commented 3 years ago

With Angular strict mode all inputs need to be optional:

export class myComponent implements OnInit {
  @Input() myDate?: number;
}

Or using the async pipe returns null:

<app-my-compontent [myDate]="myDate$ | async"></app-my-component>

But then the compiler is throwing an error with ngx-date-fns pipes, e.g.:

Type 'undefined' is not assignable to type 'DateFnsInputDate'. {{ myDate | dfnsFormat: 'dd.MM.yyyy'}}

I would suggest to add strict typechecking to tsconfig:

"angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "preserveSymlinks": true
  }

and add a questionmark to all pipe inputs to support undefined and also accept null, e.g. the format pipe:

transform(
    date?: DateFnsInputDate | null,
    ...
  ): string {
    if (!date || isInvalidDate(date)) {
      return '';
    }
    ...
  }
}
joanllenas commented 3 years ago

Hi @MickL , I'll take a look at this during the weekend. Thanks!

MickL commented 3 years ago

I added "null" to the example because when using the async pipe its return type is T | null: {{ (myDate$ | async) | dfnsFormat: 'dd.MM.yyyy'}}

joanllenas commented 3 years ago

@MickL v7.0.2 implements this change.

Note that this has only been implemented for pipes that return a string representation of a date. The rest of the pipes that make calculations with dates are not affected because the input has to be valid.

MickL commented 3 years ago

Awesome :)