CODEWITHSUNDEEP
angulartypescript
code1
code1

Reputation: 9029

How to get value of a textbox inside a div using typescript?

I have my html like this.

<div id="series1">
    <div class="col-md-6">
        <label for="Mark">Mark</label>
        <input type="text" id="mark" class="shortTextbox" (blur)="signalSelected('mark')" />
    </div>
</div>

I want to get the value of mark value entered in the text box. This html code repeats for me on a button click. Every time the button is clicked id changes to series2 and series3 and so on.

Currently in typescript file I am taking value like

var val = (<HTMLInputElement>document.getElementById(selection)).value

But this won't give me the value selected for the respective series id. Can you please provide how to get the mark value based on id(series1, series2)...

Upvotes: 1

Views: 9262

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658037

You can use ngModel

<input type="text" [(ngModel)]="myFieldInComponentClass"

If you have a field myFieldInComponentClass like

class MyComponent {
  myFieldInComponentClass:String;

this field will have the value assigned whenever the value in the input changes (and also the other way around).

You can make it a getter/setter to execute code on change

  private _myFieldInComponentClass:String;
  set myFieldInComponentClass(value :String) {
    this._myFieldInComponentClass = value;
    // other code
  }
  get myFieldInComponentClass() {
    return this._myFieldInComponentClass;
  }

Upvotes: 0

Dawlatzai Ghousi
Dawlatzai Ghousi

Reputation: 3978

Just add [(ngModel)]="mark" in your input field and a name, your html component may look like this:

<div id="series1">
     <div class="col-md-6">
         <label for="Mark">Mark</label>
          <input type="text" id="mark" class="shortTextbox" [(ngModel)]="mark" (blur)="signalSelected('Mark')" name="mark" />
      </div>
</div>

and in your component.ts define a variable and then get it is value like this:

...
mark: string;

signalSelected (markVal: string){
    markVal = this.mark
    console.log(markVal); // it is the value
}

Upvotes: 1

Related Questions