When developing an Ionic app, implementing distinct layouts for different user roles is essential for usability and functionality. In this article, we’ll explore how to structure an Ionic app with two master layouts—one for regular users and another for administrators—each with its own unique navigation system.
How to Append Parameters Before Routing Globally in Ionic
In some cases, you might need to add parameters dynamically to your route globally in an Ionic application. This approach can be especially useful when dealing with authentication tokens, language preferences, or other persistent parameters.
[Ionic] Dynamic Layout background color
Way 1: Using document body to set theme (preferred) 1. Set the document body inside the main layouts 2. Style the app in the variable.scss Way 2: Set them variables directly into Main layout page Structure the files Given you have folder structure like this. ui-pages/main: layout using for admin, moderator role ui-pages/user: layout using […]
[Ionic] Build Development Mode for Testing
Sometimes we need to detect an issue in the beta/staging environment. We cannot build using the ionic command Instead, use the angular command for specific development environment.
[Ionic] Tạo image resource với Capacitor
Tạo folder và files cần thiết Tạo folder resources ngang cấp với folder src. Có cấu trúc các files như sau với các lưu ý như sau Icon files should be at least 1024px x 1024px. Splash screen files should be at least 2732px x 2732px. The format can be jpg or png. Đảm bảo rằng bạn đã cài package Chạy câu lệnh tạo […]
[Ionic] Working with theme color
In ionic if you want to work with color. For example, want to change the primary color. want to change the warning color add a new color name I will go one by one to further explanation Change the primary color After creating your app. You change your mind about applying the primary color of […]
[Ionic] Best practice when migrating from v5 to v7
It’s very painful when you decide to upgrade from v5 to v7. I’ve experienced this and here are some highlights in case you have a plan to update Ionic from v5 to v7 1. Create a brand new project with v7 Despite Ionic team support you migrate from v5 to v7 with the migrate checklist […]
[Ionic] Common error
1. Cannot bind a value to NgModel in component Issue: cannot set value to [(ngModel)]=”startDate” in any Component Reason: lack of import IonicModule, FormsModule in ComponentModule Solution: 2. ERROR Error: Uncaught (in promise): Error: JIT compiler unavailable Error: JIT compiler unavailable Điều này xảy ra khi trong component của bạn có sử dụng @ViewChild. Nguyên […]
[Ionic] Setup build and debug the app
There is many error when you try to deploy the app. The fatest way to know is using Android studio Attach physical device to android through Wifi Go to Tool -> Device manager. Then follow the instruction on the screen to connect. 2. Generate signed keystore Go to %JAVA_HOME%\bin folder Open powershell here and run […]
[Ionic] Setup environment build android
1. Download Android SDK & get the android Home folder 1.1 Install 1.2 Create new project 1.3 Go to File -> setting 2. Check SDK location to have all folder Go to Tool -> SDK manager -> SDK Tools tab 3. Download JDK 1.8 4. Download Grade 5. Set environment variable Add to both sections […]