Accessing @ViewChild and @ViewChildren of a template declared in a different component than the one where it is host

[Martin-Hogge]

Which @angular/* package(s) are relevant/releated to the feature request?

common, core

Description

We can't access template's view children from the component that host the template via ngTemplateOutlet if the template is not declared inside this same component.

For example:

• A child component takes a TemplateRef as a @Input() and insert this template through ngTemplateOutlet.
• A parent component inject the template.
• The child component can't access views inside the template.

child.component.html

<ng-container #fromParent [ngTemplateOutlet]="template"></ng-container>

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
export class ChildComponent implements AfterViewInit {
  @Input() template: TemplateRef<unknown>;
  @ViewChildren(HelloComponent) hello = new QueryList<HelloComponent>();

  ngAfterViewInit() {
    console.log('Has hello', this.hello.length > 0);
  }
}

parent.component.html

<ng-template #tmp> <hello name="{{ name }}"></hello> </ng-template>
<app-child [template]="tmp"> </app-child>

The log in child component returns false.

I already made a StackOverflow post at https://stackoverflow.com/q/69709254/3520621.

Their is a StackBlitz available for reproductivity at https://stackblitz.com/edit/angular-eopzyw?file=src/app/app.component.ts.

Proposed solution

I'm not sure of what could be a proper solution but as Ritesh Waghela mentioned in the StackOverflow post, the template content has the same host id as the parent component and not the same as the child component.

Maybe the template content should in this case be attached to the child and not the parent ? But I'm not sure if this won't break any actual behaviour.

In this example the ngcontent host id shoulld have been lhp-c2 instead of lhp-c0.

Alternatives considered

In case the template should be use only once, using the power of Content-Projection should do the trick but in my real-life context the template should be reusable. The child-component must be able to set a ngTemplateOutletContext.

Anyway, I'm open to any proposition of an alternative way to access the template's views from child component by keeping the dynamic and reusable power of ng-template.

Thanks.

[Martin-Hogge]

I found a way to get the references of the views inside the template but my solution is not perfect and it has some drawbacks:

• The child component must know the type of its parent;
• The parent must hold a reference to those views;
• The parent must declare each view inside the template as being a "view from template";

So the solution is to get the references from inside the parent:

parent.component.ts

@ViewChildren(HelloComponent) public helloComponents = new QueryList<HelloComponent>();

The child will then get a reference to the parent thanks to Injector.

child.component.ts

private parent: ParentComponent;
constructor(private injector: Injector) {
   this.parent = injector.get<ParentComponent>(ParentComponent);
}

Because the @ViewChildren of the parent will take all the HelloComponent, in template or not, we need to differentiate them. For this I did not find any better solution than adding an attribute inside HelloComponent.

hello.component.ts

@Input() fromTemplate = false;

The parent component can distinguish HelloComponent inside template or not:

parent.component.html

<ng-template #tmp> 
  <hello name="inside template" fromTemplate="true"></hello>
</ng-template>

<hello name="outside template"></hello>
<app-child [template]="tmp"> </app-child>

The child component can now filter parent's views to get what it is searching for.

child.component.ts

ngAfterViewInit() {
  const viewFromTemplate = this.parent.helloComponents.filter(
    (comp) => comp.fromTemplate
  );
}

As I mentioned before, this is working but is has a few drawbacks that should be addressed.

---

I created a stackblitz to demonstrate my solution: https://angular-qgwcdf.stackblitz.io.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[RayNeto]

Please!!! Vote for this feature with a thumbs up in the first post!!! It will be super helpful!!! :(!

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[montella1507]

So.. there is still hope :-)

[dylhunn]

Hello! Can you provide more context on why you want this feature? What problem are you trying to solve that you can't solve today?

[montella1507]

i can probably.

We have something like this.

1. // customer-detail

<dynamic-form>
  <ng-template *field="name">
       <base-component></base-component>
   </ng-template>
</dynamic-form>

2. Dynamic form is a component, which accepts json schema. Json schema can contain "target field", for the instance

 {
   type: "field",
   selector: "name"
 }

we can get all of the templates with the help of that *field directive - so dynamic-form has all of the templates so it can provide them for the dynamic-node components as well.

3. Inside Dynamic-form, there are components ... dynamic node can dynamically take that template and render it inside them. (with templateOutlet). so... FINAL html will be in this case

 <dynamic-form>
   <dynamic-node>
         <base-component>
         </base-component>
   </dynamic-node>
 </dynamic-form>

The problem is, we cannot get instance of that base-component from dynamic-node... it is not accessible neither by dynamic-node.contentChildren / dynamic-node.viewChildren

BaseComponent instance is only accesible by Dynamic-form.. and that looks little bit odd to me... I know, ng-template is in the context of the parent template.. however.. this is instance, which is created INSIDE (because ngTemplateOutlet is inside dynamic-node... So why we cannot access that instance via view/content children in dynamic-node?

It is pretty much viewchild / content child of dynamic-node component as well.

[Rrothschild18]

Hello guys. I got here looking for an awnser to why i couldnt have access to ViewChildrens that were injected inside ng-template from a Parent component.
I'll try to explain what im trying to build.

I have a componente called FormView that is responsible to disptach actions to my store. The store will fetch data from server answer back FormView which in turn will expose those information via ngTemplateOutlet context.

So when im building for example a UsersForm, i use FormView with a entity input that is the entity name from the resource that i want to fetch data from the server and my FormView takes care for me. The FormView exposes an ng-template that i can access outside via #body selector. That template exposes all data that UsersForms cares about. An Json for build forms and the result of an entity id if the URL has an ID "users/:id/edit"

<UsersForm>
<FormView entity='users' >
    <ng-template
      #body
      let-fields="fields"
      let-results="results"
      let-formStore="formStore"
    >

With those fields and results i can create whatever UI want from parent UsersForm. So i use those fields as prop to my FormGenerator component.

<UsersForm>
<FormView entity='users' >
    <ng-template
      #body
      let-fields="fields"
      let-results="results"
      let-formStore="formStore"
    >
       <app-form-generator
         [fields]="fields"
         [columns]="userColumns"
         [fieldsValidators]="userValidators"
       >
      

Everything worked nice when im at the "create mode" for the FormView. Its edit mode when i have an route with /edit. I thougth that i could patch thestore result value that was fetched from server to my FormGenerator getting an reference by @ViewChildren(FormGeneratorComponent) formRefs: QueryList<FormGeneratorComponent> inside FormView and looping trougth my formGroups and patching values...

I can still pass [results] to my FormGenerator or maybe get those form references information via service. Im new to Angular world so trying to build things that i used to see in Vue world.

[forbreak]

When I use templates nested, I want to access the component tree through the injector. But after the current template is nested, the tree structure of the content cannot be obtained at all. I don't know why the template is designed like this, which is a bit contrary to common sense.

[israrassi]

Any updates?

[steffbeckers]

Any solutions or workarounds?

[montella1507]

There are lot of annoying workarounds like sharing with CustomService and posting injector...

But... these issues really complicating basic component composition are usually ignored by Angular team.

We have to wait 6-7 years, like in case of Reactive forms and their events....

So just start a family, build a house, plant a tree and wait with hope.