By using window.getSelection(), we can get the selected text. Here I am just adding little Angular touch to that.
Source Code      DEMO

Markup 

Here on mouseup event, we will show Selected text of the div
<div (mouseup)="showSelectedText()">
  ....
</div>

Script - app.component.ts

Here showSelectedText function code. selectedText variable displays its value
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <h3>Select some text </h3>
  <div (mouseup)="showSelectedText()">
  Do you think that facebook, twitter, linkedin are designed to make people addict ?, Then you have to read this article. The most popular social networking sites are following people's habit. It is not concept, it is people's habit
  </div>
  <br/>
  <h3>Selected Text</h3>
  <div>{{selectedText}}</div>
  `
})
export class AppComponent {
  selectedText: string = '';

  showSelectedText(oField) {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    this.selectedText = text;
  }
}

5 comments:

  1. have being looking for a simple way of doing this for a couple of hours. Thanks for the simple example.

    ReplyDelete
  2. I am doing same things on button click, but its not working. Selection goes out on button click. I don't want to do this process on mouseup key event. please give me any suggestion.

    ReplyDelete
  3. Get the highlighted selected text using angular 2. Highlighted data is used in coding as this image is define everything on the page for https://www.bestwritingservicecanada.com/papersowl-canada-review/. You will be taking it when you think you need for your text and also want to trying to make it best.

    ReplyDelete
  4. เกมยอดนิยมมากมายสามารถเล่นสดได้ในคาสิโนออนไลน์จำนวนมากจากที่ใดก็ได้ทุกเวลา รูเล็ต แบล็กแจ็ก บาคาร่า เป็นเพียงตัวอย่างเล็กๆ ( https://bk8play.net/ ) น้อยๆ ของเกมที่มีให้ในคาสิโนสดส่วนใหญ่ ซึ่งเป็นข่าวดีสำหรับผู้ที่ชื่นชอบเกมบนโต๊ะ เนื่องจากตอนนี้เป็นไปได้สำหรับพวกเขาที่จะได้สัมผัสกับวิธีการเล่นเสมือนจริงที่ต่างไปจากเดิมอย่างสิ้นเชิง

    ReplyDelete
  5. By changing the tone of your writing, a professional passive to active voice changer will enhance the flow of your writing. and you can look here Using Professional Passive to Active Voice Changer tool, you may quickly and effortlessly change your text to add interest and fluidity. You can sound more natural when writing by using this tool.

    ReplyDelete

Blogroll

Popular Posts