Is it possible to use angular directive as html tag?

Question

I am currently working with angular material tree module and in the demo source code https://github.com/angular/material2/blob/tree/src/demo-app/tree/tree-demo.html:

• mat-tree-node directive is used as custom html tag: what does that mean?

• *matTreeNodeDef="let node" : what does the let node expression exactly?

  Flattened tree

  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger matTreeNodePadding>
        {{node.key}} : {{node.value}}
    </mat-tree-node>
  
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
        <mat-icon matTreeNodeTrigger>
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
        {{node.key}} : {{node.value}}
    </mat-tree-node>
  </mat-tree>
  

Answer 1

mat-tree-node directive is used as custom html tag: what does that mean?

All directives are sorta "custom HTML tags". The HTML you write for Angular templates is not HTML at all, it just purposely looks like it. It's Angular's own template syntax that Angular uses to build the DOM instead of you (which is why you're using framework in the first place).

Directives' selectors are specified via a (kinda) CSS selector. A directive's selector can be foo, [foo] or foo[bar]. This is just like you write in your stylesheets div, [lang=en] or input[required]. <foo> in template will be matched for the first selector, as well as <foo baz>. <div foo> will be matched for the second selector, as well as <p foo>. For the third one, you need to have both element name set to foo and an attribute bar, meaning that <foo bar> will match. Directives do not have to have attributive selectors.

*matTreeNodeDef="let node" : what does the let node expression exactly?

The star is just syntax sugar for a more verbose way to write the same thing. It's usually explain through *ngFor.

The following snippet...

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

...is just a pretty way to write this:

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

Each template has a context attached to it. You can think of templates as functions and contexts as arguments to those functions. When you use ngFor, Angular creates a context variable that you can access via keyword let. In terms of ngFor, it's different for each iteration of the loop: it's the current item from the array passed to ngForOf.

You access this default context variable by using *ngFor="let item" (or ngFor let-item in desugared variant). This is a variable that it useful for you to render that piece of template (a li in an unordered list, for example). It's Angular's telling you "hey, this piece of data might be useful to you in order to render something; I'll live it here so you can use it".

There are other context variables in ngFor: for example, even. It's boolean variable that tells you if the current iteration has even index or not. Angular is giving it to you and you can use it by *ngFor="let item; let e = even" (or, in desuraged form, ngFor let-item let-e="even"). These non-default context variables have names; this one is named even. We told Angular "hey, I wanna use this even and I wanna call it e in my template".

It's the same thing with your example. let node is telling Angular "hey, give me the default context so I can use it in my template; I'll call it node". Now whatever node is is up to the implementation of the component, but it's probably something really useful since it's part of the context.