Call interpolation value of component.html to component.ts

Question

I'm new in Angular and I have a material table where I have fields like this:

<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.id}} 
</mat-cell>

<mat-cell *matCellDef="let user">
      <switch [status]="user.activo" [onText]="yes" [offText]="no" [onColor]="green" [offColor]="gray" [size]="normal" [disabled]="disabled" (statusChange)="onFlagChange($event)"></switch>
 </mat-cell>

As you can see I have 2 cells here. Last one is Bootstrap switch who use event

(statusChange)="onFlagChange($event)

So/ I create a service to change status of current user like:

postSwitch(body) {
var cambioEstatus = this.http
  .put(
    this.rootUrl + "api/usuarios/activar",
    JSON.stringify(body),
    this.options
  )
  .map((data: any) => data.json());
return cambioEstatus;
 }

and method I use to populate table is:

 getUser(): Observable<User[]> {
    return this.httpClient.get<User[]>(this.serviceUrl, {
      headers: this.headersNew
    });
  }

and then in component.ts I just call method:

onFlagChange(event) {
    const body: any = {
      usuarioId: ,
      activo: event
    };
    this.UsuariosService.postSwitch(body).subscribe(
      () => {
        //React to your HTTP request success
        this.toastr.success("Changed success");
      },
      err => {
        this.toastr.error("Error");
        //React to your HTTP request error
      }
    );
   }

As you can see I have

const body: any = {
      usuarioId: ,
      activo: event
    };

But I don't know how to get {{user.id}} from view. How can I achieve that? Regards

Full component.ts:

import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ViewChild,
  ElementRef
} from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

import { UsuariosService } from "../../../../../_services/usuarios.service";
import { Observable } from "rxjs/Observable";
import {
  DataSource,
  CollectionViewer,
  SelectionModel
} from "@angular/cdk/collections";
// import { User } from "../../../../../_models/user.model";5
import { BehaviorSubject } from "rxjs";
import {
  MatSort,
  MatSortable,
  MatTableDataSource,
  MatPaginator,
  MatPaginatorIntl
} from "@angular/material";
import { UsuarioActivo } from "../../../../../_models/usuarioActivo";


@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})
export class UsuariosComponent {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  // Bootstrap switch
  public yes: string = "SI";
  public no: string = "NO";
  public green: string = "green";
  public gray: string = "gray";
  public disabled: boolean = false;
  public status: boolean = false;
  public normal: string = "small";
  //end Bootstrap switch

  selection = new SelectionModel<string>(true, []);
  dataSource;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  displayedColumns = [
    "id",
    "nombre",
    "apellido",
    "email",
    "perfil",
    "ultimoLogin",
    "activo",
    "action"
  ];

  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService,
    private UsuariosService: UsuariosService
  ) {}

  ngOnInit() {
    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    });


  }

  onFlagChange(event, userid) {
    const body: any = {
      usuarioId: userid,
      activo: event
    };
    this.UsuariosService.postSwitch(body).subscribe(
      () => {
        //React to your HTTP request success
        this.toastr.success("Cambiado con éxito");
      },
      err => {
        this.toastr.error("Falló");
        //React to your HTTP request error
      }
    );
  }

}

Answer 1

Remember that you have user in your template context.

<mat-cell *matCellDef="let user"> <switch [status]="user.activo" [onText]="yes" [offText]="no" [onColor]="green" [offColor]="gray" [size]="normal" [disabled]="disabled" (statusChange)="onFlagChange($event, user)"></switch> </mat-cell>

In this case, you can add a second parameter to your onFlagChange() function and receive your current user.