How to type check Angular Directive input assignment types in templates?

Question

I am using Angular 9 and have following Angular directive :

export type MyDirectiveValue = "foo"|"bar"; 
@Directive({
    selector: '[myDirective]'
})
export class MyDirective implements OnInit {
    @Input("myDirective") value: MyDirectiveValue;
    
    ngOnInit() {
        console.log(this.value);
    }
}

When I use it in my template :

<div *myDirective="'invalid-value'">Hello</div>

I would have expected Ivy to detect that invalid-value is not assignable to type MyDirectiveValue but it's not, I can freely assign any value without getting any template compilation failure.

Any idea ?

I think this may help: angular.io/guide/template-typecheck check out fullTemplateTypeCheck — Faustyn Piechowiak
– Faustyn Piechowiak, Commented Feb 19, 2021 at 21:26
@FaustynPiechowiak fullTemplateTypeCheck was already set to true in my case, but the documentation was helpful as when I introduced strictTemplates: true it fixed my issues, thanks a lot. BTW, if you want to propose the answer, I may accept if to share some kudos ;-) — Frédéric Camblor
– Frédéric Camblor, Commented Feb 19, 2021 at 21:46

Vahid · Accepted Answer · 2021-09-05 10:14:06Z

2

Please check out documentation: https://angular.io/guide/template-typecheck

Especially this part:

Strict mode

Strict mode is a superset of full mode, and is accessed by setting the strictTemplates flag to true. This flag supersedes the fullTemplateTypeCheck flag. In strict mode, Angular version 9 adds checks that go beyond the version 8 type-checker. Note that strict mode is only available if using Ivy.

edited Sep 5, 2021 at 10:14

Vahid

7,7075 gold badges47 silver badges68 bronze badges

answered Feb 21, 2021 at 10:04

Faustyn Piechowiak

2281 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to type check Angular Directive input assignment types in templates?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related