question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type checking for structural directive without parameter

See original GitHub issue

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

No

Description

Hello, not sure if this is an actual issue or just me misunderstanding behaviour of structural directives in Angular.

Let’s say we have a simple structural directive (see repro). From my point of view, two declarations below should be equal, however, the first one throws type error, while the second one compiles without any errors. Why is that?

<!-- Why this one throws type error -->
<h1 *appUnless>Test</h1>

<!-- And this one not? -->
<ng-template [appUnless]>
  <h1>Test</h1>
</ng-template>

From my point of view, typechecker expects the structural directive without any parameters to be equal to following:

<ng-template [appUnless]="''">
  <h1>Test</h1>
</ng-template>

when in reality, it is equal to code above (I tried to change the type of the directive parameter to boolean | string, and checked if the input setter will be called - it wasn’t).

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-vbzbnj?file=src%2Fapp%2Funless.directive.ts,src%2Fapp%2Fapp.component.html,tsconfig.json,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
alxhubcommented, Jul 8, 2022

Ahh, I see. <div test> - setter called. <ng-template test> - setter called. <div *test> - setter not called.

Very curious. This warrants further investigation - I would expect the last two to behave more or less identically.

3reactions
alxhubcommented, Jul 8, 2022

You’re close - the expanded <h1 *appUnless> is actually wrapped in <ng-template appUnless>. That is, an attribute, not a property ([appUnless]).

I suspect what’s happening here is that in the absence of any other bindings, the template type-checker treats this as an “empty” attribute binding (<ng-template appUnless="">, but the template compiler doesn’t actually generate code to write this value at runtime.

This is interesting! It’s not immediately obvious to me whether it’s the template type-checker or the template compiler at fault here. I suspect the better argument is that the runtime shouldn’t be setting “default” attribute values, so the template type-checker is in the wrong.

Here is a simpler reproduction without the structural directive.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Structural directives - Angular
This guide is about structural directives and provides conceptual information on how such directives work, how Angular interprets their shorthand syntax, ...
Read more >
Directive Type Checking - DEV Community ‍ ‍
The purpose of the article is to show you how to add strict typing to your structural directives and your Angular codebase more...
Read more >
How to Write a Custom Structural Directive in Angular - Part 2
We've covered a simple custom structural directive that implements interface ... enables strict type checking for the template variables ...
Read more >
Type Information in a Structural Directive | by Alexander Zarges
A problem of generic structural directive is that we loose the type information. Unlike our typescript code we can not pass the generic...
Read more >
Structural Directive in Angular - Scaler Topics
How to create a custom structural directive. How to test it? How structural directives can be guarded with type.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found