title: Angular material slider cannot show values
body: <p>I want to show to have a slider with angular material library. 
  The goal here is that when i slide to choose the amount of users on a subscription the price dynamically changes when i slide back or forwards.</p>
  
  <p>I can set the values in my ts component but it does not dynamically changes in the html, but i did double binding brackets {{}}. i am a little bit confused why it does not works.</p>
  
  <p><strong>subscriptioncomponent.html</strong></p>
  
  <pre><code>&lt;h1&gt;Subscription&lt;/h1&gt;
  &lt;h5&gt;Choose how much user your account will have&lt;/h5&gt;
  &lt;h5&gt; {{amount}} Euro/month&lt;/h5&gt;
  &lt;h5&gt;{{user}} Users&lt;/h5&gt;
  &lt;mat-slider 
    thumbLabel
    [displayWith]="formatLabel"
    tickInterval="auto"
    min="1"
    max="10"
    [(ngModel)]="value"&gt;&lt;/mat-slider&gt;
  </code></pre>
  
  <p><strong>subscriptioncomponent.ts</strong></p>
  
  <pre><code>      export class SubscriptionchooseComponent implements OnInit {
        amount : number = 0;
        user : number = 0;
        value: number = 1;
  
        formatLabel(value: number | null) {
          if (!value) {
            return 0;
          }
          this.value = value;
          console.log(this.value);
  
          return value;
        }
  
        constructor() {
  
          this.user = this.value;
          this.amount = this.user * 9;
  
          console.log(this.amount);
          console.log(this.value);
         } 
  
        ngOnInit() {
  
        }
  
  }
  </code></pre>