import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html' }) export class ParentComponent { @ViewChild(ChildComponent) child: ChildComponent; @ViewChildren(ChildComponent) children: QueryList; }
import { Component, QueryList, ViewChildren } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html' }) export class ParentComponent { @ViewChildren(ChildComponent) children: QueryList; sortChildren(property: string) { this.children.toArray().sort((a, b) => { if (a[property] < b[property]) { return -1; } else if (a[property] > b[property]) { return 1; } else { return 0; } }); } }
import { Component, QueryList, ViewChildren } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html' }) export class ParentComponent { @ViewChildren(ChildComponent) children: QueryListBased on the import statement used in the examples, it can be determined that the package library being used is @angular/core.; filterChildren(property: string, value: any) { this.children.forEach(child => { child.isVisible = child[property] === value; }); } }