Angular 2 + Google Maps Places Autocomplete, append after Input [Dom manupulation]
If you want to insert new component or template after HTML component, you need to use the ViewContainerRef service.
Get ViewContainerRef with dependency injection:
import { Component,ViewContainerRef,ViewChild } from '@angular/core';
@Component({
selector: 'vcr',
template: `
<ng-template #tpl>
<h1>ViewContainerRef</h1>
</ng-template>
`,
})
export class VcrComponent {
@ViewChild('tpl') tpl;
constructor(private _vcr: ViewContainerRef) {
}
ngAfterViewInit() {
this._vcr.createEmbeddedView(this.tpl);
}
}
@Component({
selector: 'my-app',
template: `<vcr></vcr>`,
})
export class App {
}
We are injecting the service in the component. In this case, the container will refer to your host element ( the vcr element ) and the template will be inserted as a sibling of the vcr element.
I got a very deep description on viewcontainerref. Read it, you will understand lot of things.