title: Set value of hidden element in View and send it to component Angular 2
body: <p>Let's say I have an object, I'm reading the object properties in my view.
  There is a property of the object called <code>role</code>, and I want to send that value from my view to my component, I will need to do some work with that value in my component...</p>
  
  <p>This is my service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class Globals {
      role: string = 'test role';
  }
  </code></pre>
  
  <p>And this is my component:</p>
  
  <pre><code>import { Component } from '@angular/core'    
  import { Globals } from './globals'
  
  @Component({
      selector: 'component2',
      template: `
      &lt;div&gt;          
  &lt;input [(ngModel)]="role"/&gt;
        &lt;button (click)="changedRole()"&gt;apply&lt;/button&gt;
      &lt;/div&gt;`
  })
  export class Component2 {
      private role: string;
  
      constructor(private globals: Globals) {
          this.role = globals.role;
      }
  
      private changedRole() {
          this.globals.role = this.role;
      }
  }
  </code></pre>
  
  <p>Now, there are some things, I'm not interested in display the <code>role</code> value, so it would be better I guess in a hidden input, I've read that ngModel doesn't work with hidden fields, because it's goal is two-way databinding, and in this case I just want to set the value of the input(or any type of tag) with the <code>role</code> value of the object, and send it to the component, I've read that in angular 1 exists ng-value, for only one way data-binding from the view to the component. I'm working with angular 4 and I don't know to deal with this, I've tried something like this: <code>&lt;input [(ngModel)]="role" value="{{myobject.role}}"/&gt;</code> but of course it doesn't works with <code>ngModel</code> how can I send an object's property value from the view to the component?</p>