Angular Material Mobile App with Capacitor

Learn to style your Angular web app with Angular Material, integrate a responsive sidenav component and build a native mobile app from your code with Capacitor!

#############################

👨‍💻 Want to read instead of watch?

⚡️ NEW: 46 Pages Ionic QUICKSTART GUIDE

➡️ Take my famous 7 Day Ionic Crash Course

🤷‍♂️ Want more Ionic tutorials?

#############################

❤️ You can also find me on:

Or join our Facebook group:

#############################

00:00 Intro
01:23 Install Angular Material
03:34 Generating a Material Sidenav
10:10 Adding Components and Routing
14:37 Responsive Angular Navigation with Routing
22:06 Building a Mobile App with Capacitor
26:02 Improving the Native App UI
35:30 Recap

#angular #angularmaterial #mobileapp

[AlexeyR]

Hi. Thanks a lot for the comprehensive tutorial. One very good point is to follow up on how to use Angular with Capacitor without the Ionic framework. In most cases, it is closely tied very often. Exciting step-by-step understandable approach, very clear speech and clear video with a readable colour theme and big enough code. It is highly important if someone viewing and reading a tutorial on a mobile phone outside. Not so many authors doing tutorials in this manner.

[realtimejojo]

These videos have been excellent. I've been looking at introducing Ionic development to my team at work for months after doing my own projects in it and this week I finally had the chance to introduce it to one of our projects. So far it's been great and I don't think the team are going to go back to what we did before!

[gopalakrishnanbalasubraman]

The Live Hot Reload workaround I find it so fascinating as well....
Thanks to you for sharing 😄

[f-xk]

I've used Angular Material + Ionic in a work project and worked out pretty well. I recommend it!

[tamilvanan]

It is a fantastic video in a quick period of time. Thank you so much brother, have a great life and career

[aaiz]

Superb dear,
Now day's I'm working on angular material so that's why it's very useful

[gtanmoy]

Thanks for this video. What a cool T-Shirt! SUPABASE !!! nice Simon, looks great.

[regincampelo]

Amazing video Master Simon. Thanks a lot.

[pauldavies]

Appreciate this is an old video but I notice that the OS text on the top bar (and icons for battery + signal) remained black. When a dark top bar color is chosen (much like Simon's blue) this text should be changed to White. How is this done ?

[GeorgAubele]

Really nice tutorial.
I have three questions:
1. What to do to keep the three dashes (burger menu) visible at all sizes of the screen?
2. Where to find the apk to get it on other Android devices not connected to Android Studio?
3. Is there a way to keep the screen alive so the device does not go to sleep?

[augustinekanyi]

Jägermeister oder Hennessy..was möchten Sie mein Herr?
Thank you so much Simon!

[Bencode]

Bonjour
Merci pour le tutoriel.
J'ai suivi le tutoriel jusqu'à la fin, cependant je n'arrive toujours pas à connecter ma base de données en localhost à mon apk (Android studio)
As-tu un tutoriel ou une solution à mon problème?

Merci

[freddycaballero]

Great video, is posible do the same with PrimeNg?

[ABWMEDIA]

can we run a capacitor live reload in the real device? please reply its make me crazy

[KiffinGish]

Great show, thanks! Is there a github repository I can use so that I can learn it first hand?

[ABWMEDIA]

when i use ng serve -o --host 0.0.0.0 and its working but if I made any changes or if I close the app and reopen the app it goes to login page means state issue, how to fix it ? it is state issue or auth guard token issue?

[pulsarsmb]

Thanks Simon for your cool work. I've been watching your videos for a long time now. Interested in your opinion on the applicability of Angular Material versus Ionic, their internal quality and performance?

[EdoAlfonso]

Hello I'm installing angular material on ionic but I get this error Cannot read properties of undefined (reading 'kind') after installing animations, also I tried to manually add animations but get the same error

[AGUNGKAYA]

Sir I try this and work perfectly with ng serve, but when compiling it in android using npx cap open android, it shows only raw html (without any styling). Why?

[MrGombino]

Thanks the great tutorial! Can you show an example this app and rest api communication, please?
The app is working on android but I can't fetch data via my api.
There is no communication between the app and my api. So I think this isn't a cors problem. The api is available on the internet and the web view works perfectly.
Thank you!