ViewChildren passing multiple components

Question

Why can't I pass multiple components within the @ViewChildren?

Currently have this:

 @ViewChildren(ColorFilterComponent, TransmissionFilterComponent)
 public filters: QueryList<Filter>;

Both components implements my Filter interface:

export declare abstract class Filter {
    abstract applyFilter(vehicles: Vehicle): boolean;
}

At a certain point I am iterating through filters and calling applyFilter() method for all components within the viewChildren.

However when I do a simple log:

console.log(this.filters.toArray());

It contains only one filter. The other one is not here.

What would be a good best practice in this case?

Answer 1

HTML:

 <colorfilter #filter></as-colorfilter>
 <transmissionfilter #filter></as-transmissionfilter>

Component:

@ViewChildren('filter')
public filters: QueryList<Filter>;