Angular HTML Range Slider - Two way binding

another-service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { credentials, user } from './app/dtos';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private gateway: string = '/api';
  constructor(private http: HttpClient){}

  private headers()
  {
    let token = '';
    let headers = new HttpHeaders()
      .set('Content-Type', 'application/json; charset=utf-8')
      .set('X-Protection-Token', token)
    ;

    return headers;
  }
  private _post(endpoint: string, data={}): any { return <any>this.http.post(this.gateway+'/'+endpoint, data, {headers: this.headers()}); }

  public login(credentials: credentials): Observable<user>{return this._post('login.php', credentials);}
  public folders(){return this._post('folders.php', {});}
  public files(id: string = ''){return this._post('files.php', {'id': id});}
}

ApiService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CredentialsDTO, EndpointDTO, NameValueDTO } from './objects';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private _gateway = "https://localhost:5001";
  private endpoints = new EndpointDTO();

  constructor(private http: HttpClient) { }

  public gateway(): string
  {
    return this._gateway;
  }

  private _post<Type>(url="", data={})
  {
    let token = localStorage.getItem("token")+"";

    let headers = new HttpHeaders({
      "X-Protection-Token": token,
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    });

    return this.http.post<Type>(this._gateway+url+"?r="+Math.random(), data, {headers: headers});
  }

  public login(credentials: CredentialsDTO)
  {
    return this._post<NameValueDTO>(this.endpoints.api_server_login, credentials);
  }
}

objects.ts

export class SubjectDTO
{
  public name: string = "";
  public strength: string = "0";
};

slider.html

<input type="range" [attr.min]="0" [attr.max]="100" step="5" [(ngModel)]="subject.strength" [value]="subject.strength">





<table class="w3-table w3-bordered">
    <caption>Subject-wide Profile Match</caption>
    <thead>
        <th scope="col" style="width: 20%;">Subject</th>
        <th scope="col" style="width: 20%;">&nbsp;</th>
        <th scope="col" style="width: 60%">Strength</th>
    </thead>
    <tbody>
        <tr *ngFor="let subject of subjects;">
            <td><span class="subject">{{subject.name}}</span></td>
            <td><span class="subject">{{subject.strength}} %</span></td>
            <td><input type="range" [attr.min]="0" [attr.max]="100" step="5" [(ngModel)]="subject.strength" [value]="subject.strength"></td>
        </tr>
    </tbody>
</table>

subjects.component.ts

import { Component, OnInit } from '@angular/core';
import { SubjectDTO } from '../objects';

@Component({
  selector: 'app-subjects',
  templateUrl: './subjects.component.html',
  styleUrls: ['./subjects.component.scss']
})
export class SubjectsComponent implements OnInit {
  public subjects: SubjectDTO[] = [
    { name: "C#.Net", strength: "80", },
    { name: "MySQL/MariaDB", strength: "80", },
    { name: "SQLite", strength: "70", },
    { name: "Python", strength: "30", },
    { name: "Angular/CLI", strength: "60", },
    { name: "Backend Operations", strength: "80", },
  ];

  public constructor(){
    // 
  }

  ngOnInit(): void {
    // 
  };

}

Output