CODEWITHSUNDEEP
javascripthtmltypescriptionic2selection
Kevin Van Ryckegem
Kevin Van Ryckegem

Reputation: 1945

How to get the HTML of selected elements using TypeScript?

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

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

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

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

Upvotes: 2

Views: 1412

Answers (1)

user1752532
user1752532

Reputation:

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

Upvotes: 2

Related Questions