https://github.com/stephencooper/strictangularcomponents

Code examples for writing Angular Components that are compliant with Typescript strict mode
https://github.com/stephencooper/strictangularcomponents

Last synced: 11 months ago
JSON representation

Code examples for writing Angular Components that are compliant with Typescript strict mode

• Host: GitHub
• URL: https://github.com/stephencooper/strictangularcomponents
• Owner: StephenCooper
• License: mit
• Created: 2022-04-04T19:14:35.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-06-22T18:41:08.000Z (almost 4 years ago)
• Last Synced: 2025-03-11T18:53:13.768Z (over 1 year ago)
• Language: TypeScript
• Size: 9.26 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# StrictAngularComponents

Code examples for writing Angular Components that are compliant with Typescript strict mode. Two sample apps for the approaches described under [Template Type Checking](https://angular.io/guide/template-typecheck#troubleshooting-template-errors).

In both demos you will see compilation errors when running `npm run start` as I have left examples that need fixing following the approaches outlined below.

## Setter Getter Demo

Shows how to use Setters and Getters to perform input coercion now that Typescript 4.3 allows its setters and getters to have different types.

```ts

  @Input()

  get disabled(): boolean {

    return this._disabled;

  }

  set disabled(value: boolean | string) {

    this._disabled = (value === '') || value === true;

  }

```

## ngAcceptInputType Demo

Before Angular 13 and Typescript 4.3 we had to use the static flag `ngAcceptInputType_` to enable input coercion. 

```ts

  @Input()

  public disabled: boolean = false;

  static ngAcceptInputType_disabled: boolean | '';

```