Angular structural directive context template type checking

I can't seem to make angular template autocomplete work, can anyone help me out understanding what am I missing or doing wrong?

<div *ngVar="ok as xd">
    <!-- xd is not giving any autocomplete / typecheck, hover giving "any" type -->
    {{ xd.item }}
</div>

I pretty much went on the ngIf and async pipe source code trying to understand what was going on and made this simple directive just to facilitate my life with async subscriptions (which are kind of a pain with the ngIf.
Not having type safety is equally a pain tho x)

type NgVarContext<T> = { ngVar: T; $implicit: undefined };

@Directive({
    selector: "[ngVar]",
})
export class NgVar<T> {
    context: NgVarContext<T> = { ngVar: undefined, $implicit: undefined };
    _subscription: Subscription;

    constructor(
        private cdr: ChangeDetectorRef,
        template: TemplateRef<NgVarContext<T>>,
        viewContainer: ViewContainerRef
    ) {
        viewContainer.createEmbeddedView(template, this.context);
    }

    @Input()
    set ngVar(input: Observable<T>) {
        if (this._subscription) return;
        this._subscription = input.subscribe((item) => {
            if (item !== this.context.ngVar) {
                this.context.ngVar = item;
                this.cdr.markForCheck();
            }
        });
    }

    static ngTemplateGuard_ngVar: "binding";

    static ngTemplateContextGuard<T>(dir: NgVar<T>, ctx: NgVarContext<T>): ctx is NgVarContext<T> {
        return true;
    }
}