How do I change only the clicked button within mat-table to another (each row has same initial button)How to dynamically show/hide some rows in mat-table?Sorting with dynamic column - Angular materiali have a table which are having maticon buttons after clicking on button it should display 2 buttons at end of the tableAngular Material table row (click) event triggered when clicking an action in a cell within that rowMaterial table : Sorting and displaying grouped dataAdd Multiple columns for same header on click button dynamically in mat-table angularHow to always display two types of rows in angular material tableHow to show mat-spinner for each row in mat-table in angular 6How to show mat-table in Expanded Mat-row rather than in Main tableHow to filter data and display it on Detailed Mat-table
Adding gfci reset
Does Evolution Sage proliferate Blast Zone when played?
Minimizing medical costs with HSA
How can I effectively map a multi-level dungeon?
Chess problem: Make a crossword in 3 moves
Did Snape really give Umbridge a fake Veritaserum potion that Harry later pretended to drink?
Refund Oyster Card online
Using Sed to add counter to keyword
Was Wolfgang Unzicker the last Amateur GM?
How did sloshing prevent the Apollo Service Module from moving safely away from the Command Module and how was this fixed?
How come having a Deathly Hallow is not a big deal?
What happens if the limit of 4 billion files was exceeded in an ext4 partition?
Is it possible to spoof an IP address to an exact number?
What instances can be solved today by modern solvers (pure LP)?
Campanolo record power meter crank with veloce crankset
Does the Defensive Duelist feat stack with the Warforged integrated protection?
Should I cheat if the majority does it?
Convenience stores in India
PhD: When to quit and move on?
How to travel between two stationary worlds in the least amount of time? (time dilation)
Why did the "Orks" never develop better firearms than Firelances and Handcannons?
Should you add specific garden-fresh herbs to a stew at the beginning or the end?
Two queries on triangles, the sides of which have rational lengths
My players like to search everything. What do they find?
How do I change only the clicked button within mat-table to another (each row has same initial button)
How to dynamically show/hide some rows in mat-table?Sorting with dynamic column - Angular materiali have a table which are having maticon buttons after clicking on button it should display 2 buttons at end of the tableAngular Material table row (click) event triggered when clicking an action in a cell within that rowMaterial table : Sorting and displaying grouped dataAdd Multiple columns for same header on click button dynamically in mat-table angularHow to always display two types of rows in angular material tableHow to show mat-spinner for each row in mat-table in angular 6How to show mat-table in Expanded Mat-row rather than in Main tableHow to filter data and display it on Detailed Mat-table
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
In each row within the mat-table displayed column, an initial View button is displayed. When clicking on one View button and the Close button is displayed in ALL rows after clicking one View button.
Initial state of mat-table
Close button in each row
<mat-table [dataSource]="purchaseSource">
<ng-container matColumnDef="projectName">
<mat-header-cell *matHeaderCellDef>Project Name</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.projectName </mat-cell>
</ng-container>
<ng-container matColumnDef="supplier">
<mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.supplier_name </mat-cell>
</ng-container>
<ng-container matColumnDef="profName">
<mat-header-cell *matHeaderCellDef>Purchase Author</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.author_name </mat-cell>
</ng-container>
<ng-container matColumnDef="submittedDate">
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.submittion_date </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.status </mat-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.total </mat-cell>
</ng-container>
<ng-container matColumnDef="details">
<mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
<mat-cell *matCellDef="let purchase">
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="colToDis"></mat-header-row>
<mat-row *matRowDef="let row; columns: colToDis"></mat-row>
</mat-table>
The html lines of code above, containing the button on each row are:
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
The following is the typescript methods that the buttons execute. (for your information)
/** Displays the Purchase Table by reseting all display boolean objects. Causing the View button to be displayed */
displayPurchaseTable()
this.resetDisplays();
this.selectedPurchase = null;
/** Displays the details of the given purchase. */
displaySelectedDetails(purchase: Purchase)
this.toDisplay('details');
this.selectedPurchase = purchase;
/**
* Displays either the purchase-create or purchase-details
* or purchase-sheets component.
*/
toDisplay(toDisplay: string)
this.selectedPurchase = null;
this.resetDisplays();
switch (toDisplay)
case 'createPurchase': this.display.createPurchase = true; break;
case 'details': this.display.details = true; break;
default: this.display.sheets = true; break;
Is it possible to display the Close button only in the row in which the user clicked the View button?
angular mat-table edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
add a comment |
In each row within the mat-table displayed column, an initial View button is displayed. When clicking on one View button and the Close button is displayed in ALL rows after clicking one View button.
Initial state of mat-table
Close button in each row
<mat-table [dataSource]="purchaseSource">
<ng-container matColumnDef="projectName">
<mat-header-cell *matHeaderCellDef>Project Name</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.projectName </mat-cell>
</ng-container>
<ng-container matColumnDef="supplier">
<mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.supplier_name </mat-cell>
</ng-container>
<ng-container matColumnDef="profName">
<mat-header-cell *matHeaderCellDef>Purchase Author</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.author_name </mat-cell>
</ng-container>
<ng-container matColumnDef="submittedDate">
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.submittion_date </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.status </mat-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.total </mat-cell>
</ng-container>
<ng-container matColumnDef="details">
<mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
<mat-cell *matCellDef="let purchase">
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="colToDis"></mat-header-row>
<mat-row *matRowDef="let row; columns: colToDis"></mat-row>
</mat-table>
The html lines of code above, containing the button on each row are:
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
The following is the typescript methods that the buttons execute. (for your information)
/** Displays the Purchase Table by reseting all display boolean objects. Causing the View button to be displayed */
displayPurchaseTable()
this.resetDisplays();
this.selectedPurchase = null;
/** Displays the details of the given purchase. */
displaySelectedDetails(purchase: Purchase)
this.toDisplay('details');
this.selectedPurchase = purchase;
/**
* Displays either the purchase-create or purchase-details
* or purchase-sheets component.
*/
toDisplay(toDisplay: string)
this.selectedPurchase = null;
this.resetDisplays();
switch (toDisplay)
case 'createPurchase': this.display.createPurchase = true; break;
case 'details': this.display.details = true; break;
default: this.display.sheets = true; break;
Is it possible to display the Close button only in the row in which the user clicked the View button?
angular mat-table edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
add a comment |
In each row within the mat-table displayed column, an initial View button is displayed. When clicking on one View button and the Close button is displayed in ALL rows after clicking one View button.
Initial state of mat-table
Close button in each row
<mat-table [dataSource]="purchaseSource">
<ng-container matColumnDef="projectName">
<mat-header-cell *matHeaderCellDef>Project Name</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.projectName </mat-cell>
</ng-container>
<ng-container matColumnDef="supplier">
<mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.supplier_name </mat-cell>
</ng-container>
<ng-container matColumnDef="profName">
<mat-header-cell *matHeaderCellDef>Purchase Author</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.author_name </mat-cell>
</ng-container>
<ng-container matColumnDef="submittedDate">
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.submittion_date </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.status </mat-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.total </mat-cell>
</ng-container>
<ng-container matColumnDef="details">
<mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
<mat-cell *matCellDef="let purchase">
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="colToDis"></mat-header-row>
<mat-row *matRowDef="let row; columns: colToDis"></mat-row>
</mat-table>
The html lines of code above, containing the button on each row are:
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
The following is the typescript methods that the buttons execute. (for your information)
/** Displays the Purchase Table by reseting all display boolean objects. Causing the View button to be displayed */
displayPurchaseTable()
this.resetDisplays();
this.selectedPurchase = null;
/** Displays the details of the given purchase. */
displaySelectedDetails(purchase: Purchase)
this.toDisplay('details');
this.selectedPurchase = purchase;
/**
* Displays either the purchase-create or purchase-details
* or purchase-sheets component.
*/
toDisplay(toDisplay: string)
this.selectedPurchase = null;
this.resetDisplays();
switch (toDisplay)
case 'createPurchase': this.display.createPurchase = true; break;
case 'details': this.display.details = true; break;
default: this.display.sheets = true; break;
Is it possible to display the Close button only in the row in which the user clicked the View button?
angular mat-table edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
In each row within the mat-table displayed column, an initial View button is displayed. When clicking on one View button and the Close button is displayed in ALL rows after clicking one View button.
Initial state of mat-table
Close button in each row
<mat-table [dataSource]="purchaseSource">
<ng-container matColumnDef="projectName">
<mat-header-cell *matHeaderCellDef>Project Name</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.projectName </mat-cell>
</ng-container>
<ng-container matColumnDef="supplier">
<mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.supplier_name </mat-cell>
</ng-container>
<ng-container matColumnDef="profName">
<mat-header-cell *matHeaderCellDef>Purchase Author</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.author_name </mat-cell>
</ng-container>
<ng-container matColumnDef="submittedDate">
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.submittion_date </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.status </mat-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
<mat-cell *matCellDef="let purchase"> purchase.total </mat-cell>
</ng-container>
<ng-container matColumnDef="details">
<mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
<mat-cell *matCellDef="let purchase">
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="colToDis"></mat-header-row>
<mat-row *matRowDef="let row; columns: colToDis"></mat-row>
</mat-table>
The html lines of code above, containing the button on each row are:
<button mat-button color="primary" *ngIf=!display.details
(click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details
(click)="displayPurchaseTable()">Close</button>
The following is the typescript methods that the buttons execute. (for your information)
/** Displays the Purchase Table by reseting all display boolean objects. Causing the View button to be displayed */
displayPurchaseTable()
this.resetDisplays();
this.selectedPurchase = null;
/** Displays the details of the given purchase. */
displaySelectedDetails(purchase: Purchase)
this.toDisplay('details');
this.selectedPurchase = purchase;
/**
* Displays either the purchase-create or purchase-details
* or purchase-sheets component.
*/
toDisplay(toDisplay: string)
this.selectedPurchase = null;
this.resetDisplays();
switch (toDisplay)
case 'createPurchase': this.display.createPurchase = true; break;
case 'details': this.display.details = true; break;
default: this.display.sheets = true; break;
Is it possible to display the Close button only in the row in which the user clicked the View button?
angular mat-table angular mat-table edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
edited Mar 25 at 19:35
georgeawg
37.5k11 gold badges56 silver badges73 bronze badges
37.5k11 gold badges56 silver badges73 bronze badges
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
asked Mar 25 at 18:42
Kevin J Ramirez PomalesKevin J Ramirez Pomales
11 bronze badge
11 bronze badge
add a comment |
add a comment |
0
active
oldest
votes
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%2f55344514%2fhow-do-i-change-only-the-clicked-button-within-mat-table-to-another-each-row-ha%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
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%2f55344514%2fhow-do-i-change-only-the-clicked-button-within-mat-table-to-another-each-row-ha%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
