0

I want to be able to use the innerHtml of component tag before it will be replaced with component template. Hard to explain to be honest, here is an example.

Here is component(basically it is modal popup of bootstrap):

@Component({
    selector: 'div.modal[show]',
    template: require('./popup.component.html')
})
export class PopupComponent implements OnInit, OnChanges, OnDestroy {

    @Input() show: boolean;
    @Input() headerText: string;
    body: string;


    constructor(private el: ElementRef, private renderer: Renderer) {
        // get the body of tag before replacement with it's template and assign it to this.body somehow.
    }

    ngOnInit() {

    }

    ngOnChanges(changes: SimpleChanges) {
        $(this.el.nativeElement).modal({
            show: changes["show"].currentValue,
            keyboard: false
        });
    }

    ngOnDestroy() {
        $(this.el.nativeElement).data("modal", null);
    }
}

And its template:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            {{headerText}}
        </div>
        <div class="modal-body">
            {{body}} // Body have to be placed here
        </div>
    </div>
</div>

And its usage:

            <div class="modal" [show]="true" [headerText]="'Edit standard field'">
                 <span>Something that have to be placed in div with class - modal-body</span>
            </div>

And somewhere else:

            <div class="modal" [show]="true" [headerText]="'Edit standard field'">                    
                <h2>Something else that have to be placed in div with class - modal-body</h2>
            </div>

So basically I am trying to get <span>Something else that have to be placed in div with class - modal-body</span> and replace the - {{body}} with it. Any idea how to achive it?

Maris
  • 4,608
  • 6
  • 39
  • 68
  • Why do you need to do this before the template will be rendered? ... or why at all? – Günter Zöchbauer Sep 14 '16 at 12:25
  • I think a better approach would be to pass components to be added by the modal on request. You can use a similar approach as explained in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 but use a shared service to pass commands to the modal instead of data binding. – Günter Zöchbauer Sep 14 '16 at 12:26
  • @GünterZöchbauer . To answer a question "why?" - for instance popup, it contains common functionality always. Same template, same actions on click on - 'x' button. The differences is header text and content of popup. So I would like to pass always a different markup as a body of ng2-component. – Maris Sep 14 '16 at 12:49
  • Why don't you add a reusable component at this place instead of tinkering with the DOM? – Günter Zöchbauer Sep 14 '16 at 12:50
  • In your suggested solution I will have to create separate component for each modal popup content(for instance my popup can contain only - "

    Hello world

    " and to make separate component for that is great overhead.)     – Maris Sep 14 '16 at 12:51
  • That what I am trying to do. I want to create reusable component called - "popup.component" which will be used in components(for instance): 'imageUploadPopup.component' and 'userInfoPopup.component' and in N other places. So I am trying to adjust to DRY principle. – Maris Sep 14 '16 at 12:53
  • Why a separate component for each modal? What you try to do by modifying the template is so **wrong** that the overhead of building 50 components would be justified ;-) – Günter Zöchbauer Sep 14 '16 at 12:53
  • "So I am trying to adjust to DRY principle.". In Angular2 you reuse by building components, directives, pipes and services. – Günter Zöchbauer Sep 14 '16 at 12:54
  • That exactly what I try to avoid(building 1000500x different popup components). I am trying to make one generic popup.component and pass as body anything I would like to. – Maris Sep 14 '16 at 12:56
  • That's fine, create a popup component and and as "body" pass again a component. – Günter Zöchbauer Sep 14 '16 at 12:56
  • Once more. Body of popup can contain only - '

    Hello world

    ', or - 'Nothing here yet!' as well as some complex logic. Do you suggest to create separate component even for - 'Nothing here!'?     – Maris Sep 14 '16 at 13:00
  • You can use `
    {{message}}
    ` or `

    Hello world

    Nothing here!"
    `. I suggest you update the question to explain better what you actually try to accomplish. Your initial approach just doesn't fit to Angular2 at all.     – Günter Zöchbauer Sep 14 '16 at 13:04
  • @GünterZöchbauer yes, looks like you are right. But how to resolve/render component by name in place of body. I am using NG2 RC6. Can you give some advance? – Maris Sep 14 '16 at 14:21
  • See the link in my 2nd comment above. – Günter Zöchbauer Sep 14 '16 at 14:23
  • Approach in that post is not valid anymore, cause there is no `DynamicContentLoader` anymore. – Maris Sep 14 '16 at 14:27
  • It should contain all updates since DCL was deprecated. For RC.6 only a Plunker that demonstrates how it works in general is added but not for the exact use case in the question. My answer should contain everything you need. In your case perhaps sending type information using a shared service would be a better fit instead of the `[type]="someType"` binding. – Günter Zöchbauer Sep 14 '16 at 14:31

0 Answers0