connect-admin/src/app/pages/helpcontent/page-help-content-form.component.html

<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 [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<div class="uk-alert uk-alert-primary uk-margin-top-large">
     <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
    Create or edit help text
    <div class="uk-text-small">
      Select the page to be displayed, select position of the page
    </div>

  </div>
<form  *ngIf="!errorMessage && !showLoading" [formGroup]="myForm">
    <div *ngIf="!pageId" class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}">
        <label for="pageTag">Select Page</label>
        <select formControlName="page" id="pageTag" class="form-control">
            <option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>
        </select>
    </div>
    <div *ngIf="myForm.controls.page.value" class="form-group" [ngClass]="{'has-error':!myForm.controls.placement.valid && myForm.controls.placement.dirty}">
        <label for="placementTag">Select Placement</label>
        <select formControlName="placement" id="placementTag" class="form-control">
            <option *ngIf="placements.top" [value]="'top'">Top</option>
            <option *ngIf="placements.left" [value]="'left'">Left</option>
            <option *ngIf="placements.right" [value]="'right'">Right</option>
            <option *ngIf="placements.bottom" [value]="'bottom'">Bottom</option>
        </select>
    </div>
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">
        <label>Content</label>
        <div>
<!-- [config]="{allowedContent: 'p(*); h; div; span'}"-->
<!-- [config]="{allowedContent: true,extraAllowedContent : '*(*)'}" -->
<!-- [config]="{allowedContent: true, disallowedContent:'script; *[on*]'}" -->
<!-- [config]="{ allowedContent: '{
            elements: dtd,
            attributes: true,
            styles: true,
            classes: true
          }',
            disallowedContent:'script; *[on*]'}" -->
            <ckeditor
                    [readOnly]="false"
                    debounce="500"
                    formControlName="content"
                    [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
                                extraPlugins: 'divarea'}">
                <!--id="contentTag"-->
                <!--(ready)="onReady($event)"-->
                <!--(focus)="onFocus($event)"-->
                <!--[config]="{uiColor: '#99000'}"-->
                <!--(blur)="onBlur($event)"-->
                <!--(change)="onChange($event)"-->
            </ckeditor>
        </div>

        <!--<textarea class="form-control" formControlName="content" id="contentTag" placeholder="Content" rows="3"></textarea>-->
    </div>
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.order.valid && myForm.controls.order.dirty}">
        <label for="orderTag">Order</label>
        <input type="number" step="1" class="form-control" formControlName="order" id="orderTag" placeholder="Order (e.g. 2)">
    </div>
    <!--<div class="form-group">
        <label>Help text before existing content</label>
        <label class="checkbox">
            <span class="uk-margin-small-right" style="font-weight: normal;">Before</span>
            <input tabindex="0" type="checkbox" formControlName="isPriorTo">
        </label>
    </div>-->
    <div class="form-group">
        <label>Select Status</label>
        <label class="checkbox">
            <span class="uk-margin-small-right" style="font-weight: normal;">Active</span>
            <input tabindex="0" type="checkbox" formControlName="isActive">

        </label>
    </div>
    <input type="hidden" formControlName="_id">
</form>
<!--<pre>-->
<!--{{myForm.value | json}}-->
    <!--{{myForm.valid}}-->
<!--</pre>-->