How to convert Angular2 component to string?

Question

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

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

If so, I think I need to reinforce the component template. Is it correct (and possible)?

Here is an example of what 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 ^ */ }); } 

Answer 1

Try passing 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 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 } }