How can I render an Angular2 component to a string?

Question

I would like to be able to use the Angular2 template syntax when building a Google Maps InfoWindow.

As far as I can tell, this means passing a a component as a template string to the content property in the InfoWindow constructor object.

If this is the case, I believe I need to stringify the component template. Is this correct (and possible)?

Here is an example of what I think I need to do:

// Component

import {Component} from 'angular2/core';
import {Thing} from './something/in/my/app/thing.model.ts';

@Component({
  selector: 'my-infowindow',
  template: `<p>This is an infowindow for {{ something.name }}</p>`
})
export class MyInfoWindowComponent {
    constructor(public something: Thing) {}
}


// Implementation

import {Thing} from './something/in/my/app/thing.model.ts';
import {MyInfoWindowComponent} from './path/to/infowindow.component';

/* { ...stuff... } */

private _buildInfoWindow(thing: Thing): google.maps.InfoWindow {
    return new google.maps.InfoWindow({
      /* v this is what I want v */
      content: new MyInfoWindowComponent(thing).toString() 
      /* ^ this is what I want ^ */
    });
}

Take a look at ElementRef : angular.io/docs/ts/latest/api/core/ElementRef-class.html or ViewChild : angular.io/docs/ts/latest/api/core/ViewChild-var.html — Langley
– Langley, Commented Jan 13, 2016 at 17:16
I can't see the point of creating an Angular component and then stringify it to pass it to infowindow. Why don't you just pass a string instead. Is it because you want to use data-binding? This won't be updated after passing it to infowindow anyway. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 13, 2016 at 17:19
@GünterZöchbauer - right, I don't need the databinding - the template sytax just seems much nicer than an awful stringbuilder. (especially for ngIf and ngFor). Does that make sense? — drewwyatt
– drewwyatt, Commented Jan 13, 2016 at 17:20
You could use ElementRef like @Langley explained and use innerHTML. Using Angular as string template builder is extremely inefficient compared to stringbuilder. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 13, 2016 at 17:25
@GünterZöchbauer yuck. the warning in the docs makes me feel weird about that. And if it really has poor performance I probably will not use it, but if you would like to post an implementation of that as an answer I will mark it as accepted. — drewwyatt
– drewwyatt, Commented Jan 13, 2016 at 17:36

Langley · Accepted Answer · 2016-01-13 18:29:39Z

2

Try passing the ElementRef angular.io/docs/ts/latest/api/core/ElementRef-class.html.

Or something with ViewChild:

https://angular.io/docs/ts/latest/api/core/ViewChild-var.html

I will not write the code for you, but the idea is something like this:

@Component({
  selector: 'my-infowindow',
  template: `<p #kiddo>This is an infowindow for {{ something.name }}</p>`
})
export class MyInfoWindowComponent {
    @ViewChild('kiddo') viewChild;
    constructor(public something: Thing) {}
    ngOnInit(){
        yourFunction(this.viewChild); //or viewChild.innerHtml or w/e works
    }
}

answered Jan 13, 2016 at 18:29

Langley

5,3442 gold badges29 silver badges42 bronze badges

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

1 Comment

Федор Усаков Over a year ago

Sorry, but it is not clear. How do I inject compiled HTML from component viewChild property to google.maps.InfoWindow content:string?

Collectives™ on Stack Overflow

How can I render an Angular2 component to a string?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related