title: Angular 4: How to correctly pass data from component to html
body: <p>I have some trouble understanding a simple task, basically I have a controller like this:</p>
  
  <p><strong>app.componet.ts</strong></p>
  
  <pre><code>import { Component, ViewEncapsulation, Input } from '@angular/core';
  import { Http } from '@angular/http';
  import { FlexLayoutModule } from "@angular/flex-layout";
  import * as io from "socket.io-client";
  var b;
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None,
  })
  
  export class AppComponent {
    freqValue = [2,3];
    myData: Array&lt;any&gt;;
    autoTicks = false;
    invert = false;
    max = 15;
    min = 0;
    showTicks = true;
    step = 1;
    thumbLabel = true;
    vertical = true;
    color = 'primary';
    mode = 'determinate';
    //value = 50;
    socket : any;
    prova : any;
    @Input() valueSlider: number;
  
    constructor(){
      this.socket = io('localhost:3000');
        this.socket.on('value', function(a){
        b = a;
        console.log(a);
        console.log(b);
        this.valueSlider = b;
      });
    }
  }
  </code></pre>
  
  <p>and a page like this:
  <strong>app.component.html</strong></p>
  
  <pre><code>...
    &lt;div fxLayout="row wrap" class="nopad"&gt;
      &lt;md-slider class="example-margin" [disabled]="disabled" [invert]="invert" [max]="max" [min]="min" [step]="step" [thumb-label]="thumbLabel"
        [tick-interval]="tickInterval" [value]="valueSlider" [vertical]="false" fxFlex="100%"&gt;
      &lt;/md-slider&gt;
    &lt;/div&gt;
  ...
  </code></pre>
  
  <p>I'm triyng to pass valueSlider from my TS to the HTML as a property of <code>&lt;md-slider&gt;</code>but without success...does anyone can explain me?
  Thanks</p>