We know that @Component decorator functions take object, and this object contains a lot of properties. So in this article we will learn about queries properties which is Inherited from Directive decorator .

Configure the queries that will be injected into the component.

queries: {
    [key: string]: any;
}

Content queries are set before calling the ngAfterContentInit callback.

View queries are set before calling the ngAfterViewInit callback.

The following example shows how the queries are defined and when their results are available in lifecycle hooks:

@Component({
  selector: 'app-component',
  queries: {
    contentChildren: new ContentChildren(ChildComponent),
    viewChildren: new ViewChildren(ChildComponent)
  },
  template: '<child-component></child-component>'
})
export class AppComponent {
  contentChildren: QueryList<ChildComponent>,
  viewChildren: QueryList<ChildComponent>
 
  ngAfterContentInit() {
    // contentChildren is set
  }
 
  ngAfterViewInit() {
    // viewChildren is set
  }
}

It's pretty much the same as the decorators @ViewChild, @ViewChildren, @ContentChild, @ContentChildren, but you can define them within the metadata queries.

We will see @ViewChild, @ViewChildren, @ContentChild, @ContentChildren in subsequent chapters