Get Instance of a Dart Component defined in html


In my AngularDart app I have template defined in page.html, the interesting chunk of this template is

<skawa-data-table [data]="selectableRowData" [selectable]="true" [colorOddRows]="true">
    <skawa-data-table-col [accessor]="nameAccessor"
    <skawa-data-table-col [accessor]="rankAccessor"

At the end of this section I have a list of button that have to manipulate the component above so I need to access to the dataTable. The problem is the following: in my Dart code I do not have any instance of the data-table in the page.
How is possible to obtain that? I tried to use [(ngModel)] tag but I think i’m out of direction.


What you want to use is ViewChild annotation.

You have 2 possibilities

Use the component class as a selector

SkawaDataTableComponent table;

Add a reference on your component

<skawa-data-table #myDataTable>...</skawa-data-table>
SkawaDataTableComponent table;

The second one is nice if you have the same component multiple times, but you want to select a specific one.

You can also directly use it in your template, without ViewChild

<skawa-data-table #myDataTable>...</skawa-data-table>

<button (click)="myDataTable.doSomething()">

Answered By – Hadrien Lejard

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *