File tree Expand file tree Collapse file tree 1 file changed +21
-2
lines changed Expand file tree Collapse file tree 1 file changed +21
-2
lines changed Original file line number Diff line number Diff line change 274
274
| 266| [ What are the types of validator functions?] ( #what-are-the-types-of-validator-functions ) |
275
275
| 267| [ Can you give an example of built-in validators?] ( #can-you-give-an-example-of-built-in-validators ) |
276
276
| 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 ) |
278
278
| 270| [ ] ( # ) |
279
279
| 271| [ ] ( # ) |
280
280
| 272| [ ] ( # ) |
4314
4314
4315
4315
**[⬆ Back to Top](#table-of-contents)**
4316
4316
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
+ ```
4318
4337
4319
4338
**[⬆ Back to Top](#table-of-contents)**
4320
4339
You can’t perform that action at this time.
0 commit comments