0

Following tutorial on creating dynamic templates in Angular 2 : How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

I managed to create dynamic component, but when i try to add pipe (exponentialStrength) inside template it breakes with following error: 

Uncaught Error: Template parse errors:
The pipe 'exponentialStrength' could not be found

I also tryed to add several pipes on authors plunker code preview, but it shows same error.

Is there way to implement pipe while creating dynamic template?

This is my html template:

  <div  [style]="ContentCss | safeCss">
    <input type="text" class="form-control" [disabled]="Disabled" [(ngModel)]="Entity[FieldName]" >
  </div>

and component:

import { Component, Input } from '@angular/core';
import { Observable } from "rxjs/Rx";
import { SafeHtml, SafeCss } from '../Components/sanitizeHtml.component'

@Component({
    selector: 'textbox',
    templateUrl: './textbox.component.html',
})
export class Textbox {

    @Input() public Entity: any;
    @Input() public Disabled: boolean;


}

pipe (error shows even with angular2 default pipes): 

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeHtml' })
export class SafeHtml implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(html) {
        return this.sanitizer.bypassSecurityTrustHtml(html); 
    }
}

@Pipe({ name: 'safeCss', pure:false })
export class SafeCss implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(style) {
        return this.sanitizer.bypassSecurityTrustStyle(style);
    }
}
damatano
  • 71
  • 11
  • Can you show the module? You need to `import { ExponentialStrength } from './somewhere/'exponentialstrength-pipe'` – Swoox Sep 06 '17 at 10:49
  • @Swoox i just edited post with code example – damatano Sep 06 '17 at 10:57
  • show the code where you create a dynamic component – Max Koretskyi Sep 06 '17 at 10:59
  • @AngularInDepth.com i was following tutorial, error can be simulated on authors plunker: http://plnkr.co/edit/wh4VJG?p=preview , by adding uppercase pipe in template of file app/parts/string.ts – damatano Sep 06 '17 at 11:03
  • it's huge answer with irrelevant code, show what you use exactly in your case. this article [Here is what you need to know about dynamic components in Angular](https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e) shows how this should be done – Max Koretskyi Sep 06 '17 at 11:04

0 Answers0