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

<div class="ui-g dynamic-formc full-width full-height">
	 <mat-sidenav-container contentClass="scrollableContent">
		<mat-sidenav mode="push" position="right" [(opened)]="visibleSidebar">
			<table-of-content class="toc-container full-height" [model]="datasetProfileDefinitionModel"></table-of-content>
		</mat-sidenav>

		 <mat-sidenav-content class="ui-g">
			<button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
			<button  mat-raised-button color="primary" *ngIf="datasetProfileDefinitionModel&&datasetProfileDefinitionModel.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
			(click)="save();">Save</button>
			<button  mat-raised-button color="primary" *ngIf="datasetProfileDefinitionModel&&datasetProfileDefinitionModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
			 (click)="submit();">Save and Finalize</button>
			<div class="ui-g-12">
				<div class="alignment-center">
					<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
				</div>
			</div>
			<div class="ui-g-12">
				<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
			</div>
			
			<div class="col-md-12 form-body-container" id="form-container">
				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
					<div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;">
						<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1"
						 [pathName]="'sections.'+i"></df-section>
					</div>
				</form>
			</div>
		</mat-sidenav-content>
	 </mat-sidenav-container>
</div>
<p>Form value: {{ form.value | json }}</p>