Angular2 template: how to wrap ngFor content using DIV

Question

I have an undefined number of columns and the length of the fields is undefined. To display them there is this code:

<div class="col-md-6" *ngFor="let d of fields">
    <div class="form-group">
        <label>{{ d.displayName }}</label>
        <span>{{ viewRecord[d.fieldName]}}</span>
    </div>
</div

Result:

<div class="col-md-6">
    <div class="form-group">
        <label>Title 1</label>
        <span>Text 1....</span>
    </div>
</div
<div class="col-md-6">
    <div class="form-group">
        <label>Title 2</label>
        <span>Text 2....</span>
    </div>
</div

Is it possible to put these two in one container as follows:

<div class="row">
   <div class="col-md-6">
        <div class="form-group">
            <label>Title 1</label>
            <span>Text 1....</span>
        </div>
    </div
    <div class="col-md-6">
        <div class="form-group">
            <label>Title 2</label>
            <span>Text 2....</span>
        </div>
    </div
</div>

Please note that I do not know the number of fields, so I need to make module 2 from the total number of fields to transfer a pair of fields into one container. Obviously, the shell will be out of cycle. I am stuck:)

Please note that I am looking for an answer with a template . If not, I can handle this. Any JavaScript I can write myself;)

Answer 1

*ngFor, odd even. , even. index .

<div class="row">
    <div *ngFor="let d of fields; let index=index; let odd=odd; let even=even;">
        <div *ngIf="even">
            <div class="form-group" class="col-md-6">
                <label>{{ fields[index].displayName }}</label>
                <span>{{ viewRecord[fields[index].fieldName]}}</span>
            </div>
            <div class="form-group" class="col-md-6">
                <label>{{ fields[index+1].displayName }}</label>
                <span>{{ viewRecord[fields[index+1].fieldName]}}</span>
            </div>
        </div>
    </div>
</div>

( ), .