Use Ionic or build Angular app with Capacitor?

(I’m sure this has been asked but I can’t find anything having searched for a few minutes)

I understand the difference between Ionic and Capacitor, and I have reviewed the Ionic Components

I am building an app that needs buttons, checkboxes + radio buttons, grids, a menu, progress indicators and so on. But in the design they do not look much like native iOS or Android UX components. It’s more like what you might call a game interface than a transactional app

What I don’t know is whether it’s easy to completely replace the appearance – I know they can be styled, but we need things like custom SVG parts that animate when touched, and then fade away. The nav is to be more like a giant animated breadcrumb trail.

Would a “game-y interface” type of app be a good use case for Ionic or is it likely to be more work than just starting with Capacitor?

Capacitor has nothing to do with the style of an app. It’s just allows users to get access to native device features such as camera.

I know. The question is about the limit of flexibility of the Ionic UI components

There are a couple major disadvantages to ionic that i have run into.
1 - Angular Page Component Life Cycle - App Events Documentation
You need to call ionViewWillEnter etc for all child components of a page manually, and their child components manually as well. Only the topmost component (usually the page) gets these methods called automatically. This adds a large amount of complexity and extra code. In Angular ngOnInit is called for all components automatically, however ngOnInit is disabled by Ionic Routing, which caches/reloads pages.

2 - No decent desktop templates.
Angular has hundreds of desktop templates available, but because ionic uses their own components, they aren’t usable. Ionic has a couple people claiming to provide desktop templates, but they are useless for anything besides the most simple project. Expect to write a ton of your own CSS to make your app decent across screens if you try to use one frontend for mobile/desktop.

Re 1 - your link says the opposite and angular lifecycle hooks arent disabled by ionic.

I wonder why you say one needs to code all sorts of stuff in ionViewillEnter? And without ngOnit angular stuff really runs perfectly. What caching does ngOnit do?

So I wonder if your claims are properly nuanced and/or described

Re 2 - what do you mean by angular templates?

In general the OP is not referring to Angular - so I wonder why this is relevant here?

1 Like

The Ionic docs have lots of info on theming.

There are special ways to go about it because ionic components are webcomponents - so parts and specific variables you can use.

You cannot use all css on them, as opposed to non webcomponent libraries

So that is a choice you best figure out by trying out yourself if it fits your use case

I don’t think one can make a very generic claim

But if you need very finegrained control like animations in buttons - I wonder if Ionic UI components are your best bet

Irrespective of capacitorjs or angular

3 Likes

Incorrect

Incorrect again

1 Like

just make your own components using Stencil.

1 Like

In general the OP is not referring to Angular - so I wonder why this is relevant here?
look at the title

Re 1 - your link says the opposite and angular lifecycle hooks arent disabled by ionic.
My link says nothing about parent child components and specifically says about ngOninit
“Fired once during component initialization”. Which means it isn’t fired more than once, as it is in angular.

I wonder why you say one needs to code all sorts of stuff in ionViewillEnter?
you would need to use ionic lifecycle hooks, for the same reasons you would normally using ngOninit

Re 2 - what do you mean by angular templates?
like the ones in themeforest

both are correct, thanks for your detailed reply

FWIW, I made a start building it with Ionic but found the Ionic components and layout system too much work to ‘undo’ for my purposes. I would definitely use it for something with more of a standard UI though.

It’s subjective but Angular is working great for me, and of course capacitor does what I need for device APIs and bootstrapping the Xcode project

1 Like