How to get the HTML of selected elements using TypeScript?

Question

I am running an Ionic 2 app with TypeScript and I need to get the HTML of the items, selected by the mouse, when clicking a specific button.

I have tried different solutions, but none of these seemed to work. This is important because I should be able to retrieve an image URL in case an image is included in the selected text.

With my current solution, images are not even shown in the text selection.

How could I make it work in TypeScript? I have tried replacing document.selection to .getSelection() etc, but without any luck.

HTML

test ok <img src="./test.jpg" /> 

When Ok and the image are selected, the output should be

ok <img src="./test.jpg" />

@BenjaminDiaz That's what I'm using now; output is: `ok `. Linebreaks are in there though, such as `\n`, but there are no images to be found nor real HTML. — Kevin Van Ryckegem, Mar 27 '17 at 02:24
[The answer in JS](http://stackoverflow.com/a/4177234/5021993) — Benjamin Diaz, Mar 27 '17 at 02:31
@BenjaminDiaz That's the one I tried, but couldn't get to work in Typescript, it always returned an empty string somehow. — Kevin Van Ryckegem, Mar 27 '17 at 02:36

score 2 · Answer 1 · 2017-03-27T08:55:32.847

I think you are thinking of this in a "jquery way". If you want operations on the image in your component you need to add [] to the attribute that you want to effect.

For example, because you want a dynamic image you need to apply property bindings ,which you can use in you component as a method or a variable. So you can add functionality on the image tag with a method on the src attribute directly

<img [src]="image()" />

And in the component you add

image(){
   // 
}

Or assign it, so that when the action occurs that assigns the image to the image tag then assign it to a variable

<img [src]="imageScr" />
<button ion-button (click)="onImageUpload()"> Add </button>

Component

imageSrc:string = 'http://placehold.it/350x150';

constructor(...){}

onImageUpload(){
    let uploadedImage = // get image stuff here
    this.imageScr = uploadedImage;
}

Without going too much off topic I would suggest that you create an angular reactive form to your input types. This creates a better structure with baked in functionality that helps with most functionality that you need. So instead of a property binding you add a formControlName with your formGroup holding all the form input values.

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

export class ImagePage{
    imageUploadForm: FormGroup;
    imagePattern:string = '(?:([^:/?#]+):)?(?://([^/?#]*))?([^?#]*\.(?:jpg|gif|png))(?:\?([^#]*))?(?:#(.*))?'

    constructor(public navCtrl: NavController, public navParams: NavParams, 
                public formBuilder: FormBuilder ){

      this.imageUploadForm = this.formBuilder.group({ 
          image:['http://placehold.it/350x150',[Validators.required,Validators.pattern(this.imagePattern)]]
          imageName:[''[Validators.required]]
      })
    }
}

And then in your Html

<form [formGroup]="imageUploadForm" novalidate>

   <ion-item>
      <ion-img width="80" height="80" [src]="imageUploadForm.get('image').value"></ion-img>
      <input type="file" name="pic" accept="image/*" formControlName="image">
   </ion-item>
   <ion-item class="item-error" >
      <ion-label *ngIf="imageUploadForm.get('image').errors?.required"> Image is required </ion-label>
      <ion-label *ngIf="imageUploadForm.get('image').errors?.pattern"> Image file must end in .jpg, .png or gif </ion-label>
   </ion-item> 
   ...

So now all the functionality that you want is controlled in the reactive form as a formControl in a formGroup which i think allows for a much greater flexibility as well as a better defined group of code

You can view the official documentation on reactive forms here

How to get the HTML of selected elements using TypeScript?

1 Answers1