Hi guys, I just started programming with ionic2 and angular2, coming from PHP and .net. Help would be greatly appreciated. I’ve read through the docs, and created a todo list and searched through some ionic2 sample projects.
I have a Google Maps object on my page at the moment, with some markers loaded from a PHP backend. I have a event listener set on the markers and now I want to display a DIV on the page with some info from the database. So when I click the marker, DB info for that specific marker clicked will be loaded into the DIV, following a HTML layout.
How can I go about doing this? Heres some code that I have at the moment - that is not working/most likely wrong - but perhaps you guys have some better alternatives.
<div id="outletBox" [hidden]="outletBox == true">
info here from db
</div>
And in my home.js file under @Page
marker.addListener('click', () => {
this.outletBox = true;
});
This is a bit of a complex situation for somebody just starting out. You’ve got a problem with non-zone-aware external libraries and to solve it yourself is going to require what is going to look like voodoo. Is there any chance you can use the ionic-native bridge to do this for you?
I already have the data loaded. I just want to show a DIV and display info on this DIV.
import {Page, NgZone, NavController, Modal, Alert, MenuController} from ‘ionic-angular’;
constructor (public store: Store, private zone: NgZone) { }
Does the above line still work?
I really don’t recommend fooling around with zones directly. That was what I was trying to avoid with my initial advice to use ionic-native.
@rapropos I just succesfully implemented zones into my project and it’s fully working now as I originally planned. Can I ask why you recommend against using zones and how else you think it would be appropriate to change elements on the DOM from within the component files?
Because I consider it part of Angular’s internals and when it must be done in all callers, it’s easy to create bugs. When interacting with external libraries, I prefer to localize things as much as possible in services, wrapping callbacks into Promises and Observables, so that all places that use them don’t have to concern themselves with zones. ionic-native does this for you for many libraries.
That’s backwards from how Angular wants you to think. You shouldn’t be accessing DOM elements from component code; that’s why property bindings and directives exist in the first place. All DOM stuff should just be in templates, to the extent humanly possible.