custom component in .body()

[harshpatel79]

Hey can we add custom components in .body() method.

[RevProg]

Same issue

[zaiz91]

+1

[Jaskar14]

+1

[segalz]

I need it too :(

[shlomiassaf]

This is a change to the bootstrap plugin, if anyone wants to give it a shot I will gladly accept PRs.

If not I will try to find time but I'm pretty busy now

[FredLoney]

A work-around is to set the modal body to the inner HTML of a hidden child component as shown in this example. A refinement of this work-around is to make the child a dynamic component.

[F3L1X79]

+1

[ohgasauraus]

A work-around is to set the modal body to the inner HTML of a hidden child component as shown in this example. A refinement of this work-around is to make the child a dynamic component.

I have tried this, however i encounter the following error "Argument of type 'SafeHtml' is not assignable to parameter of type 'string'." for this statement .body(this.child.innerHTML).

Am i using the wrong version of angular2-modal?

[FredLoney]

SafeHtml is the tag interface Angular puts on the bypassed string. Perhaps the compile error you show is because of stronger type-checking. At any rate, the solution is to wrap the bypass result in a String() conversion. The example is updated with this improvement.

Please note that the example is only a crude work-around for this particular issue, as indicated in the ChildComponent comment. My project is migrating from angular2-modal to the new ng-bootstrap modal. ng-bootstrap modal has the embedded subcomponent capability. However, this is a small part of a larger CSS migration to Bootstrap 4, which is a significant undertaking probably unwarranted for the modal alone.

[hicham-zreik]

@FredLoney please can you explain what do you mean by "wrap the bypass result in a String() conversion" ?

[FredLoney]

cf. the example link above:

get innerHTML(): string {
   // TODO - remove this work-around when the aforementioned issue
  // is fixed.
  let html = this.elementRef.nativeElement.innerHTML;
  let raw = this.sanitizer.bypassSecurityTrustHtml(html);
  return String(raw);
}

[hicham-zreik]

@FredLoney thank you so much the error has solved but I have another error "Cannot read property 'innerHTML' of undefined" Am i using the wrong version of angular2-modal?

[hicham-zreik]

Sry I am junior web developper and I am beginner in angular 2 but I have searched a lot and my probleme is the ViewChild(ChildComponent)not resolving component,any help ?? Thank in advance

[FredLoney]

I'm afraid I don't understand the question. Perhaps you should post it with a plunkr example on StackOverflow with the [angular2] tag.

[Nciso]

@hicham-zreik maybe you forgot to add the tag of your child component in the parent template. See the plunker example in file app.component at line 12, and in file childcomponent.ts at line 6

[Nciso]

@hicham-zreik also if you have some input tags in the child component, when you append the body of the modal, instead of wrapping the innerHTML in a string as @FredLoney did, you can append it like .body(this.child.innerHTML as any) and there will be no error in the bidding, but I don't know the implications of doing it in this way