edit-instance.component.html

<div class="container-fluid">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a routerLink="/admin/instance-list">Instances</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit instance {{ (instance | async).name }}</li>
        </ol>
    </nav>
</div>

<div class="container">
    <div class="row">
        <div class="col-12">
            <app-instance-form 
                [instance]="instance | async"
                [rootDirectory]="rootDirectory | async"
                [rootDirectoryIsLoading]="rootDirectoryIsLoading | async"
                [rootDirectoryIsLoaded]="rootDirectoryIsLoaded | async"
                (loadRootDirectory)="loadRootDirectory($event)"
                (onSubmit)="editInstance($event)"
                #formInstance>
                <button [disabled]="!formInstance.form.valid || formInstance.form.pristine" type="submit" class="btn btn-primary">
                    <span class="fa fa-database"></span> Update instance information
                </button>
                &nbsp;
                <a routerLink="/admin/instance-list" class="btn btn-danger">Cancel</a>
            </app-instance-form>
        </div>
    </div>
</div>