Skip to content

Commit c8c68dd

Browse files
committed
Add ng-container question
1 parent 3f9fbff commit c8c68dd

File tree

1 file changed

+21
-2
lines changed

1 file changed

+21
-2
lines changed

README.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@
274274
|266| [What are the types of validator functions?](#what-are-the-types-of-validator-functions)|
275275
|267| [Can you give an example of built-in validators?](#can-you-give-an-example-of-built-in-validators)|
276276
|268| [How do you optimize the performance of async validators?](#how-do-you-optimize-the-performance-of-async-validators)|
277-
|269| [](#)|
277+
|269| [How to set ngFor and ngIf on the same element?](#how-to-set-ngfor-and-ngif-on-the-same-element)|
278278
|270| [](#)|
279279
|271| [](#)|
280280
|272| [](#)|
@@ -4314,7 +4314,26 @@
43144314
43154315
**[⬆ Back to Top](#table-of-contents)**
43164316
4317-
269. ### ?
4317+
269. ### How to set ngFor and ngIf on the same element?
4318+
Sometimes you may need to both ngFor and ngIf on the same element but unfortunately you are going to encounter below template error.
4319+
```cmd
4320+
Template parse errors: Can't have multiple template bindings on one element.
4321+
```
4322+
In this case, You need to use either ng-container or ng-template.
4323+
Let's say if you try to loop over the items only when the items are available, the below code throws an error in the browser
4324+
```html
4325+
<ul *ngIf="items" *ngFor="let item of items">
4326+
<li></li>
4327+
</ul>
4328+
```
4329+
and it can be fixed by
4330+
```html
4331+
<ng-container *ngIf="items">
4332+
<ul *ngFor="let item of items">
4333+
<li></li>
4334+
</ul>
4335+
</ng-container>
4336+
```
43184337
43194338
**[⬆ Back to Top](#table-of-contents)**
43204339

0 commit comments

Comments
 (0)