These are chat archives for angular/material

18th
Jul 2017
Carlos Eduardo
@duard
Jul 18 2017 05:46
its possible has 2 md-toolbar ? and one fixed ?
Bas van den Heuvel
@basvandenheuvel
Jul 18 2017 06:37

Hi guys, im currently creating an application with angular 2 and material design. I have a design related question.... what is a good way to display data (not in a table)?
For example, a delivery address, the name, address, phone, contact person and email of a company?

I can't find good looking examples online..

Carlos Eduardo
@duard
Jul 18 2017 10:49
its very hard to do datatable with material angular :-(
Luke Skelhorn
@SCRATK
Jul 18 2017 10:52
The way i I've been saving to a database with angular material is thought laravel using it as an API with Passport
janmoy
@janmoy
Jul 18 2017 13:53
hi
Carlos Eduardo
@duard
Jul 18 2017 14:24
hi
I need an example about how to filter http data using md-table
Scott R. Frost
@ScottRFrost
Jul 18 2017 15:14
Having a tricky one that I'm not sure of how to debug
image.png
Seems to be related to flex-layout on a page with a spinner. If I remove all the flex stuff OR the spinner, it works fine
Any pointers for how to figure it out / fix it? I tried to repro it on plunkr but it works fine there: https://plnkr.co/edit/LPtYUK4AjjvCKzEooOKm?p=preview
(I'm using angular CLI instead of systemjs stuff, but the html and TS is the same)
Carlos Eduardo
@duard
Jul 18 2017 17:34
its really HARD to do SORT, FILTER and PAGINATION with this md-table
Scott R. Frost
@ScottRFrost
Jul 18 2017 17:56
I have sort and pagination working, but I'm running in to the above issue when trying to add a spinner that will show when the md-table is busy
Carlos Eduardo
@duard
Jul 18 2017 17:57
share your code man
are you using firebase or http ?
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:09
http to a web API
<div fxLayout="column" fxLayoutAlign="stretch center" class="w100p">
    <div>
      <md-input-container class="w350">
        <input mdInput placeholder="Search Term" [(ngModel)]="searchTerm">
      </md-input-container>

      <button md-raised-button color="primary" (click)="searchClicked()" class="centered">Search <md-icon>search</md-icon></button>
    </div>

    <md-table class="data-table" #table [dataSource]="simpleDataSource" mdSort (mdSortChange)="pageChanged()">
      <ng-container cdkColumnDef="dates">
        <md-header-cell *cdkHeaderCellDef md-sort-header="date"> Dates </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.dates}} </md-cell>
      </ng-container>

      <ng-container cdkColumnDef="type">
        <md-header-cell *cdkHeaderCellDef md-sort-header> Type </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.type}} </md-cell>
      </ng-container>

     ... Other columns here ...

    <md-paginator #paginator (page)="pageChanged()" [length]="simpleDataSource.resultCount" [pageIndex]="0" [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 100]">
    </md-paginator>
  </div>
Carlos Eduardo
@duard
Jul 18 2017 18:11
Screenshot from 2017-07-18 15-10-05.png
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:12
export class WorkerTimeComponent implements OnInit {
  // Set Columns here that will be displayed (cdkColumnDef)
  // Everything in interface SimpleDataRow will be contained in the actual row (row.xxx)
  private displayedColumns = ['dates', 'type', 'status', 'hours'];
  private simpleDataSource: SimpleDataSource | null;
  private tableBusy = true;
  private resultCount = 0;
  private searchTerm = '';

  // Paging and sorting
  @ViewChild(MdPaginator) paginator: MdPaginator;
  @ViewChild(MdSort) sort: MdSort;

  constructor(private shared: SharedService, private router: Router) {}

  // Init Data Source
  ngOnInit() {
    // Security
    if (localStorage.companyType === undefined || localStorage.companyType === null || localStorage.companyType !== 'Worker') {
      this.router.navigateByUrl('/log-off');
    }
    this.simpleDataSource = new SimpleDataSource(this.shared);

    // Initial population of form with default values
    this.sort.active = 'date';
    this.sort.direction = 'desc';
    this.sort.disableClear = true;
    this.searchClicked();
  }

  // Action to take when a data row is clicked
  rowClicked(row) {
    alert(row.invoiceItemID);
  }

