These are chat archives for angular/material

3rd
May 2018
Fran Denia
@fdenia
May 03 2018 07:11
good to all, I currently have a component that draws multiple mat-progress-bar and I would like to be able to update the value of only one of the elements of progress. I can not find the way, what I do is the following:
@ViewChildren(MatProgressBar) progress: QueryList<MatProgressBar>; 

  playTrack(event){
  let pr   = this.progress.filter(ins => ins._elementRef.nativeElement.dataset.hash == id)[0];             
  pr.value = 50;
  }
cdskill
@cdskill
May 03 2018 09:33

@cdskill
Hi guys, is there someone who can help me with the sorting of column of dataTable ?
there is my issue : I actually retrieve from the server a field of type date with the format TZ (yyyy-MM-dd'T'HH:mm:ss.SSS'Z') and then I format this with momentJS to have a this format DD/MM/YYYY HH:mm
BUT the sorting method of the column considere it like a string
so the sort is f*cked up...
I tried to go this way : I created a new Class

export class DateFinal {
    inputDate?: any;
    outputDate?: string;

    public toString = () : string => {

        return this.outputDate;
    }
}

in the inputDate I define the the TZ format date and the output the DD/MM/YYYY HH:mm

in the md-cell of the datatble, with the toString() method I dispay the formated date
but I want that the sorting accessor SORT the date column in the inputDate attribut of the object DateFinal
is there an other way ? any solution ?

cdskill
@cdskill
May 03 2018 12:15
problem SOLVED.
pookdeveloper
@pookdeveloper
May 03 2018 14:03
@cdskill put the code resolved :)
cdskill
@cdskill
May 03 2018 14:05
hahaha :D their is no solution in the internet I've the only one to sort a date
:-p
well
cdskill
@cdskill
May 03 2018 14:11
This is the class :
export class DateFinal {
    inputDate?: any;
    outputDate?: string;

    public toString = () : string => {

        return this.outputDate;
    }
}
this the formatter :
value is the timestamp from the back-end and this.options.format is the DD/MM/YYYY for example
let tmpValue = new DateFinal();
        tmpValue.inputDate = new Date(value);
        tmpValue.outputDate = moment(value).format(this.options.format);
        return tmpValue;
there is the custom sorting :
  ngOnInit() {
    this.dataSource = new MatTableDataSource < any > (this.data.rows);

    this.dataSource.sortingDataAccessor = (item, property) => {

      if(item[property] instanceof DateFinal) {
        return item[property].inputDate;
      } else {
        return item[property];
      }
    };

  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }