Get Instance of a Dart Component defined in html

Issue

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"
                          header="Nome"
                          class="text-column"
                          [skipFooter]="true">
    </skawa-data-table-col>
    <skawa-data-table-col [accessor]="rankAccessor"
                          header="Rank"
                          [skipFooter]="true">
    </skawa-data-table-col>
</skawa-data-table>

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.

Solution

What you want to use is ViewChild annotation.

You have 2 possibilities

Use the component class as a selector

@ViewChild(SkawaDataTableComponent)
SkawaDataTableComponent table;

Add a reference on your component

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

@ViewChild('myDataTable')
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)