  // Action to take when search parameters are changed
  searchClicked() {
    this.tableBusy = true;
    this.paginator.pageIndex = 0;
    this.simpleDataSource.getData(
      this.searchTerm, this.sort.active + this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
    this.tableBusy = false;
  }

  // Action to take when page or sort is changed
  pageChanged() {
    this.simpleDataSource.getData(
      this.searchTerm, this.sort.active + this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
  }
}
Carlos Eduardo
@duard
Jul 18 2017 18:12
I did it, but its very confuse
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:12
There's my class
Carlos Eduardo
@duard
Jul 18 2017 18:12
thanks, I need to refactory my code, I did this looking to this example https://plnkr.co/edit/LZ9HQnCKrmXm0g2vqVGH?p=preview
very confuse because this example do not use http
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:13
export class SimpleDataSource extends DataSource<any> {
  private rowsObservable: BehaviorSubject<SimpleDataRow[]>;
  private rows: SimpleDataRow[];
  public resultCount = 0;

  constructor(private shared: SharedService) {
    super();
    this.rowsObservable = <BehaviorSubject<SimpleDataRow[]>>new BehaviorSubject([]);
    this.rows = new Array<SimpleDataRow>();
  }

  // Wire up observable in connect function
  connect(): Observable<SimpleDataRow[]> {
    return this.rowsObservable.asObservable();
  }

  disconnect() {}

  getData(searchTerm: string, sort: string, pageNum: number, pageSize: number) {
    // Get data from Web API
    this.shared.AjaxGet('/WorkerTime?searchTerm=' + encodeURIComponent(searchTerm) + '&sort=' + sort + '&pageNum=' + pageNum.toString() +
      '&pageSize=' + pageSize.toString(),
      localStorage.username, localStorage.apiKey).subscribe(value => {
        // Get data
        const a = value as any;
        const results = a.results as SimpleDataRow[];

        // Get result count if any
        if (a.resultCount != null) {
          this.resultCount = a.resultCount
        }

        // Copy to observable
        this.rowsObservable.next(Object.assign(results));
      },
      error => {
        //// this.pendingTimeBusy = false;
      });
  }
}
Then there is my datasource
shared is just a simple shared service that I'm using everywhere to wrap ajax stuff, that part probably isn't useful to you if you already have the HTTP stuff going
Carlos Eduardo
@duard
Jul 18 2017 18:13
ngx-datatable is easy
thanks
JonathanAaron
@JonathanAaron
Jul 18 2017 18:14
Anyone have a great way of making an md-card clickable and navigating to a link. I'm currenly using ng-click with a function that navigates to the page, but when you hover over the card it doesn't show which url you're going to nav to?
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:15
@JonathanAaron I had to give up on using md-card and roll my own. It seemed too limited.
JonathanAaron
@JonathanAaron
Jul 18 2017 18:16
Damn...sad face
Carlos Eduardo
@duard
Jul 18 2017 18:26
@ScottRFrost what about column width ?
its possible set the column width in md-table ?
JonathanAaron
@JonathanAaron
Jul 18 2017 18:31
I think I'm going to wrap the inner card guts with an <a> tag.
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:33
I haven't tried to do that, but that's a good question
I know colspans don't work yet, not sure about column width
You should be able to do that with css nth-child or something though
Carlos Eduardo
@duard
Jul 18 2017 18:35
Screenshot from 2017-07-18 15-34-17.png
this column codigo, I want this small :-/
Carlos Eduardo
@duard
Jul 18 2017 18:41
@ScottRFrost looks like this example has columns size https://plnkr.co/edit/mjQbufh7cUynD6qhF5Ap?p=preview
Scott R. Frost
@ScottRFrost
Jul 18 2017 18:44
Try forcing it with: style="width:50px" just for testing
see if it works
Carlos Eduardo
@duard
Jul 18 2017 18:45
the only difference is that this example has number columns in the class
        number: issue.number,
        state: issue.state,
        title: issue.title,
Scott R. Frost
@ScottRFrost
Jul 18 2017 19:27
@duard not sure if it helps, but it looks like it does respect angular-flex responsive API, so you can do stuff like:
      <ng-container cdkColumnDef="type">
        <md-header-cell *cdkHeaderCellDef md-sort-header fxHide.sm="true" fxHide.xs="true"> Type </md-header-cell>
        <md-cell *cdkCellDef="let row" fxHide.sm="true" fxHide.xs="true"> {{row.type}} </md-cell>
      </ng-container>
To hid that entire column in your table if the viewport is below a certain size (in this case sm and xs)
Carlos Eduardo
@duard
Jul 18 2017 19:32
I try fxGrow="2" but dont work