How can I get parent class to access child class in angular 2?

Question

I've got an Angular 2 application with Typescript. I'm wondering how to access a child class from a parent class.

The parent class is like this:

@Component({
    selector: 'all-data-page',
    templateUrl: './all-data-page.component.html',
    styles: [require('./all-data-page.style.scss')]
})
export class AllDataPageComponent implements OnInit {
...
}

Its selector looks like this:

<all-data-page [allData]="results.top3.Rows" type="Safeguards" *ngIf="!!results.AllDataSafeguards">
</all-data-page>

The child looks like this:

@Component({
  selector: 'all-data-row',
  templateUrl: './all-data-row.component.html',
  styles: [ require('./all-data-row.style.scss') ],
  encapsulation: ViewEncapsulation.None
})
export class AllDataRowComponent implements OnInit {
...
}

And its selector looks like this:

 <div class="data-list">
        <all-data-row *ngFor="let item of categoryRows; let last=last"
                      relativeWidth="100"
                      [item]="item.chartData"
                      [last]="last"
                      [ChartLabel]="item.chartData.ChartLabel"
                      [acmCat1]="item.chartData.acmCat1"
                      [acmCat2]="item.chartData.acmCat2"
                      [acmCat3]="item.chartData.acmCat3"
                      [acmCat4]="item.chartData.acmCat4"
                      [acmCat5]="item.chartData.acmCat5"
                      (click)="selectCategory(item.fullObject)"
                      [selected]="selected">
        </all-data-row>
    </div>

I would like to know how to reference the child class from the parent class.

Various sites that come up on google suggest using @ViewChildren but that doesn't work for me. The Chrome console just tells me "ViewChildren is not defined".

What must I do to get the parent class to access the child class?

Thanks.

Your code doesn't show how you use `@ViewChildren()` See https://stackoverflow.com/questions/32693061/how-can-i-select-an-element-in-a-component-template/35209681#35209681 for more info — Günter Zöchbauer, Nov 14 '17 at 20:50
Are you trying to access the child class itself or the content of the HTML of the child? — Prav, Nov 14 '17 at 23:49
The child class itself. It contains a variable that isn't always present in the html. It's used to dynamically inject a tooltip. I want to update the text of the tooltip based on a user action, but the tooltip won't be on the page when the user performs the action. — gib65, Nov 15 '17 at 15:07

score 0 · Answer 1 · answered Nov 14 '17 at 22:24

I'm not using @ViewChildren. When I DID use @ViewChildren (and got the error) I did it like so:

@Component({
    selector: 'all-data-page',
    templateUrl: './all-data-page.component.html',
    styles: [require('./all-data-page.style.scss')]
})
export class AllDataPageComponent implements OnInit {
@ViewChildren(AllDataRowComponent) AllDataRowComponent : safeguardRow;
...
}

I get the same error with the link you provided.

How can I get parent class to access child class in angular 2?

1 Answers1