Add clear input in rich text editor

This commit is contained in:
Konstantinos Triantafyllou 2022-02-08 20:51:40 +02:00
parent 26e10b1299
commit 6cdf560713
2 changed files with 13 additions and 1 deletions

View File

@ -9,6 +9,7 @@
//}
.editor-wrapper {
position: relative;
border: 1px solid transparent !important;
border-radius: 5px;
}
@ -40,6 +41,14 @@
border: 1px solid #f44336 !important;
}
.clear {
position: absolute;
right: 5px;
bottom: 5px;
transform: translate(-50%, -50%);
cursor: pointer;
}
.full-width {
width: 100%;
}

View File

@ -1,5 +1,6 @@
import {Component, Input} from "@angular/core";
import {AngularEditorConfig} from "@kolkov/angular-editor";
import {FormControl} from "@angular/forms";
@Component({
selector: 'rich-text-editor-component',
@ -7,6 +8,7 @@ import {AngularEditorConfig} from "@kolkov/angular-editor";
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
</div>
`,
styleUrls: ['./rich-text-editor.component.scss']
@ -53,6 +55,7 @@ export class RichTextEditorComponent {
]
};
constructor() {
get formInput(): FormControl {
return this.parentFormGroup.get(this.controlName);
}
}