How to get a text area value in an Angular2 component with material design lite?

Question

I have a materiel design lite page with :

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea name="categoryName" class="mdl-textfield__input" type="text" id="textAddCategory"></textarea>
            <label class="mdl-textfield__label" for="textAddCategory">categoryName</label>
        </div>

I am wondering how I could get the text area value in my component ... Any Idea ?

Answer 1

There are no of ways by using you can get value of textarea, i am using localvariable(#) here.

assuming you want value of textarea on some button click

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <textarea name="categoryName" class="mdl-textfield__input" type="text" id="textAddCategory" #textArea></textarea>
                <label class="mdl-textfield__label" for="textAddCategory">categoryName</label>
<button (click)='valueGetter(textArea.value)'>Submit</button>
            </div>


valueGetter(value){
    console.log(value);
}

Answer 2

Just use Angulars Reactive Forms approach and get the value with:

this.dataForm.get('textarea').value

Where textarea is the formControlName of your textarea and dataForm is the reference name of your FormGroup.

For more information on how to use Reactive Forms visit

https://angular.io/guide/reactive-forms