I'm working on Angular 9 and Ionic 5 and I'm using google places autocomplete for an address input. The autocomplete works fine and thanks to this I managed to edit the styles on my browser. Then I went to my stylesheet (scss) to put these styles into their respective classes (pac-container, pac-item, pac-icon, etc) and the styles just won't show up as I specified on the scss file. If I check the browser, none of my styles were in the pac classes. My code goes as following:
profile.page.html
<ion-item class="br-5 mt">
<ion-icon name="home" slot="start" class="ion-align-self-center" color="primary"></ion-icon>
<ion-input id="googlePlaces" placeholder="Dirección" formControlName="address" required type="text"></ion-input>
</ion-item>
profile.page.scss
.pac-container{
font-family: 'Open Sans';
}
.pac-item{
margin-left:10px;
}
.pac-icon{
display:none;
}
profile.page.ts
declare var google: any;
export class ProfilePage implements OnInit {
constructor(){}
ionViewDidEnter() {
this.activeGooglePlace();
}
activeGooglePlace() {
let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
let autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
autocomplete.setComponentRestrictions({ 'country': ['cl'] });
google.maps.event.addListener(autocomplete, 'place_changed', () => {
let place = autocomplete.getPlace();
this.profileForm.controls.latitude.setValue(place.geometry.location.lat());
this.profileForm.controls.longitude.setValue(place.geometry.location.lng());
this.profileForm.controls.address.setValue(place.formatted_address);
});
}
}
I even tried checking the apk on my phone as I read some people couldn't make it work on localhost. But still, didn't work. Any ideas on how to solve this? Thanks in advance.
I was able to change it by adding all those classes in my theme variables.scss. Really ashamed I wasn't able to check that one out at first.