Cacher is the code snippet organizer for pro developers

@Component({
  selector: 'textarea-expanded',
  template: `
    <div contenteditable="true"
         #textarea
         tabindex="1"
         (input)="change($event)"
         role="textarea"></div>
  `,
  styles: [`...`]
})
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 ) {
    // Angular does not know that the value has changed 
    // from our component, so we need to update her with the new value.
    this.onChange($event.target.textContent);
  }

}