CODEWITHSUNDEEP
angulartypescriptangular5angular6
TKDev
TKDev

Reputation: 503

setting context of input template to this using ng-template, ng-container & ngTemplateOutlet

I have a costumizable component that uses an ng-container to ether show a default template or a passed in template. The problem is I need the passed in template to have its context set to the component its nested in. I tried setting the context property on the ngTemplateOutlet directive to an object that holds this of the nesting component, however it did not work.

Parent Component HTML:

<ng-template #didYouVisitQuestion>
    <div class="mt-10">
        <ds-radio-buttons
            ...
            (onSelectRadio)="alertx()"></ds-radio-buttons>
    </div>
</ng-template>
<nesting-component [questionTemplate]="didYouVisitQuestionTpl"></ds-rate-component>

Parent Component Class/TS:

@ViewChild('didYouVisitQuestion')
private didYouVisitQuestionTpl: TemplateRef<any>;

Child Component HTML

<ng-template #defaultQuestion>
    some default html...   
</ng-template>
<ng-container *ngTemplateOutlet="questionTemplate ? questionTemplate: defaultQuestion;context:cntxt">
</ng-container>

Child Component Class/TS

@Input()questionTemplate: TemplateRef<any>;
constructor() {
    this.cntxt = this;
}
alertx() {
    window.alert('alertx');
}

The Problem:

I need the alertx() method activated on the nesting component, currently it is activated on the parent component. passing the ngTemplateOutlet a context of this did not work. How do I make the passed in template to have the right context in this situation?

Upvotes: 2

Views: 1522

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

Please find the Stackblitz code on passing scope.

https://stackblitz.com/edit/angular-cpnguf

Upvotes: 0

Related Questions