Hey there, currently I am attempting to implement a text copying feature in Angular 2. I have a function that executes when a button is pressed, fetching data from the database and converting it into readable text, which is then automatically copied to the clipboard.
Everything works smoothly when the copying process is outside the subscribe event. However, when placed inside the subscribe event, nothing is copied to the clipboard.
It turns out that once the event is unsubscribed, the window loses its scope and the clipboard is left empty. I conducted a test in debug mode using var clipboardContent = window.getSelection().toString(); and found out that the content is set correctly within the subscribe event, but disappears as soon as the event concludes.
function getAllUserDetail() {
const selBox = document.createElement('textarea');
this._service.getUserDetails(this.model)
.subscribe(jentries => {
const entryText = jentries;
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = sqlString;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
Although this approach somewhat functions, it does not meet my requirements.
function getAllUserDetail() {
const entryText = 'TEST DATA';
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = sqlString;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
this._service.getUserDetails(this.model)
.subscribe(jentries => { });
}