Angular 2 NgTemplateOutlet with string variable.

Question

I would like to have a string of a template in the .ts-file and add it to the NgTemplateOutlet.

I was hoping this would work but it did not.

<template [ngTemplateOutlet]="template" [ngOutletContext]="$implicit">

where template is a string-variable in the scope. So I implemented this, however this does not work as I wanted it to either.

import { Component, AfterViewInit } from '@angular/core';
import { ToastController } from 'ionic-angular';
import { ModalController } from 'ionic-angular';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Component({
 selector: 'dynamic-report',
 templateUrl: 'dynamicReport.html',
})
export class DynamicReport implements AfterViewInit{
 private _template: string;
 context: any;

 public get template() : SafeHtml {
   return this.sanitizer.bypassSecurityTrustHtml(this._template);
 }

 constructor(public toastCtrl: ToastController, public modalCtrl:ModalController, private sanitizer: DomSanitizer) {
   this._template = "<button (click)='testFunction1('2')'>Click here 2!</button>";
   this.context = this;

 }

  testFunction1(message){
    console.log(message);
  }

  ngAfterViewInit() {

  }

}

HTML:

<template [ngTemplateOutlet]="report" [ngOutletContext]="$implicit">

</template>
<template #report>
  <button (click)='testFunction1("1")'>Click here 1!</button>
  <div [innerHtml]="template"></div>
</template>

Which results in this: I get to buttons in the view. The first button which sends the message 1, prints out 1 to the console. The other button does however not print out any message.

I would like to keep to templatestring in the .ts file so how do i implement this so that the template can get a hold of the functions?

@GünterZöchbauer from the docs: Note: using the key $implicit in the context object will set it's value as default. However it does not seem to be used in any valid way in the provided code. — altschuler
– altschuler, Commented Dec 8, 2016 at 23:52
It should be <template [ngTemplateOutlet]="template" [ngOutletContext]="{$implicit: 'somecontextValue}"> — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 20, 2016 at 11:26

Günter Zöchbauer · Accepted Answer · 2020-04-30 04:04:18Z

5

update Angular 5

ngOutletContext was renamed to ngTemplateOutletContext

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

If you want to use a string that contains Angular2 specific syntax like binding, then you need to create a component at runtime where this string is used as components template. See also Equivalent of $compile in Angular 2

$implicit can be used like

<template [ngTemplateOutlet]="template" [ngOutletContext]="{$implicit: 'somecontextValue'}">

Then you can make somecontextValue available like

<template #report let-context>
  <div>{{context}}</div> <!-- outputs `somecontextValue` -->
</template>

edited Apr 30, 2020 at 4:04

answered Dec 20, 2016 at 11:30

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Günter Zöchbauer Over a year ago

I see :D No prob. Just update the correct question. You can delete the comments that are not related to this q+a.

Edgar Quintero Over a year ago

I think might be missing a single quote, or added one accidentally.

Collectives™ on Stack Overflow

Angular 2 NgTemplateOutlet with string variable.

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related