0

I'm trying to pass a component into another component through @Input(), however Angular is giving me the message that this is unsafe and I added a sanitizeHtml pipe which is working for components like inputfields, but not for my own written components like a google map component or a table component. Sanitize is not working for my own components somehow. Does anyone know a solution to this problem?

Here is my sanitize pipe:

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

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform  {

  constructor(private sanitizer: DomSanitizer){}

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

The tabsbar component uses the sanitize pipe:

<md-tab-group>
  <md-tab *ngFor="let label of labels">
      <div *ngFor="let tag of routerTags">
        <div [innerHTML]="tag | sanitizeHtml"></div>
        {{tag}}
      </div>
  </md-tab>
</md-tab-group>

And here is my component which needs to pass the other self-written components:

@Component({
  selector: 'dashboard_view',
  templateUrl: './dashboard_view.html',
  providers:  [QuestionService]
})
export class DashboardViewComponent {

  questions: any[];

  constructor(service: QuestionService) {
    this.questions = service.getQuestions();
  }

  public htmlProperty: string = '<input type="text" name="name">';
  public maps: string = '<maps></maps>';

}

And the html which takes those strings to convert to html-tags:

 <tabsbar [labels]="['Kaart','Lijst','Alerts']" [icons]="['person','home']" [routerTags]="[htmlProperty,maps]"></tabsbar>
viddrawings
  • 255
  • 1
  • 4
  • 19
  • Your issue seems to be a missconception, I don't see a case where you have to pass a component to another one, if you need to do so, you can use selectors. – Supamiu Jun 22 '17 at 09:26
  • @Supamiu what i'm trying to do is dynamically add selectors underneath the corresponding tab. So I have a tab + the component which need to be shown when tab is clicked – viddrawings Jun 22 '17 at 09:29
  • The only way I see is to use the component factory itself: https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components – Supamiu Jun 22 '17 at 09:35

0 Answers0