The structural directive type check docs section is incomplete

[ArielGueta]

The following docs section is incomplete:

https://angular.io/guide/structural-directives#directive-type-checks

export type Loaded = { type: 'loaded', data: T };
export type Loading = { type: 'loading' };
export type LoadingState = Loaded | Loading;
export class IfLoadedDirective {
    @Input('ifLoaded') set state(state: LoadingState) {}
    static ngTemplateGuard_state(dir: IfLoadedDirective, expr: LoadingState): expr is Loaded { return true; };
}

export interface Person {
  name: string;
}

@Component({
  template: `<div *ifLoaded="state">{{ state.data }}</div>`,
})
export class AppComponent {
  state: LoadingState;
}

The type guard allows the type checker to infer that the acceptable type of state within the template is a Loaded, and further infer that T must be an instance of Person.

• Where is T comes from?
• How do we use the Person interface?
• The directive decorator is missing.

[JoostK]

The fact that T and the usage of Person is missing appears to be a rendering issue; it is authored as expected in the source:

angular/aio/content/guide/structural-directives.md

Lines 876 to 893 in d067dc0

	export type Loaded<T> = { type: 'loaded', data: T };
	export type Loading = { type: 'loading' };
	export type LoadingState<T> = Loaded<T> | Loading;
	export class IfLoadedDirective<T> {
	@Input('ifLoaded') set state(state: LoadingState<T>) {}
	static ngTemplateGuard_state<T>(dir: IfLoadedDirective<T>, expr: LoadingState<T>): expr is Loaded<T> { return true; };
	}
	export interface Person {
	name: string;
	}
	@Component({
	template: `&lt;div *ifLoaded="state">{{ state.data }}&lt;/div>`,
	})
	export class AppComponent {
	state: LoadingState<Person>;
	}

I suspect that the angle brackets need to be converted into html entities.

[gkalpak]

Yes, the brackets need to be HTML-escaped.

Yet another case where hard-coded code snippets don't serve us well 😛
Ideally we should convert these to doc-regions.

[petebacondarwin]

👍 to doc regions. Of course if the code was in backticks then the code would be escaped but not in code-example tags.

[ArielGueta]

Thanks. I don't know if it's the right place, but it doesn't seems to work. I copied the code from the example and this is result:

The fullTemplateTypeCheck is set to true, and I'm using Ivy.

[JoostK]

You'll want to usestrictTemplates set to true instead of fullTemplateTypeCheck.

[iftee-hussain]

If anyone is already not working on it, I can give it a try to create a PR converting these to doc-regions

[iftee-hussain]

This is not working https://stackblitz.com/edit/angular-bwvsh3
Am I missing something?

[JoostK]

This is not working https://stackblitz.com/edit/angular-bwvsh3
Am I missing something?

The example in the docs is only concerning the type-check capabilities of the directive, its actual runtime implementation of rendering its template when in the loaded state is not included (so in your StackBlitz nothing actually happens). Also note that the ngTemplateContextGuard function is never executed at runtime: its sole purpose is to provide a TypeScript signature to model the type narrowing behavior of the directive; this explains why the console.log inside that static method is not logged in StackBlitz.

[ArielGueta]

@JoostK switched to strictTemplates and still the same:

[mariusgau]

This is not working https://stackblitz.com/edit/angular-bwvsh3
Am I missing something?

The example in the docs is only concerning the type-check capabilities of the directive, its actual runtime implementation of rendering its template when in the loaded state is not included (so in your StackBlitz nothing actually happens). Also note that the ngTemplateContextGuard function is never executed at runtime: its sole purpose is to provide a TypeScript signature to model the type narrowing behavior of the directive; this explains why the console.log inside that static method is not logged in StackBlitz.

I want to help and create a PR. @JoostK the documentation (https://angular.io/guide/structural-directives#directive-type-checks) says

The IfLoadedDirective definition declares the static field ngTemplateGuard_state, which expresses the narrowing behavior. Within the AppComponent template, the *ifLoaded structural directive should render this template only when state is actually Loaded|Person|.

So I don't understand why ist <div *ifLoaded="loading">Loading...</div> rendered in @iftee-hussain example when loading: Loading (https://stackblitz.com/edit/angular-bwvsh3)

[DMezhenskyi]

Thanks. I don't know if it's the right place, but it doesn't seems to work. I copied the code from the example and this is result:

The fullTemplateTypeCheck is set to true, and I'm using Ivy.

Hi @ArielGueta!
Did you try to change static ngTemplateGuard_state to static ngTemplateGuard_ifLoaded?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}