Google maps autocomplete doesnt works in a second component

I have a places list and an option to add places, when I click on add, its push to MapTestcomponent where I have an input that is filled with the autocomplete function of google maps, it works, but if push to my place list from a third component, when i access to my form , the input changes the attributes and doesnt works. why?

List of places HTML

<ion-content padding>
<ion-list inset>
  <ion-item text-wrap *ngFor="let item of direcciones$ | async">
    <ion-icon name='ios-navigate-outline' item-start></ion-icon>
    <p class="name">{{}}</p>
  <ion-item (click)="addPlace()">
    <ion-icon name='add' item-start></ion-icon>
    <p class="nombre">Add</p>

List of places .ts



AddPlace html

<ion-content padding>
      <ion-label floating>Name</ion-label>
      <ion-input type="text"></ion-input>
      <ion-label floating>Comments</ion-label>
      <ion-textarea id="Commentstxt" rows="6" cols="20" ></ion-textarea>
      <ion-label floating>Address</ion-label>
      <ion-input  id="Addtxt" type="text"></ion-input>

AddPlace ts

  () => {
    // let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, { types: ["address"] });
    let nativeHomeInputBox = document.getElementById('Addtxt').getElementsByTagName('input')[0];
    let ionicTxtAr = document.getElementById('commentstxt').getElementsByTagName('textarea')[0];


PD: this is only part of my ts

and works!


but if i push from a third component to place list, the input change to this, and doesnt works