Sometimes you need an element to hang e.g. an *ngIf directive on, but you don\u2019t want the element to appear in the markup.<\/p>\n
In the following example, we end up with an extra unwanted <div> level just because we needed to hang the *ngIf somewhere (noting that it is not permissible to have the *ngIf on the same element as the *ngFor).<\/p>\n
\n<div *ngFor=\"let place of places.rows\">\r\n <div *ngIf=\"place.doc.type == 'place'\">\r\n <span>{{place.doc.name}}, <\/span>\r\n <span>{{place.doc.strapline}}<\/span>\r\n <\/div>\r\n<\/div><\/span><\/pre>\n<\/blockquote>\nInstead of a <div> we can use <ng-container>. This does not appear as an element in the markup (but does appear as a comment only) :-<\/p>\n
\n<div *ngFor=\"let place of places.rows\">\r\n <ng-container *ngIf=\"place.doc.type == 'place'\">\r\n <span>{{place.doc.name}}, <\/span>\r\n <span>{{place.doc.strapline}}<\/span>\r\n <\/ng-container>\r\n<\/div><\/span><\/pre>\n<\/blockquote>\nThis is analagous to the <th:block> dummy element in Thymeleaf, which does exactly the same thing.<\/p>\n
This StackOverflow post<\/a> details this issue. This alternative post<\/a> mentions the use of ng-if-start and ng-if-end, but notes that these are undocumented in Angular 2 so may not be fully supported.<\/p>\n