Mixing
Change Angular 6 material specific table row dynamically by using index value
Got a index value of a particular row and need to change its default height which I get dynamically from other function. So I have both values separately, now is there any way by using index value i, can change particular row height?
Tried using below Javascript and it works fine for normal HTML manipulation but in angular (not desired result):
console.log("DynamicHeight: "+ dynHeight +"--> rowIndex: "+ rowIndexValue);
document.getElementById('dynamicTable').rows
x[rowIndexValue].style.height=dynHeight
Looking for solution in angular 6, help greatly appreciated!
angular indexing angular-material row
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
asked Nov 21 '18 at 9:54
SharanSharan
13
add a comment |
Got a index value of a particular row and need to change its default height which I get dynamically from other function. So I have both values separately, now is there any way by using index value i, can change particular row height?
Tried using below Javascript and it works fine for normal HTML manipulation but in angular (not desired result):
console.log("DynamicHeight: "+ dynHeight +"--> rowIndex: "+ rowIndexValue);
document.getElementById('dynamicTable').rows
x[rowIndexValue].style.height=dynHeight
Looking for solution in angular 6, help greatly appreciated!
angular indexing angular-material row
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
asked Nov 21 '18 at 9:54
SharanSharan
13
add a comment |
Got a index value of a particular row and need to change its default height which I get dynamically from other function. So I have both values separately, now is there any way by using index value i, can change particular row height?
Tried using below Javascript and it works fine for normal HTML manipulation but in angular (not desired result):
console.log("DynamicHeight: "+ dynHeight +"--> rowIndex: "+ rowIndexValue);
document.getElementById('dynamicTable').rows
x[rowIndexValue].style.height=dynHeight
Looking for solution in angular 6, help greatly appreciated!
angular indexing angular-material row
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
asked Nov 21 '18 at 9:54
SharanSharan
13
Got a index value of a particular row and need to change its default height which I get dynamically from other function. So I have both values separately, now is there any way by using index value i, can change particular row height?
Tried using below Javascript and it works fine for normal HTML manipulation but in angular (not desired result):
console.log("DynamicHeight: "+ dynHeight +"--> rowIndex: "+ rowIndexValue);
document.getElementById('dynamicTable').rows
x[rowIndexValue].style.height=dynHeight
Looking for solution in angular 6, help greatly appreciated!
angular indexing angular-material row
angular indexing angular-material row
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
asked Nov 21 '18 at 9:54
SharanSharan
13
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
asked Nov 21 '18 at 9:54
SharanSharan
13
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
edited Nov 21 '18 at 14:52
Brian Tompsett - 汤莱恩
4,2231338101
4,2231338101
asked Nov 21 '18 at 9:54
SharanSharan
13
asked Nov 21 '18 at 9:54
SharanSharan
13
asked Nov 21 '18 at 9:54
SharanSharan
13
13
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You may get track of the index on cells definitions (*matCellDef="let element; let index = index") and bind to <td> height property ([style.height.px]="getRowHeight(index)"):
component.html
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="column_id_1">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
component.ts
getRowHeight(index) {
return index * 50; // do any calculations and return row height
}
Notice that on this example I've bind directly to [style.height.px], but you could also bind to different properties or bind to height on different ways.
Also, if your calculations for height are simple, you could bind it directly on the template, without using a method for that.
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409371%2fchange-angular-6-material-specific-table-row-dynamically-by-using-index-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You may get track of the index on cells definitions (*matCellDef="let element; let index = index") and bind to <td> height property ([style.height.px]="getRowHeight(index)"):
component.html
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="column_id_1">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
component.ts
getRowHeight(index) {
return index * 50; // do any calculations and return row height
}
Notice that on this example I've bind directly to [style.height.px], but you could also bind to different properties or bind to height on different ways.
Also, if your calculations for height are simple, you could bind it directly on the template, without using a method for that.
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
add a comment |
You may get track of the index on cells definitions (*matCellDef="let element; let index = index") and bind to <td> height property ([style.height.px]="getRowHeight(index)"):
component.html
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="column_id_1">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
component.ts
getRowHeight(index) {
return index * 50; // do any calculations and return row height
}
Notice that on this example I've bind directly to [style.height.px], but you could also bind to different properties or bind to height on different ways.
Also, if your calculations for height are simple, you could bind it directly on the template, without using a method for that.
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
add a comment |
You may get track of the index on cells definitions (*matCellDef="let element; let index = index") and bind to <td> height property ([style.height.px]="getRowHeight(index)"):
component.html
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="column_id_1">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
component.ts
getRowHeight(index) {
return index * 50; // do any calculations and return row height
}
Notice that on this example I've bind directly to [style.height.px], but you could also bind to different properties or bind to height on different ways.
Also, if your calculations for height are simple, you could bind it directly on the template, without using a method for that.
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
You may get track of the index on cells definitions (*matCellDef="let element; let index = index") and bind to <td> height property ([style.height.px]="getRowHeight(index)"):
component.html
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="column_id_1">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
component.ts
getRowHeight(index) {
return index * 50; // do any calculations and return row height
}
Notice that on this example I've bind directly to [style.height.px], but you could also bind to different properties or bind to height on different ways.
Also, if your calculations for height are simple, you could bind it directly on the template, without using a method for that.
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
answered Nov 22 '18 at 1:40
GCSDCGCSDC
515516
515516
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409371%2fchange-angular-6-material-specific-table-row-dynamically-by-using-index-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
