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.

Tags:

Angular