The textbox in my form needs to display data stored in the database but it also needs to be editble. At the moment it's displaying data but you can't click on it.
HTML:
<ng-container *ngIf="groupedVolumes">
<ng-container *ngFor="let model of groupKeys() | slice:-3" >
<tr>
<th class="model">{{ carValues(model)[0].model }}</th>
<ng-container *ngFor="let value of carValues(model)">
<td input type='text' class="data" name="sceheduledData">
{{ value.scheduledVolume }}
</td>
</ng-container>
</tr>
</ng-container>
</ng-container>
Related
I am using the native input elemnt with datalist.
And I want it always select the first item as possible after every typing of filtering list.
How can I extend it as a custom compnent and edit this selection part?
Here is the html code:
<ng-container matColumnDef="productNo">
<th mat-header-cell *matHeaderCellDef class="w-150">Product No.</th>
<td mat-cell *matCellDef="let el;let i=index;"[formGroupName]="i">
<input formControlName="productNo" list="products" placeholder="...">
<datalist id="products">
<option *ngFor="let el of products;" value={{el.productNo}}> {{el.name}}</option>
</datalist>
</td>
</ng-container>
try the [selected]="item && i == 0" so if you have a angular matlistoption it gonna be like this
<mat-list-option *ngFor="let item of items, let i = index" [selected]="item && i == 0">
</mat-list-option>
I have build a table in Angular Material with a general filter (I have followed the official documentation for that). For the purpose of my project I would like to have different filter for each column of my table. For example a filter for the column "name" and another filter for the column "amount". How can I achieve this?
html
<mat-form-field appearance="standard" color="accent">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Search" #input>
</mat-form-field>
<table mat-table [dataSource]="expense" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Amount </th>
<td mat-cell *matCellDef="let element"> {{element.amount | currency:'CHF '}} </td>
</ng-container>
[...]
</table>
typescript
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
I am attempting to add row-deletion into my <mat-table>. Most of the table is working fine, except the checkbox column is not showing up. Previously, the code did not contain the <!-- Checkbox/Selection Column --> section. I added it in using one of the examples on angular.material.io.
Im a bit confused, because it looks to me like the pattern should be a <th> & <td> wrapped inside an <ng-container>. I seem to be missing something here, because the checkbox/selection column isn't showing up, there aren't any errors in the browser console, and there aren't any errors being thrown at ng serve in powershell.
<table mat-table [dataSource]="dataSource" matSort>
<!-- Checkbox/Selection Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox [checked]="false" [aria-label]="checkboxLabel()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox [checked]="true"></mat-checkbox>
</td>
</ng-container>
<!-- Working Columns -->
<ng-container *ngFor="let field of Fields" matColumnDef="{{field.name}}">
<th class="w-134" mat-header-cell *matHeaderCellDef mat-sort-header>{{field.name}}</th>
<td class="w-130" mat-cell *matCellDef="let row">
<input *ngIf="field.editType == 'free'" matInput [(ngModel)]="row[field.name]" placeholder="{{row[field.name]}}" required>
<mat-select *ngIf="field.editType == 'spinner'" [(ngModel)]="row[field.name]">
<mat-option *ngFor="let option of field.options" [value]="option">{{option}}</mat-option>
</mat-select>
<div class="checkbox-cell" (click)="toggleBoolean(row, field.name)">
<mat-checkbox *ngIf="field.editType == 'checkbox'" [(ngModel)]="row[field.name]" (click)="toggleBoolean(row, field.name)"></mat-checkbox>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="ColumnHeaders"></tr>
<tr mat-row *matRowDef="let row; columns: ColumnHeaders;"></tr>
</table>
Seems like you did not added the column in your ColumnHeaders array inside TS file.
ColumnHeaders = ['select'] //ColumnHeaders should have an entry of select(your checkbox column defintion)
yes you have to add select inside displayedColumns
displayedColumns: string[] = ['select','position', 'name','gender', 'weight', 'symbol'];
I have a angular material table with some header column. But under one header column I have some checkboxes for the name of the project.
I have it like this:
<ng-container matColumnDef="projects">
<th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
<div class="col">
<div class="row" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="filterProjects($event, i, item)"
[checked]="selected === i"
[disabled]="isDisabled"
>{{ item.name }}
</mat-checkbox>
</div>
</div>
Project
</th>
<td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>
But now it looks like this:
But of course the header column project has to bee positioned above the checkboxes in line with the other column headers.
So what I have change?
Thank you
So I'm using angular material tables and decided to made a filter for each column. The inputs for this filters are located in the row header of each column. That works fine, but the thing is when I'm typing and pressed the space key, the table gets sorted. I want this behavior to stop, but if I used (keydown.space)="$event.preventDefault()" but the space isn't inserted in the input. Here is the code below of the table.
<table mat-table class="full-width-table" (matSortChange)="sortData($event)" [dataSource]="this.datasrcCollIndex" aria-label="Elements" matSort matSortActive="strName" matSortDirection="asc" matSortDisableClear>
<!-- Name Column -->
<ng-container matColumnDef="strName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<mat-form-field style="margin-top: 0px;">
<input matInput placeholder="Name" (keyup)="filteringByColumns()" [(ngModel)]="strName" >
</mat-form-field>
</th>
<td mat-cell *matCellDef="let user">{{user.strName}}</td>
</ng-container>
<!-- Gender Column -->
<ng-container matColumnDef="strGender">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<mat-form-field style="margin-top: 0px; width: 70px;">
<input matInput placeholder="Gender" (keyup)="filteringByColumns()" [(ngModel)]="strGenderColumn">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let user">{{user.strGender}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="this.dictstrDisplayedColumns"></tr>
<tr mat-row (click)="this.showDetailsOfUsers(user)"
*matRowDef="let user; columns: this.dictstrDisplayedColumns;"></tr>
</table>
Instead of using
preventDefault()
I used
stopPropagation()
it still allows input to be entered, but does not propagate the event to the parent elements (thus the sorting element never receiving the event).
Usage:
(keydown.space)="$event.stopPropagation()"
i had the same problem and did:
event.preventDefault();
(event.target as any).value += ' ';