Angular - Array is not shown in mat-table - html

In the function, the string is split into an array. Each word gets send to the server, from there I get some information about the word back. This I save into an array. The problem I have is that if I go through the array with *ngFor in the HTML document I get all the entries back but in the mat-table, it isn't shown. I don't get an error just the data is not shown.
sendText(){
this.words=[];
this.stringArray = this.sentence.split(" ");
console.log(this.stringArray);
for(let i=0;i<this.stringArray.length ;i++){
this.httpService.sendText(this.stringArray[i]).subscribe((res) => {
this.result = res;
console.log(this.result.words);
this.b.wort = this.result.words[0].wort;
this.b.definition = this.result.words[0].definition;
this.b.wortart = this.result.words[0].wortart;
this.words.push(this.b);
this.b = this.getemptyObject();
});} console.log(this.words); this.sentence = "";}
HTML
<div *ngFor="let word of words">
{{word.wort}},{{word.definition}}, {{word.wortart}}
</div>
<table mat-table [dataSource]="words" class="mat-elevation-z8">
<!-- Word Column -->
<ng-container matColumnDef="wort">
<th mat-header-cell *matHeaderCellDef> Wort </th>
<td mat-cell *matCellDef="let word"> {{word.wort}} </td>
</ng-container>
<!-- Wortdtype Column -->
<ng-container matColumnDef="wortart">
<th mat-header-cell *matHeaderCellDef> Wortart </th>
<td mat-cell *matCellDef="let word"> {{word.wortart}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

I found a solution to this question on this Reddit Thread.
According to "#spacechimp" (the person who answered the question), you need to update the entire array for the MatTable to detect the changes.
Something like this:
this.words.push(this.b);
this.words = [...this.words]; // <--- Update the whole array with its own data
Even though this is a solution, it is a rather expensive way of doing this for large arrays, so I encourage you to find other ways to optimize this.

Related

Angular sorter not working on specific column

I am trying to implement a sorting method in my angular project and I am having some really weird issues. There is 3 columns, 2 string columns and one number with an Id in the beginning. The string columns seems to be working fine with the implemented sorter but the Id is not sorting itself in numerous order.
What I have testet is to move one of the working columns to be in the first column to see if it is because its the first column in line. I have also tried to change the value of the column with id to one of the values working and it worked fine so what I wonder is.
Does anyone have any idea of what could be causing this, is it because it is a number and not a string? feels like numbers should be easier for the sorter to work with but idk.
I will leave the code down below.
//Typescript:
#ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
<table [hidden]="loading || !this.dataSource.data.length" mat-table #table [#tableRow] [#fadeIn] [#fadeOut] [dataSource]="dataSource" matSort>
<ng-container sticky matColumnDef="id">
<th mat-header-cell class="small-width64 nowrap-text text-right pl-1 pr-1" mat-sort-header sortActionDescription="Sort by id" arrowPosition='before' *matHeaderCellDef>{{ 'Id' | translate }}</th>
<td mat-cell class="small-width64 nowrap-text text-right pl-1 pr-1" *matCellDef="let message">{{ message.messageId }}</td>
</ng-container>
<ng-container matColumnDef="message">
<th mat-header-cell class="nowrap-text pl-1 pr-1 " mat-sort-header sortActionDescription="Sort by message" *matHeaderCellDef>{{ 'Message_administration.Message' | translate }}</th>
<td mat-cell class="nowrap-text pl-1 pr-1" *matCellDef="let message">{{ message.message }}</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell class="nowrap-text pl-1 pr-1 " mat-sort-header sortActionDescription="Sort by description" *matHeaderCellDef>{{ 'Message_administration.Description' | translate }}</th>
<td mat-cell class="nowrap-text pl-1 pr-1" *matCellDef="let message">{{ message.description }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
As you're saying the "id" column has data in form of strings, formatted as Id 1, Id 20, Id 100. This means they are strings, and hence will be sorted as strings. So with the above examples, correct sorting would order would be:
Id 1, Id 100, Id 20.
I assume you would like to sort those as numbers. To do that, you would have to implement custom sorting logic where you strip the Id part, pars those as number and sort them as numbers.
To do that, you can override the sortData predicate on the datasource:
this.dataSource.sortData = (data: YourObjectType[], sort: MatSort) => {
return data.sort((a: YourObjectType, b: YourObjectType => {
//Your custom sorting logic here
});
}
You can look at the default implementation in the material code on github: https://github.com/angular/components/blob/c2a20c4a035ef57bf598fd78bc7284c180b34c78/src/material/table/table-data-source.ts#L168 for some guidance.

HTML Angular Material: Hide Columns in a dynamically forming table

I want to hide columns in my table based on an ID value that is sent to the page upon opening it. I've seen there is a method for tables whose columns are formed as needed... https://github.com/angular/components/issues/9940 this post outlines that. However my table is formed as such.
<table mat-table [dataSource]="dataSource" align="center" class="mat-elevation-z8">
<ng-container [matColumnDef]="column" *ngFor="let column of getDisplayedColumns()">
<th mat-header-cell *matHeaderCellDef > {{column}} </th>
<td mat-cell *matCellDef="let element" > {{element[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
<tr mat-row *matRowDef="let row; columns: getDisplayedColumns();" ></tr>
</table>
getDisplayedColumns() should return my array with only the elements I want to show
I'm confused on how I would implement the above method into my code given that my table is formed differently than the OP's.
Probably a lot of ways to do this, but I had a similar need so created a component and passed in all possible columns. The component does a lot of special formatting like booleans = "yes" | "no" or dates dates | date:'MM/dd/yyyy h:mm:ss a', but for your case isVisible is what you seem to need. A few key pieces:
export interface IPaginateRowAttributes {
attributeName: string;
listLabel: string;
listFormat: string;
isAttribute: boolean;
lookupIndex: number;
isVisible: boolean;
}
#Input() rowColumns: IPaginateRowAttributes [] = [];
#Input() yourId
<tr *ngFor="let dynamicListRowAttribute of dynamicListRowAttributes">
<ng-container *ngIf="dynamicListRowAttribute.listFormat=='number' && dynamicListRowAttribute.isVisible==true" matColumnDef={{dynamicListRowAttribute.compositeKey}}>
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="sort(dynamicListRowAttribute.attributeName, true, dynamicListRowAttribute.listFormat)"> {{dynamicListRowAttribute.listLabel}} </th>
<td mat-cell *matCellDef="let element"> {{element['attributes'][dynamicListRowAttribute.attributeName] | currency}} </td>
</ng-container>
<ng-container> more format options</ng-container>
ngOnChanges(changes: SimpleChanges) {
let returnHeaders: string[] = [];
for (let detail of displayColumns) {
returnHeaders.push(detail.dictionaryCompositeKey);
}
}
So right there include ngOnChanges, you could check your ID value and set isVisible per column based on whatever criteria you want to use and let the *ngIf filter the rest. This is one option anyway, there may be better solutions in terms of performance.

Is there any way to edit specific Column of table using mat-table in Angular material

In my project i am using Angular Material's table for displaying value in table format, As per new requirement i have to perform in-line editing for last 2 column over other along with that if user click 1st column the other column get highlighted automatically and everything has to be done using Angular material
This is the last 2 column i want to perform in-line editing
> <ng-container matColumnDef="weight">
> <th mat-header-cell *matHeaderCellDef> Weight </th>
> <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
> </ng-container>
> <ng-container matColumnDef="symbol">
> <th mat-header-cell *matHeaderCellDef> Symbol </th>
> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
> </ng-container>
>
>
> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
How i achieved is as follows :
<tbody>
<tr *ngFor="let data of dataSource">
<td >{{data.position}}</td>
<td >{{data.name}}</td>
<td *ngIf="data.position === editRowId"> <input matInput [(ngModel)]="data.weight"></td>
<td *ngIf="data.position !== editRowId" (click)="editTableRow(data.position)">{{data.weight}}</td>
<td *ngIf="data.position === editRowId"> <input matInput [(ngModel)]="data.symbol"></td>
<td *ngIf="data.position !== editRowId" (click)="editTableRow(data.position)">{{data.symbol}}</td>
</tr>
</tbody>
TS file for above code :
export class AppComponent {
showEditTable = false;
editRowId: any = '';
selectedRow;
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
editTableRow(val) {
console.log('click event started val = ' + val);
this.editRowId = val;
console.log('click event ended with val = ' + val);
}
}
I expect the result as table where last 2 column can be edited inline and at the same time i can send modified data to backend
Naman, it's the same, you need use <ng-container>to avoid create extra tags, so your columns becomes like
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="element.position!==editRowId">
<span (click)="edit(element.position,'weigth')">{{element.weight}} </span>
</ng-container>
<ng-container *ngIf="element.position===editRowId">
<input matInput name="weigth" [(ngModel)]="element.weight">
</ng-container>
</td>
</ng-container>
Well, I call to function "edit" passign two arguments, the position and a string indicate the "name" of the input attributes. This allow us "focus" the input clicked. how?
We declare a ViewChildren of the MatInputs
#ViewChildren(MatInput,{read:ElementRef}) inputs:QueryList<ElementRef>;
See that we get not the MatInput else the "ElementRef". This allow us, in out function edit get the element with the attributes name equal the string that pass as argument, and focus it. See that we need "enclosed" all in a setTimeout to allow Angular to show the input
edit(row,element)
{
this.editRowId=row;
setTimeout(()=>{
this.inputs.find(x=>x.nativeElement.getAttribute('name')==element)
.nativeElement.focus()
})
}
You can see the full example in stackblitz
Well, in the example the data is hardcoded. Let's go to imagine that the data (and the structure) comes from a service data. The data is easy imagine because it's the same. The "structure" we can imagine as an array of object with three properties: name,head ad fixed. if fixed is true, we only show the data, else we can edit. So the only thing we need is create the columns in a *ngFor
First we are going to see how our schema can be defined. It's only an array
[
{name:'position',head:"No.",fixed:true},
{name:'name',head:"Name",fixed:true},
{name:'weight',head:"Weigth",fixed:false},
{name:'symbol',head:"Symbol",fixed:false},
]
Our table becomes like
<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of schema;let last=last">
<ng-container [matColumnDef]="column.name">
<th mat-header-cell *matHeaderCellDef> {{column.head}} </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="element[schema[0].name]!==editRowId || column.fixed">
<span
(click)="column.fixed?editRowId=-1:
edit(element[schema[0].name],column.name)">
{{element[column.name]}}
</span>
</ng-container>
<ng-container *ngIf="element[schema[0].name]===editRowId && !column.fixed">
<input matInput [id]="column.name"
[(ngModel)]="element[column.name]"
(blur)="last?editRowId=-1:null">
</ng-container>
</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
See that we "replace" element.position by element[column[0].name] -I supouse the first element of the schema will be the "key" and how we using [(ngModel)]="elemen[column.name]". Yes, to refererd to element.position we can refered too as elemen["position"] and remember we are iterating over "schema"
Another thing is that we are going to use "id", not "name". this is because if we using name, really Angular put as attrib some like: ng-reflect-name, and this don't allow us focus the input.
Finally we are get the data in the ngOnInit. We are going to use forkJoin to get together the schema and the data. A forkJoin only call and array of observables (in this case this.dataService.getSchema() and this.dataServide.getData, and return in an array the response of all the observables. We use the way
([variable1,variable2]) to store in "variable1" the first result and in variable2 the second result
ngOnInit()
{
forkJoin([this.dataService.getSchema(),this.dataService.getData()])
.subscribe(([schema,data])=>{
this.dataSource=data;
this.displayedColumns=schema.map(x=>x.name)
this.schema=schema
})
}
The displayedColumns must be an array with the names of the columns, but we need to store in an array the "schema" too.
In the stackblitz I create a service and "simulate" the observable using the rxjs creation operator of, in a real application the data becomes from a httpClient.get(....)

Angular material 2 table - define column using TemplateRef and ngTemplateOutlet

I am trying to make reusable material table and I want to use TemplateRef with ngTemplateOutlet to generate columns. In this example I created cards components which is using my material-table component. In cards.component.html I have template of one of my table's column. Running the project will cause an error ERROR TypeError: Cannot read property 'template' of undefined (see console on stackblitz). Is it possible to pass columnt template to my MaterialTableComponent and use it to define column?
<table mat-table [dataSource]="data" class="mat-elevation-z4">
<ng-container
*ngFor="let column of displayedColumnObjects"
[matColumnDef]="column.id"
>
<!-- if where is cellTemplate in table config json, use cellTemplate -->
<ng-container
*ngIf="column.cellTemplate"
[ngTemplateOutlet]="column.cellTemplate"
>
</ng-container>
<ng-container *ngIf="!column.cellTemplate">
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.id]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
UPDATE
I found solution using ngTemplateOutletContext.
<table mat-table [dataSource]="data" class="mat-elevation-z4">
<ng-container
*ngFor="let column of displayedColumnObjects"
[matColumnDef]="column.id"
>
<ng-container
*ngIf="column.cellTemplate"
>
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element">
<ng-template
[ngTemplateOutletContext]="{
element: element[column.id]
}"
[ngTemplateOutlet]="column.cellTemplate">
</ng-template>
</td>
</ng-container>
<ng-container *ngIf="!column.cellTemplate">
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.id]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
See my example
ADD THE FOLLOWING IN THE COMPONENT TO BE RE-USED
In the '.HTML' file:
<ng-container [ngTemplateOutlet] = "yourNameReference"
[ngTemplateOutletContext] = "{$ implicit: {name: 'Arthur', lastName: 'Lemos'}">
</ng-container>
[NgTemplateOutletContext] data will be sent to the parent component. Remembering that '$ implicit' can receive any data you want to send to the PAI component
In the '.ts' file OF THE REUSABLE COMPONENT add the following code WITHIN YOUR CLASS
#ContentChild ('yourNameReference') yourNameReference: TemplateRef <any>;
FATHER COMPONENT (RECEIVES THE RE-USED COMPONENT)
Add the following code to the '.html' file
<ng-template #yourNameReference let-myDataa>
<p> {{myDataa.name}} {{myDataa.lastName}} </p>
</ng-template>
That way you can send data from the child component to the parent component, so you can create dynamic columns for your table.
Just follow the steps above, however, applying the specific columns of the table ... EX:
<td> <ng-container [ngTemplateOutlet] = "yourNameReference"
[ngTemplateOutletContext] = "{$ implicit: {name: 'Arthur', lastName: 'Lemos'}">
</ng-container> </td>
Add to the child's .ts:
#ContentChild ('yourNameReference') yourNameReference: TemplateRef <any>;
In the parent component:
<my-table>
...
<ng-template #yourNameReference let-myDataa>
<p> {{myDataa.name}} {{myDataa.lastName}} </p>
</ng-template>
<! - this content will be rendered inside the table ... ->
...
</my-table>
YOU CAN CREATE A REFERENCE NAME FOR EACH COLUMN, AND REPEAT THE PROCESS
ANGLE VERSION: 9
DOCUMENTATION: https://angular.io/api/common/NgTemplateOutlet
The documentation does not show the use of ngTemplateOutlet in different components, but it already helps in something.

Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError

I am new to Angular and Angular Material ,
Without Angular Materail it is working fine
<table>
<tr>
<th>City</th>
<th>State</th>
</tr>
<tr>
<td>{{ varEmp?.address.city}}</td>
<td>{{ varEmp?.address.state}}</td>
</tr>
</table>
With Angular Material it is not Working
<table mat-table [dataSource]="varEmp" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef> City</th>
<td mat-cell *matCellDef="let element"> {{element?.address.city}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> State</th>
<td mat-cell *matCellDef="let element"> {{element?.address.state}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
In component I declared variable
displayedColumns: string[] = ['city','state'];
briefy described component code to reduce complexity
Json Object
{"address":
{"city": "Karwar", "state": "Karnataka"}
}
I stumbled upon this issue as I had a static data source of json format and I needed to dump it in a mat-table.
The most common reason for this behavior is poor format of json data. The json data expected by mat-table should be in the format [{...}, {...}, {...}]. If you cannot change the format of the json data, simply convert the data to Array like this
var dataArr = new Array(jsonData));
and it would work.
Note - Converting it to array would add an extra layer of square brackets to the data. You might need to change the [dataSource] property in mat-table to dataArr[0].
<table mat-table [dataSource]="dataArr[0]">
Define the datasource of table as ;
this.dataSource = new MatTableDataSource<Address>(this.addressList);
You could try edit the td tag and do not use ? after the element.
For example:
<td mat-cell *matCellDef="let element"> {{element.address.city}} </td>
You need to convert your data to an array.
[dataSource] for angular material mat-table, requires that an array of data is passed to it. Ensure that you have a well formatted array of your data before assigning to your data source