How to leave mat-select checkbox marked as default

Asked

Viewed 235 times

0

I’m having a problem in an angular design, I have a checkbox within a <mat-select> to make a filter, however I wish that all fields already start enabled and not disabled, follows code:

export class ListarProdutoComponent implements OnInit {

table_dados: any = [];
table_config: any = [];
table_colunas: any = [];
allColumns = [];

rows = [];

temp = [];

columns = [
{ codigo: 'codigo' },
{ codigoProduto: 'codigoProduto' },
{ codigoSistema: 'codigoSistema' },
{ fornecedor: 'fornecedor' },
{ frete: 'frete' },
{ marca: 'marca' },
{ nome: 'nome' },
{ precoVenda: 'precoVenda' },
{ valor: 'valor' },
{ visivelVendas: 'visivelVendas' }
];




@ViewChild(DatatableComponent) table: DatatableComponent;

constructor(private _tableService: TableService, private _produtoService: ProdutoService) {
this.table_config = tableData.configuracao;
this.table_colunas = tableData.configuracao.colunas;
this.allColumns  = this.table_colunas.slice(0);

toggle(col) {
    const isChecked = this.isChecked(col);

    if(isChecked) {
    this.table_colunas = this.table_colunas.filter(c => { 
        return c.name !== col.name; 
    });
    } else {
    this.table_colunas = [...this.table_colunas, col];
    }
}

isChecked(col) {
    return this.table_colunas.find(c => {
    return c.name === col.name;
    });
}


};
           <mat-label>Checkbox</mat-label>       
            <mat-select  multiple [(ngModel)]="selectedUsers" >
                <mat-option *ngFor="let col of allColumns"
                type='checkbox'
                [value]="col.name"
                (click)='toggle(col)'
                >{{col.name}}</mat-option>
            </mat-select>
           </mat-form-field>
  • You define [value]= twice, it may have nothing to do with it, but try removing a

  • I withdrew here but still did not give me the result, it works normal the check, however I needed it already come all selected

  • https://stackoverflow.com/a/42149390/7206342

  • https://stackblitz.com/edit/angular-goeaud?file=app/select-Multiple-example.html

  • 1

    In this case, adding multiple and [ngModel]="['Onion', 'Pepperoni'] to select worked, but as the other link, depending on the version may be value instead of ngModel

  • Valeu bro, in fact all that was missing was the lack of [formControl]="toppings"

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.