Introduction to the structural directives in angular

1. SACHILA RANAWAKA

2. Uncaught Error: Template parse errors:
Can't have multiple template bindings on
one element. Use only one attribute
named 'template' or prefixed with *

3. WHAT IS STRUCTURAL DIRECTIVE?
• shape or reshape the DOM.
• starts with an asterisk(*)
• inbuild structural directives
• *ngIf, *ngFor, ngSwitch

4. How *ngIf works
An asterisk (*) used as syntactic
sugar on the surface, but internally
it desugar it into two parts.

5. First, it takes ngIf and turn it into a
template attribute
ngIf directive moves inside a template
element and ngIf convert itself into
property binding using [ngIf]
How *ngIf works

6. How *ngFor works

7. SO WHY NOT MULTIPLE STRUCTURAL
DIRECTIVES
• If we use both ngIf and ngFor in an element same time how can
we decide which directive takes the control ?
• who should go first? is it ngFor or ngIf. How do we determine
the effect on ngFor will impact on the ngIf or vise-versa

8. SOLUTION
There are no easy answers to these questions. But there is a
workaround though. put the *ngIf on a container element that
wraps the *ngFor element. One or both elements can be a ng-
container so you don't have to introduce extra levels of HTML.

9. NG-CONTAINER
LOGICAL CONTAINER THAT
CAN BE USED TO GROUP
NODES BUT IS NOT
RENDERED IN THE DOM
TREE AS A NODE.