How is an instance of a parent component passed into a child component constructor?

Question

I'm trying to understand how the table component works in PrimeNG. I'm confused as to how an instance of a parent component is passed into the constructor of the child component.

Here is the source to the TableBody component taking in an instance of the Table component. PrimeNG Table Source

So my understanding is that the TableBody component has an attribute as the selector. It is passed in the columns and bodyTemplate from the parent (Table) component. Now what I don't understand is how an instance of the parent component (Table) is passed into it when it is created.

Snippet of the Table component template

            <div class="ui-table-wrapper" *ngIf="!scrollable">
            <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
                <thead class="ui-table-thead">
                    <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
                </thead>
                <tfoot *ngIf="footerTemplate" class="ui-table-tfoot">
                    <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
                </tfoot>
                <tbody class="ui-table-tbody" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
            </table>
        </div>

Full Source: Github source

Any insight is greatly appreciated.

Answer 1

The attributes [pTableBody] and [pTableBodyTemplate] has in the parent component has declared @Input in the ts file. And the "columns" is binded to a variable with the same name.

Read a bit about Input and Output https://www.sitepoint.com/angular-2-components-inputs-outputs/

Hope I helped a bit.