argos/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html

<p-panel *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="section-component" [toggleable]="true">
    <p-header>
        <div class="ui-helper-clearfix">
            <h2>{{path}} {{section.title}}</h2>
        </div>
    </p-header>

    <div [id]="section.id" [formGroup]="form">
        <h3 *ngIf="section.description">{{section.description}}</h3>
        <h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
        <div *ngIf="section.fieldGroups">
            <div *ngFor="let group of section.fieldGroups; let j = index;">
                <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
            </div>
        </div>
        <div *ngIf="section.sections">
            <div *ngFor="let itemsection of section.sections; let j = index;">
                <df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></df-section>
            </div>
        </div>
    </div>
</p-panel>