Simple bro!
Add import {Title} from ‘@angular/platform-browser’;
Add (private titleService: Title) in constructor
And in code use (this.titleService.setTitle({APP TITLE})
You Are Welcome in Advance!
@MarcinDl @ChrisGriiffith @IreneC
↧
Name of the app
↧
Angular ngFor not iterating through array on Android
Before we get too far down this road, IMHO pages should not be interacting with the network, period. That should all be isolated to services. And it would be fantastic if even services didn’t have this sort of conditional twiddling.
Can you try rearchitecting things so that:
-
SelectionService.getSelections()takes no parameters, so that it works exactly the same regardless if it’s on mobile or not - Internally,
SelectionServiceuses Angular’sHttpClientonly - no arcane plugins -
SelectionServicenever checks what platform it’s running on
↧
↧
Capacitor tab page is not reloading on tab change and if come back on that page
I’m not entirely sure what your definition of “page reloading” is, but I would suggest designing your app so that its data layer is not reliant on presentation layer lifecycle events. See this post for a more concrete discussion of what I’m talking about.
↧
How to update property of singleton for display in template?
How do you ONLY reference SharedService in one component and then it’s available in all the other components? This is not processing with me. In order to use the SharedService in other components outside of App.js (e.g. to emit it), you’d have to import in ANY component that is needed to update the prop, right? Sorry if I’m misunderstanding your thought process on this, but this isn’t clicking for me. I’d have to see examples of this logic…
↧
Unrelated view is mounted
Do you have an IonPage component in both components? Otherwise, we might need to see the code in the Account and Invoice components.
On a related note, you may want to read how Ionic handles the Vue Lifecycle if you aren’t aware. Ionic keeps components around in the DOM so onMounted doesn’t always get called as expected in a normal Vue app.
↧
↧
Angular ngFor not iterating through array on Android
Apologies, I should’ve stated this, but it was already architected that way. Selection service does the calls, and uses httpclient by default and passes no parameters.
The only reason you’re seeing what you’re seeing (http call in the page with conditionals and parameters) is because google (and my testing on an android device) lead me to believe httpclient on android couldn’t use my https api. So I hacked together a condition to use HTTP (ionic-native/http/ngx) in the component instead for quick testing, which actually worked in returning the data from the api. Originally it was saying it couldn’t connect due to https something something (I would need to go back and see exact error as I’m not at my pc right now).
What I can do is revert my changes to continue to use httpClient and show you the error I’m getting that it can’t connect to a secure connection once I’m back on my PC. But again almost all posts I’ve seen on the topic say to use HTTP for mobile devices instead of angular’s httpClient. Am I mistaken in believing this?
If I do need to use HTTP for mobile and httpClient for web, I could easily make two separate functions in the service that get called depending on platform as to avoid the conditional logic in the service. I guess the first thing to hit is, should the angular httpClient be able to work within android (and presumably iOS)?
↧
How to update property of singleton for display in template?
The first thing to remember is that the syntax in this thread is five years old. Specifically, the @Page decorator no longer exists - it used to be an Ionic-specific thing that has been subsumed under current recommendations to just use Angular’s @Component.
The second thing I want to emphasize is that naked scalar singletons in services are a bad idea unless you are 150% sure that never ever ever is it even remotely possible that you’ll ever want to change them while the app is running. If there’s even a chance that they’ll become mutable, expose them as Observables out of the service and subscribe to them in the places that reference them (either for reading or for writing).
So, to summarize so far, you probably don’t want to be doing exactly what OP was in the first place, and you definitely don’t want to be trying to use any of the old syntax from this thread verbatim.
Now, to address your direct question.
Refer back to the first post in this thread that contains code. It has this decorator:
@Page({
templateUrl: 'build/pages/login/login.html',
providers: [User, DB]
})
@Page({
templateUrl: 'build/pages/homepage/homepage.html',
providers: [User]
})
The point under discussion here initially was that the two pages decorated here weren’t seeing the same User, and that’s because they were declared in providers on each page. The way to get them both seeing the same User is to only declare it in providers of the AppModule. You’re absolutely right that everybody needing access needs to inject it, but not everybody needs to declare it as a provider, and in fact doing so breaks the main point of shared services.
↧
Angular ngFor not iterating through array on Android
I won’t say “mistaken”, but I for one have about as strong an opinion as possible that one should only ever use HttpClient. It’s got better type safety, you are ensured that you’re actually testing the mobile code path during development, there’s less boilerplate, and boring low-level bugs like the one you seem to be encountering are far less common.
The main reason you see people recommending using plugins for HTTP is because they are encountering CORS problems that they won’t fix on the server side (I’m hesitant to ever say “can’t” here, because one can always fix CORS server-side with a proxy). The only legitimate reason I know of for using native HTTP is SSL certificate pinning, which is a pretty obscure and rare case.
I think your time will end up being better spent trying to fix this than the problem you’re currently seeing.
Absolutely and positively yes.
↧
Angular ngFor not iterating through array on Android
Thank you for your responses, coming from developing solely on angular for the web for the past 2 years, I will say I’ve only ever used httpClient and NEVER had any issues. It’s surely my preference to keep using something that I’ve grown accustomed to so I’ll give this another go. I’m not as worried about the CORS part, and I think I’ve setup my servers SSL properly but we shall see when I get there 
. I would like to keep the thread open maybe another day incase somebody has any other insight on this if that’s ok. I’ll reply here with the actual error it’s giving me with httpClient should I not be able to figure it out this evening.
↧
↧
React + Ionic 5 and routing
Hey guys,
I’m working on an app that contains a set of routes:
One is the “home” page, a page with 2 buttons that navigate the user to /login or /register. The other is the “dashboard” (user) page, essentially the “protected” area for logged-in users.
As part of the non-protected routes, after the registration, there are 2 more steps to “customize” the user experience – (/customize and /suggested-programs).
The issue is simple - the routing suddenly started to behave super weirdly.
First-time user register, the journey work completely fine. But if the user logs out and tries to register again, the routes starting to mess up, usually the /register works, but then /customize doesn’t. Sometimes I see a blank page; sometimes, I see the register page.
I tried everything, I spent an entire day today, but I am really out of ideas.
Code snippets for context:
App. tsx
<IonApp dir="rtl">
<IonPage className="app-bg-black font-rubik">
<IonReactRouter>
<IonRouterOutlet animated={false}>
<Route
path="/user"
render={(props) =>
currentUser ? <UserRoute {...props} /> : <Redirect to="/" />
}
/>
<Route
path="/suggested-programs"
render={(props) =>
currentUser ? (
<UserSuggestedPrograms {...props} />
) : (
<Redirect to="/" />
)
}
exact
/>
<Route
path="/customize"
render={(props) =>
currentUser ? (
<CustomizeUserExperience {...props} />
) : (
<Redirect to="/" />
)
}
exact
/>
<Route path="/register" component={Register} exact />
<Route path="/login" component={LoginRoute} exact />
<Route path="/" exact={true}>
{currentUser ? <Redirect to="/user" /> : <MainRoute />}
</Route>
</IonRouterOutlet>
</IonReactRouter>
</IonPage>
</IonApp>
UserRoute.tsx
export const UserRoute: FC<RouteComponentProps> = ({ match }) => {
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/user/:tab(program)" component={UserProgram} exact />
<Route path="/user/:tab(profile)" component={UserProfile} exact />
<Route
exact
path={match.url}
render={() => <Redirect to="/user/program" />}
/>
</IonRouterOutlet>
<IonTabBar slot="bottom" color="primary">
<IonTabButton tab="profile" href="/user/profile">
<IonIcon icon={personOutline} />
<IonLabel>הפרופיל שלי</IonLabel>
</IonTabButton>
<IonTabButton tab="program" href="/user/program">
<IonIcon icon={barbellOutline} />
<IonLabel>תוכנית אישית</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/user/statistics">
<IonIcon icon={pulseOutline} />
<IonLabel>מעקב משקלים</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
Any help/ideas are much appreciated. Thanks!
↧
Ionic 4 - Scrollable List - Needed
that works for my xD
↧
beforeRouteUpdate and beforeRouteLeave never called
Thanks! This looks like a bug in Ionic Vue. I have prepared a fix for this. Can you try the following dev build, and let me know if it resolves the issue?
npm install @ionic/vue@5.7.0-dev.202108252139.e1c36f6 @ionic/vue-router@5.7.0-dev.202108252139.e1c36f6
↧
Ionic-image-loader alternative to preload images
I have found this one and it works well.
↧
↧
Updating the state of the Home page component from an IonModal
How would I do that on this code? sorry, I’m a bit new to React and Ionic.
↧
No podspec found for `package` when adding iOS project to existing Ionic 5 project
I built a Capacitor plugin for Ionic and Capacitor and published it to NPM - call it test1. I then use it in my Ionic 5 project and successfully add a new Android project via:
ionic build
ionic cap add android
ionic cap sync
Tested it and it works. I then try and add an iOS via:
ionic build
ionic cap add ios
I then get the following error:
`[!] No podspec found for `Test1` in `../../node_modules/test1```
And it fails. I can’t figure out why as there is a Test1Plugin.podspec file in the root with relevant dependencies and an ios/Podfile with relevant dependencies. I also ensure both files are published to npm.
I tried changing the name of the .podspec file to Test1.podspec but it’s the exact same issue.
I’m pretty stumped and hoping someone has some pointers?
↧
React + Ionic 5 and routing
UPDATE: just realized that when removing IonRouterOutlet everything works as expected (of course without animations)
↧
beforeRouteUpdate and beforeRouteLeave never called
Thanks a lot! This seems to work great! Finally can finish that form I’ve been working on. 
Is it safe to use your build for production or shall I wait for an “official” update?
↧
↧
Search bar in header - not vertically centered on iOS
(topic deleted by author)
↧
beforeRouteUpdate and beforeRouteLeave never called
Not sure is this expected behavior. But I noticed that this in beforeRouteLeave seems to be, wrong? I cannot access any methods or properties of the component.
console.log(this);
beforeRouteEnter: ƒ async beforeRouteEnter(to, from, next)
beforeRouteLeave: ƒ beforeRouteLeave(to, from, next)
components: { IonCard: {…}, ... }
computed: { categoryById: ƒ, ... }
created: ƒ created()
data: ƒ data()
methods: { countryChange: ƒ, ... }
render: ƒ render(_ctx, _cache, $props, $setup, $data, $options)
__file: "src/pages/item/Form.vue"
__hmrId: "55af788c"
[[Prototype]]: Object
↧
@ionic-native/clipboard constructor breaks app
I am trying to use the @ionic-native/clipboard to copy some text in my app. However, once I add private clipboard: Clipboard to my constructor, my app screen turns black in the Ionic Lab with the exception of the tabs on bottom, but the tabs are unresponsive. Below is a screenshot of the app after adding the constructor. The second screenshot is what the app looks when in Google developer mode. I followed the install instructions from https://ionicframework.com/docs/native/clipboard
tab1.page.ts:
import { Component } from ‘@angular/core’;
import { Clipboard } from ‘@ionic-native/clipboard/ngx’;
export class Tab1Page {
constructor(private clipboard: Clipboard) {}
}
↧