Change the style of a word when you click on it?

Question

Angular

It is necessary when clicking on a word in the text, it was highlighted with a frame. I don't know how to do it in Angular2. Does anyone know how to implement this?

Answer 1

HTML

<p style="font-size: 35px; font-weight: 600" onclick="lightSelection()">Изменения стиля слова при нажатии на него?</p>
<p onclick="lightSelection()" style="font-size: 20px; font-weight: 400">
Необходимо при клике на слово в тексте, оно выделялось рамкой. Не знаю как это сделать на Angular2. Может кто-то знает как это реализовать?
</p>

JavaScript

function lightSelection() { // вызов функции при клике
    var userSelection = window.getSelection(); // выделение
      for(var i = 0; i < userSelection.rangeCount; i++) { // получаем местоположение выделеного текста
        highlight(userSelection.getRangeAt(i)); // передаем дальше, в другую функцию
      }
    }
      
function highlight(range) {
      var newNode = document.createElement("span"); // создаем span элемент
         newNode.setAttribute(
            "style",
            "background-color: yellow; display: inline;"
         ); // задаем стили для этого элемента
range.surroundContents(newNode); // https://developer.mozilla.org/ru/docs/Web/API/Range/surroundContents
      }

Live DEMO
highlight text with color: https://e-motiv.github.io/hilitor/example
get text on click: www.javascriptkit.com/javatutors/copytoclipboard.shtml
Ps: Good luck!