How to alter Child Component HTML

Question

I have following issue:

I have a Datatable from Angular Material . Now, I want to implement a feature where I can choose one row of the table and drag it into another part of the application.

In HTML it's easy, with the draggable="true" parameter, which I can add to any tag.

However, I don't know the row tags, and can't access them, since Angular Material generates it.

How can I accomplish it? Is it possible to access the component with ViewChild and then add the draggable parameter to every row tag in the Material Table Component?

Or any best practice? Because I think it will always be an issue to customize Angular Material components.

Answer 1

Use the mat-row attribute.

<mat-row draggable="true" *matRowDef="let row; columns: displayedColumns;"></mat-row>

Working stackblitz