D-Net

<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>

<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>

<div class="uk-alert uk-alert-primary uk-margin-top-large">

    <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>

    Edit html page content

</div>

<form  *ngIf="!errorMessage" [formGroup]="myForm">

    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">

       <!-- uk-tab="connect: #html-tab-content" -->

        <ul id="html-tab" uk-tab>

        <!-- <ul class="uk-subnav uk-subnav-pill" uk-switcher> -->

        <!-- [class]="mode == 'edit' ? 'uk-active' : ''" (click)="mode='edit'" -->

          <li><a>Edit</a></li>

          <!-- [class]="mode == 'preview' ? 'uk-active' : ''" (click)="mode='preview'; myForm.value.content=myeditor.instance.getData();" -->

          <li (click)="myForm.value.content=myeditor.instance.getData();"><a>Preview</a></li>

        </ul>

        <ul id="html-tab-content" class="uk-switcher uk-margin">

          <!-- [class]="mode == 'edit' ? 'uk-active' : ''" -->

          <li>

            <ckeditor

                    #myeditor

                    [readonly]="false"

                    debounce="500"

                    formControlName="content"

                    [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',

                                extraPlugins: 'divarea'}">

            </ckeditor>

          </li>

          <!-- [class]="mode == 'preview' ? 'uk-active' : ''" -->

          <li>

            <pre [innerHTML]="myForm.value.content | safeHtml"></pre>

          </li>

        </ul>

    </div>

    <input type="hidden" formControlName="_id">

</form>