@Component({
selector: 'textarea-expanded',
template: `
<div contenteditable="true"
#textarea
tabindex="1"
(input)="change($event)"
role="textarea"></div>
`,
styles: [`
div.disabled {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
`]
})
export class TextareaExpandedComponent implements ControlValueAccessor {
@ViewChild('textarea') textarea;
onChange;
constructor( private renderer : Renderer2) {}
writeValue( value : any ) : void {
const div = this.textarea.nativeElement;
this.renderer.setProperty(div, 'textContent', value);
}
registerOnChange( fn : any ) : void {
this.onChange = fn;
}
change( $event ) {
this.onChange($event.target.textContent);
}
setDisabledState( isDisabled : boolean ) : void {
const div = this.textarea.nativeElement;
const action = isDisabled ? 'addClass' : 'removeClass';
this.renderer[action](div, 'disabled');
}
}