I have created an ionic 4 app.
I am using native google maps and custom marker.
When I click on a marker, I want to open my side-menu with place details.
What I did,
- I have disabled the menu at first on app.component.ts
- When ionViewWillEnter() on Map Tab, I have disabled the side-menu
- When ionViewWillLeave() on Map Tab, I have disabled the side-menu
- Side-menu only will enable when to click on the place marker
- I have triggered the event when clicking on place marker
- This event carries the data of place
- I have used the variable 'business' to fill the side-menu
- I have subscribed the event on app.component.ts and assign the
place data to 'business' variable
Problem:-
My side menu doesn't update it's content when I click on the marker
It updates when I switched between tabs, I think when refreshing the tab
Are the data of 'business' variable updated?
If so, perhaps you could try run the assignment code inside ngzone.
// import zone in your app.component.ts
import { NgZone } from '#angular/core';
// add zone provider to the component constructor
constructor(private zone: NgZone) {
// ...
}
// cath click event, then
this.zone.run(() => {
// update data here
});
Related
Already Wrap my page with
When switch the button, the color of nav bar changes, but not the page content.
I can change the content theme by importing the following files from ant design;
import 'antd/dist/antd.css'; //white mode
//import 'antd/dist/antd.dark.css'; //dark mode
so how to import different css file by click on the switch button?
Thanks.
Create two separate components for darkMode and whiteMode and use conditional rendering with states or context provider with onClick function.
import darkMode styles inside <DarkModeComponent/> and whiteMode styles in <WhiteModeComponent/>.
const [darkmode,setDarkmode]=useState(false)
and onClick function in like below:
function onClick(){ setState (s => !s) };
and in your components:
return ({darkmode ? <DarkModeComponent/> : <WhiteModeComponent/>})
Also, you can use context Provider for handling this state and pass it to child components.like this : context.provider for swithing theme
Supposing I have a User View with two Cards, one that is not important to the question (UserProfilePhoto Card) and another one (UserDetails Card) with the following code:
<VTabs>
<VTab>
Profile
</VTab>
<VTab>
Tasks
</VTab>
<VTab>
Messages
</VTab>
<VTabItem>
<Profile> // component
</VTabItem>
<VTabItem>
<Tasks> // component
</VTabItem>
<VTabItem>
<Messages> // component
</VTabItem>
</VTabs>
What would I need to add to VTab or VTabItem that would change the url to, let's say
website.com/user/:id/tasks
Whenever the active tab is "Tasks"? And, if above URL was sent to somebody it'd load the User view with the tab on the User Details Card with "Tasks" as the selected, instead of the default "Profile".
Well, you see, I have a similar code in which when the variable that controls the active tab is changed between tabs I put it in the watch: de vue method
Documentation of the watch de vue method
https://es.vuejs.org/v2/guide/computed.html
which you can make it change with an if according to the variable and also change the url
example:
watch: {
tab(val) {
if(val==0){
this.url = "website.com/user/:id/tasks"
}else{
this.url = "website.com/otherURL"
}
}
I have a vue app which has a feature than can change the theme, for example, light/dark,
Initially, I've set in my localStorage.setItem['app_theme', 'light'],
I have my app theme changer function in the Header.vue component, and after clicking the theme changer toggle button, it also changes the localStorage['app_theme'] = 'dark'.
Now, in my other components, I have some computed values/variables/properties like this:
...
computed() {
app_card() {
return localStorage.getItem('app_theme') === 'dark' ? 'card-dark' : 'card-light'; //these are some classes with their respective theme css
},
app_text() {
return localStorage.getItem('app_theme') === 'dark' ? 'text-dark' : 'text-light'; //these are some classes with their respective theme css
}
}
...
I've thought about using polling to get the localStorage.getItem('app_theme') value every 2 secs, but I think this'll slow down my app.
Are there any other alternatives to listen for localstorage item change without polling?
This is exactly what the observer pattern is for.
You create an event "OnAppThemeChange". You can subscribe to that event with all your components.
Then whenever your App Theme changed you call your event, and all the components will refresh their App Theme.
This removes the need of Refreshing the theme every 2 seconds. It will only refresh when you actually change the theme.
Usefull links:
https://developer.mozilla.org/de/docs/Web/Guide/Events/Creating_and_triggering_events
https://refactoring.guru/design-patterns/observer
I'm trying to build a mobile small application using v-expansion-panels to display a list.
The idea is that when the user adds a new item in such list it will open the new panel and scroll down to such new panel.
I found a goTo() method in the $vuetify variable, unfortunatly the v-expansion-panels transition (the "opening") take some time and the goTo() won't completely scroll down because of the scrollbar height changes.
So from my understanding I need to detect the end of the transition (enter/afterEnter hook).
Per the vuetifyjs documentation, I could hope to have a "transition" property on my component. (Which isn't the case anyway). But such property is only a string so I can't hook into it.
My other idea is to, somehow, find the transition component and hook into it. Unfortunatly I have trouble understanding el/vnode and the way vuejs is building is tree like the vue-devtool show and I can't get the transition component. When debugging (in the enter hook callback of the transition) it is like the component/el/vnode has a parent but isn't the child of anybody.
Is there a way to do what I'm looking for?
Here is a jsfiddler of what I currently do: https://jsfiddle.net/kdgn80sb/
Basically it is the method I'm defining in the Vue:
methods: {
newAlarm: function() {
const newAlarmPanelIndex = this.alarms.length - 1;
this.alarms.push({title: "New line"});
this.activePanelIndex = newAlarmPanelIndex;
// TODO:
this.$vuetify.goTo(this.$refs.alarmPanels[newAlarmPanelIndex]);
}
}
Firstly you should open manually panel and then use goTo with a timeout.
It works for me, just give some time to a panel to open.
<v-expansion-panels v-model="alarmPanels">
<v-expansion-panel>
<div id="example" />
</v-expansion-panel>
</v-expansion-panels>
this.alarmPanels.push(0); // Use index of expansion-panel
setTimeout(() => {
this.$vuetify.goTo(`#${resultId}`);
}, 500);
I am working with Outlook Add-in with Office UI fabric js UI components. I am having issue using dropdown.
When click on a drop down it doesn't show the dropdown list style and it opens a complete new panel with options.
I followed this link to add drop down component.
The dropdown component has a prop called responsiveMode. This dictates how the container is rendered.
As you can see, for ResponsiveMode.medium and below, a Panel gets rendered, otherwise it will be a Callout. What you want is the Callout.
You just have to pass in the prop ResponsiveMode.large for it to render the way you want.
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { ResponsiveMode } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
render() {
return (
<Dropdown
label='My Label'
options={myOptions}
responsiveMode={ResponsiveMode.large}
/>
);
}