angular4材质表

Question

 @Component({ selector: "app-dynamic-table", template: ` ` }) export class DynamicTableComponent { private _columns = [ { name: "date", show: true }, { name: "selected", show: true }, { name: "id", show: true }, { name: "location3", show: false }, { name: "location4", show: false }, { name: "location5", show: false } ]; get columns() { return this._columns; } get displayedColumns(): string[] { return this._columns.map(c => c.name); } } 

the above code successfully able to hide and show the material table column,But I need to restrict the user to select less than 3 column of table and should show the alert message.Could you anyone look inti that?

Answer 1

You can keep click event on your checkbox , and check the limit of checkbox selection on that event and decide whether to proceed with the event or not. If you prevent that event to happen, then eventually it will not fire change event of checkbox

Code

checkLimit(event) {
    // To make this SSR proof code, you could consider using Renderer to query DOM
    let dom = event.currentTarget.querySelector('.mat-checkbox-input');
    console.dir('Dom', dom, event.currentTarget)
    if (!dom.checked && this.columns.filter(col => col.show).length >= 3) {
      event.stopPropagation()
      event.preventDefault()
      alert('Cant select more than three column')
      return
    }
}

Html

<mat-checkbox *ngFor="let column of columns" 
  (click)="checkLimit($event)"
  [(ngModel)]="column.show">
    {{column.name | titlecase}}
</mat-checkbox>

Answer 2

Really appreciate Pankaj Answer. But it's not an angular way. Accessing DOM in component and checking without renderer2. Here is the angular way of achieving the same solution.

Component:

validate(index, column, event){
    column.show = !column.show;
    const matches = this.columns.filter(item=> item.show);
    if(matches.length >= 3){
      alert('not allowed');
      event.stopPropagation();
      event.preventDefault();
      column.show = false;
    }
  }

Template :

<div *ngFor="let column of columns; let i=index;">
  <input type="checkbox" id="{{i}}" name="feature{{i}}"
    value="{{column.name}}"   [checked]="column.show" ([ngModel])="column.show" (click)="validate(i, column, $event)">
    <label for="feature{{i}}">{{column.name}}</label></div>

https://stackblitz.com/edit/angular-q2wrc4