#Is it possible to pass the template 2 levels below?

1 messages · Page 1 of 1 (latest)

lean wing
#

Shortly: I've got a shared component that displays tree. It has defined ngTemplateOutlet so whatever is using it may override the basic template. So far so good.
Now, I've got a AComponent that is using this tree component, but it doesn't override the node template (the default one is used).
I needed to add small adjustment to the AComponent, so I've created BComponent with some additional functionality and now I would like to override the default template, but I'm not sure how to do it.
It looks like this:

// tree component
...
<ng-container
        [ngTemplateOutletContext]="{ $implicit: node }"
        [ngTemplateOutlet]="nodeTemplateRef ? nodeTemplateRef : defaultNodeTemplate"
></ng-container>
...

// AComponent
<app-tree></app-tree>

// BComponent
<app-a>
  <ng-template #nodeTemplate let-node>
  ...
  </ng-template>

How to do that?
stackblitz example:
https://stackblitz.com/edit/angular-sshpug

A angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js.

lean wing
#

I've got an example here. There are 3 components: Parent, Child and Shared. Child is passing the input to shared. But now I'd like to alter Child with Parent and use different template.

fresh swan
#

Post the example you got as a stackblitz: it will be much easier to understand what you actually have, and to modify your example so that it does what you want.

lean wing
lean wing
#

maybe it's not even possible?

fresh swan
#

I'm not sure I undrstand what you want to achieve. But templates, just like everything else, can be passed as inputs. You probably want to do that.

lean wing
#

not entirely - I want to pass a template from level 3 to level 1. let me re-write the example

#

here: https://stackblitz.com/edit/angular-jvhwv6

Shared (level 1) - is displaying value, if receives a template, it will use it, otherwise it will use the default one.
Child (level 2) - is using Shared. by default it does not uses any template, however if it's receives one as input, it should use it
Parent (level 3) - is using Child. It uses different template than Child, so it want to pass in own template. I try to do it but it doesn't work, not entirely understand this I guess

fresh swan
#

My advice would be: instead of using ContentChild to get the template, use an @Input(), in shared and in child:

@Input(): templateToUse | undefined;
<app-shared></app-shared> <-- no template passed, use the default one -->
<app-shared [templateTouse]="customTemplate"></app-shared> <-- custom template passed, use that one -->
<ng-template #customTemplate>...</ng-template>
lean wing
#

hm