How to get a reference to an element inside an angular 2+ function?

Question

Angular

The classic way to get a link to an element on the page is via ViewChild, ContentChild, etc. with a selector.
for example

@ContentChild('element') element: ElementRef;
@ContentChild('template') template: TemplateRef<any>;

What to do when it is not known in advance which selector to search for an element?
More details:
There is a component inside which ng-template (TemplateRef) templates are passed. Each template receives previously unknown identifiers or template variables:

// app.component.html
<app-foo>
   <ng-template #one>One</ng-template>
   <ng-template #two>Two</ng-template>
</app-foo>

Inside the component, depending on some conditions, one of the received templates is displayed:

// foo.component.html
<ng-template [ngTemplateOutlet]="GetTemplate('one')"></ng-template>

How to do something like this:

// foo.component.ts
...
@ContentChildren(TemplateRef) templates: QuerySelector<TemplateRef<any>>;
...
private GetTemplate(name: string) {
   const searchedTemplate = this.templates.get(name);
   return searchedTemplate;
}

Answer 1

Solution via directive:

@Input() appTemplateName: string;

constructor(protected template: TemplateRef<any>) { }

public get Template(): TemplateRef<any> {
    return this.template;
}

@ContentChildren(TemplateNameDirective) templates: QueryList<TemplateNameDirective>;
...
return this.templates.find(template => template.appTemplateName === requiredName).Template;