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:
- In a63d57f they added
as
keyword to parser. - In 203ee65 and ef93998 they converted
NgIf
andNgForOf
respectively to useas
syntax. - Finally in 71d43db they exposed
NgForOfContext
,NgIfContext
and madeNgForOf
to useNgForOfContext
.
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.