Angular 2 + Google Maps Places Autocomplete, append after Input [Dom manupulation]

Question

I have used "Angular 2 + Google Maps Places Autocomplete" search. It is basically an input type text like that:

<input placeholder="search your location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #searching="">

I want to know about the list, which appears after typing some text. I want to create such list for my customized input field. If I create the input field in a different child component then I will not be able to apply direct ngModel features of form and validations on it. So I want to append some HTML after input to show the list to select values like Google Autocomplete. I have done this before with jQuery by appending a list after input. Please suggest me......

Answer 1

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.