Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular custom ngIf directive 'as' syntax

I'm creating a custom *ngIf directive to replace content with a placeholder while it's loading. I have everything working as I want and modeled it after the *ngIf directive (https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts) The only thing not working is the 'as' syntax and I don't see any references to it or where to start.

*myCustomDirective="loading$ | async as result" 

The above does not work, result is undefined when the loading$ observable emits data. The placeholder is shown and replaced with the content as expected however. (Content is giving errors though because of the undefined result)

like image 645
that_guy Avatar asked Mar 01 '19 16:03

that_guy


People also ask

Can we create custom structural directive in Angular?

Import Input, TemplateRef, and ViewContainerRef from @angular/core. To create a custom directive, we need a few elements: Input: This decorator is used to communicate between two components. Here, it allows the data to be input into the directive from the parent component.

What is * in * ngIf in Angular?

A shorthand form of the directive, *ngIf="condition" , is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.

Is NgSwitch a structural directive?

[ngSwitch] is an attribute directive used in combination with *ngSwitchCase and *ngSwitchDefault that are both structural directives. NgSwitch — an attribute directive that changes the behavior of its companion directives.

Where can be * ngIf directive applied?

There's an easy solution for this use case: put the *ngIf on a container element that wraps the *ngFor element. One or both elements can be an <ng-container> so that no extra DOM elements are generated.


1 Answers

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.

like image 95
Bardr Avatar answered Sep 21 '22 01:09

Bardr