Angular 2 - Get input value

Question

I'm learning Angular 2. For that I'm trying to get the value of an input in the click of a button.

This is my code:

import { Component, Input } from '@angular/core'
import Card from './card.component'
import CardTitle from './cardTitle.component'
import Icon from './icon.component'
import CardDescription from './cardDescription.component'

@Component({
  selector: 'jsonTextInput',
  templateUrl: '../templates/jsonTextInput.html',
  directives: [Card, CardTitle, CardDescription, Icon]
})

export class JsonTextInput {
  @Input() ngModel: any;

  process () {
    console.log(this.ngModel)
    alert(1);
  }
}

and in the template:

<card class='jsonTextInput'>
  <cardtitle
    title='Enter your raw json'
  >
    <icon (click)='process()' name='tick'></icon>
  </cardtitle>
  <carddescription>Write or paste your json here, and press Process to start navigating</carddescription>
  <section class='content'>
    <textarea #json [(ngModel)]="json"></textarea>
  </section>
</card>

The process is being runned correctly. But the console.log return undefined.

Any idea of how can I read the value of a input on the click of the button?

Answer 1

Maybe you aren't using correctly the inputs and other things, let me explain you.

The inputs are using for inject data into the components in attributes form, like this:

<jsonTextInput [my-input]="'this is a text :D'"></jsonTextInput>

You can get that data in your component like this:

import { Component, Input } from '@angular/core'
import Card from './card.component'
import CardTitle from './cardTitle.component'
import Icon from './icon.component'
import CardDescription from './cardDescription.component'

@Component({
  selector: 'jsonTextInput',
  templateUrl: '../templates/jsonTextInput.html',
  directives: [Card, CardTitle, CardDescription, Icon]
})

export class JsonTextInput {
  @Input('my-input') myInput: any;         //Here es saved: "this is a text :D"
  json:String = "Hi i'm a message";        //You must declarate all models in the component

  process () {
    console.log(this.myInput); //this print: "this is a text :D"
    alert(1);
  }
}

Now, for print the text in the textarea is like this:

  process () {
    console.log(this.json); //this print: "Hi i'm a message"
    alert(1);
  }

Your template must be like this:

<card class='jsonTextInput'>
  <cardtitle
    title='Enter your raw json'
  >
    <icon (click)='process()' name='tick'></icon>
  </cardtitle>
  <carddescription>Write or paste your json here, and press Process to start navigating</carddescription>
  <section class='content'>
    <textarea [(ngModel)]="json"></textarea><!-- You only need #json if you are working whit forms -->
  </section>
</card>

That it's all.

Answer 2

I'll post this as an answer rather than just a comment.

Inside your class add a local var:

json:string = ''; // This will set the textarea blank.

Inside your process function change:

console.log(this.ngModel);

To

console.log(this.json);

Serve your page, enter text in the textarea, click the button, voila!!! logged

Steve