使用Angular Material 2在文本区域中查找选定的文本

Question

How do you find the selected text in a textarea in an Angular Material 2 input component? I need to create a directive for it.

Answer 1

Handle the select event of your input:

<md-input-container>
  <input mdInput placeholder="Favorite food" value="Sushi" (select)="selectionchange($event)">
</md-input-container>

Then, use the approach from the jQuery: get input selection range thread to get the selected text:

selectionchange(ev:any) {
  const start = ev.target.selectionStart;
  const end = ev.target.selectionEnd;
  console.log(ev.target.value.substr(start, end - start))
}

See the plunk that illustrates this.