Angular custom ngIf directive 'as' syntax

It's about microsyntax of Angular structural directives (https://angular.io/guide/structural-directives#microsyntax)

If you want you context to be exported through as syntax you should use exactly the same name which your directive has when exporting it, i.e.

this.viewContainerRef.createEmbeddedView(this.templateRef, {myCustomDirective: this.context})

You can also use $implicit syntax - this will allow you to export context through let variable without naming it (default export).

See this example for the details.

Updated answer: You can copy and paste NgIf directive from Angular github and the only thing you have to do is to change name of NgIfContext#ngIf to match your custom if directive name, for example:

export class NgIfContext {
  public $implicit: any = null;
  public appCustomIf: any = null;
}

Then change names of all Input() respectively to also match your directive name. With this, as keyword will work. See StackBlitz demo.

EDIT: As a additional reference you can follow these commits in #15025 pull request to see how they implemented as keyword in NgIf and NgForOf. In short:

1. In a63d57f they added as keyword to parser.
2. In 203ee65 and ef93998 they converted NgIf and NgForOf respectively to use as syntax.
3. Finally in 71d43db they exposed NgForOfContext,NgIfContext and made NgForOf to use NgForOfContext.

Also if you are curious you can see how they implemented let in NgIf by following #13297 pull request.

This can help you understand what is going on underneath.

---

Original answer: If you don't really care about as syntax and you only need working template variable this will do the job.

*appCustomIf="test$ | async; let result"

Works with copied and pasted ngIf from Angular github. See StackBlitz demo.