Ionic 4 Crash Course for Beginners - Build an App

[@DesignCourse]

Do you even lift?

[@omthecoder8501]

What you mean?

[@DesignCourse]

@@omthecoder8501 It's a meme, bud, a meme!

[@titus7770]

Hell yeah

[@Ash-em5pm]

They hit or miss , I guess they never miss Sorry

[@mrleblanc]

Just wanted to let you know that you don't need to change the height in the node_module. You could've simply wrapper the svg in a div with height 50%. So the svg would be 100% of a 50% div.

[@fredrikwesterdahl1287]

Hey man - Thank you - You literally just saved my internship. No really...there just wasn't time to meet the deadline with having to learn Ionic with some other resource. Big ups.

[@DesignCourse]

Awesome, glad to hear it!

[@Sjoenky]

PS: Just wrap the in a so you don't have to mess in the node_modules ;)

[@amritsharmapoudel959]

Paul S exactly my words. Cheers!

[@KenKeymolen]

For overwriting the height of the svg you can add this to home.page.scss ::ng-deep svg { height: 50%; }

[@mitterfox98]

Thanx Brother

[@ddjrjrj3792]

49:05 you can just simply do this

[@1theonlychampion]

Changing the Node Modules would not work for me but this worked perfectly! Thank you.

[@brooksgunn5235]

_Mark my words, I will be back here in less than a month after learning more Javascript and Angular... Or well, I'll try. Wish me luck._

[@ayeshsilva6919]

All the best! :)

[@brooksgunn5235]

_I have been back by the way. I just forgot to post on this!!! It makes more sense now._

[@samybaxy]

@@brooksgunn5235 lol! Great!

[@shubhamgawai920]

Are you there? It's been a year

[@brooksgunn5235]

@@shubhamgawai920 Yes, and I am trying to pick back up on web development. Shortly after I posted this, school stuff got in the way, and I slowed down on learning. But I am trying to get back into the swing of things, because I'd still like to become a web developer after I graduate.

[@jeanboscobasabananapa6439]

You are among the best instructor on youtube. I learned a lot from your videos. May God bless you. Can you make a video on React Native?

[@AceofInfo]

Sir, your crash courses are much better than other full tutorials .. you're an Inspiration for me .. Thank you

[@TheXmas100]

the problem with the 100% in the progressbar is because you have to put it inside a container (like a DIV) Really cool crash course, Thanks a lot for the effort!

[@alexbaskov]

great tutorial! never used angular, tried ionic once and kinda forgot it right away. you've reminded me i could actually check that again. Also this angular 7 stuff starts to look similar to Vue, which i find to be really awesome. Some notes here, i'd probably use `null` values for those timer variable to make it more consistent (since setTimeout returns timeout obj) but that doesn't really matter since both `null` and `false` will properly work with short checks like "if (timer)" etc. Also, i suppose there's no need to do Math.Floor when you're multiplying minutes by 60 (those are always int anyway). Again, this was super great and fairly easy to understand tutorial, one just needs to be a little bit familiar with JS.

[@KelvinMai]

Damn, going into node_modules. Living dangerously, I see.

[@nathanberks7218]

That made me cringe... *You can wrap 'circle-progress' in a div:* *Then in home.page.scss:* .circle-progress-container { width: 100%; height: 50%; } Keep 'responsive: true' option enabled, and it'll just fit to whatever you set the containing div's width/height. Much more sustainable than editing node_modules.

[@navneetjoshi7858]

@@nathanberks7218 Your comment should get more upvotes. Thanks for the solution.

[@zongoboy]

grab some balls lol

[@GodstrumpGeorge-vx1sp]

To get the height to work and since the circle-progress and svg takes up 100% of the height(since it is in percentage -- 100% of the parent height) while didn't you put it inside a div/container tag and then give it a height of 50%. That worked for me.

[@bundayyolayinka3352]

This is great stuff. All the part of "i will goto google" that is exactly me. You can have multiple tabs on Cmder in case of another day. Never knew i wasnt the only one who goes into node_modules and vendor folder to change stuffs. haha

[@AbhishekKumar-wo4zd]

Sir, You are genius. I want to learn php.. Please make beginner tutorials. Thanks

[@TheFayb]

Php would be welcomed

[@itsAryanMalik]

kzbin.info/www/bejne/pXvFl6ywlqZlh6M

[@muaruchacomboassane5067]

Hey, thanks for the content you provide. I've been watching your videos the whole day and its just a amazing. Please continue posting.

[@Chandasouk]

Wow. I remember using Ionic 3 a while back and now 4 is actually here. This video will be useful if I ever decide to get back into it. I like making native Android apps but Ionic helps for all platforms.

[@rodrigonormando7371]

Starting download right now! I'll watch that on the way back home. I'm sure it'll be awesome!! Thanks for the content! :)

[@lumacagnan]

Thanks for this video, I'm starting learning Ionic and this is great.

[@iamgalaxey]

Tried to hit the sub and realized I already subbed long ago this is a great intro into ionic.

[@samybaxy]

I was able to fix the height issue without going into the node_modules folder. Instead apply a div wrapper with class="ion-padding" over the circle-progress component element (

[@mohamedharoon9136]

sir, you are amazing, thanks for your efforts. would love to see a JS crash course by you soon.

[@dariusbualan9403]

You can wrap the circle-progress with an element with 50% height instead of going to node_modules

[@adityashinde3864]

I like your teching style .Please make a video for JavaScript beginners.

[@storyden5]

Finally Built My first android application with this tutorial Thank YOu so much

[@astroluke5537]

This was an awesome follow through. You did a great job!

[@pongpeerakingsuwankul2020]

For those who have problem changing primary color, if you change according to the tutorial and it doesn't work on chrome. It might be because your chrome is in thee dark mode. Just add the color in the dark mode media below instead.

[@Javii96]

So crazy, I've been wanting to look for an app that does this exact thing every time I'm at the gym.! lol

[@juanpabloosorioalvarado6467]

You’re amazing man ! Greetings from Colombia

[@retiar2111]

Getting back in the game after a 6 month break doe to university, im looking forward to this and the free ng7 course. You the man! Thanks so much for the great content!

[@sm0ken4de]

Awesome that you share your skills and knowledge with us. Thank you very much!

[@rainerschaa269]

hello, nice tutorial ... the progress bar height property can set in the global.sccs ion-content { circle-progress { svg { height: 60%; } } }

[@masterxander8]

Thanks, this also works.

[@sparxdev]

For those who do not wish to edit any files in the node_modules folder, just put the circle-progress element into a div that has the desired height.

[@csanterio]

Amazing course, man! o/ I have two considerations: instead using the pad function, you could just use the method yourNumberVariable.toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}) that will do the job for you. And ... the height of svg could also be overrided if you use the property [class] and passing a class name, and puting it in the global.scss with height:50%. It works for me. Many thanks for the tutorial!

[@timos.6686]

Hello, can you explain how you did the svg part? Thanks

[@Durfu123]

I could not get the latest version of ng-circle-progress (1.4.1) to display the progress bar when being set dynamically like this. I had to roll back the version to 1.4.0 to get it to work in case anybody else finds the same problem!

[@sukalyanmajumdar1196]

same here !

[@russellthompson5181]

Thanks!!

[@navneetjoshi7858]

Version 1.4.1 has introduced a new property called "lazy" which is used to pause the circle when it's out of viewport. Just set lazy: false in your NgCircleProgressModule imports and you're good to go!

[@abdulazeezolanrewaju843]

@@navneetjoshi7858 Thanks bro!

[@navneetjoshi7858]

@@abdulazeezolanrewaju843 You're welcome bro!

[@VladRo100]

Great course! You can surround the tag with a div tag and it will fix the height problem 50:11 :)

[@maxechendu7120]

My Circle Progress element is stuck on 0%, the percent attribute seems to be doing nothing. I even tried setting a default value for it in the **home.module.ts** file, but it still doesn't work. ---- *UPDATE:* My percent attribute only works when *renderOnClick* is set to true. Any help would be appreciated :)

[@williamvalenzuela3665]

I had the same problem, thanks for the help!!

[@luismarioramirezperalta8045]

same problem, i havent found an answer on stack overflow or pretty much anywhere. as soon is i find out ill reach here

[@martincarska7512]

After two days I finally fix it :D Set * lazy: false *

[@mTz0KS43]

@@martincarska7512 Thank you :)

[@alexandros-markovits]

Pretty cool once again! Ionic is one of the to-dive-into soon technologies for me :P Got to decide between it and Nativescript with Vue.

[@imerycdasilva]

How is the font rendered so well on your Windows Device? Are you using any specific type of monitor? 5K monitor? Retina-like display?

[@Alessandro-nq3tm]

Amazing , thank you so much Gary , amazing work

[@asifmohtesham]

Amazing, as always. Keep it up. :-)

[@rusicsemenov]

Hi, you can use plus in js instead parseInt, Math.flor() + +this.seconds

[@user-dv7mo8rt7b]

Even it's not comprehensive - it's rather good jumpstart!

[@ammaralbakri1705]

thanks a lot but I could not get the circle progress bar to fill even at the beginning, I tried everything can you help me?

[@petrluky8918]

Add 'lazy: false' to NgCircleProgressModule in home.module.ts file. NgCircleProgressModule.forRoot({ // set defaults here radius: 100, outerStrokeWidth: 16, innerStrokeWidth: 8, outerStrokeColor: "#78C000", innerStrokeColor: "#C7E596", animationDuration: 300, animation: false, responsive: true, renderOnClick: false, lazy: false })

[@atulugale1094]

@@petrluky8918 Setting 'lazy: false' worked.. Thanks

[@JobSayasTech]

This is awesome! but how do you even send this to your phone? you just show the final result in your phone but how do you do that? How do you export? the final folder weighs 304 MB, obviously there has to be a way to export it and get it lighter but why? you missed that!

[@ankitverma-dm2fu]

Hey I like your videos and i am trying to prevent screen recording and screen shot can you please suggest me how to achieve this. Thanks in advance.

[@Mananshah123]

welcome [percent]="percent" [maxPercent]="100" [radius]="radius" [showTitle]="false" [showSubtitle]="true" [subtitle]="remainingTime" [subtitleFontSize]="40" [showUnits]="false" [outerStrokeWidth]="16" [outerStrokeColor]="'#8000FF'" [showZeroOuterStroke]="false" [backgroundStroke]="'#33003F'" [backgroundStrokeWidth]="3" [outerStrokeGradient]="true" [outerStrokeGradientStopColor]="'#FF00CB'" [showInnerStroke]="false"

[@karthiknataraj317]

official docs tells about andriod sdk to be set to run ionic, then how ur running app in browser ??

[@mithudebbarma6509]

You fiddle with node_modules. A man of culture, I see.

[@matheuscosta5330]

Amazing!!! Love the video congrats!!!!

[@MrNederlande]

The whole elapsed time thing is way overcomplicated.. You do not even need a Date Object I think You just count up the seconds and if (seconds === 60) you increase minutes by 1 same works for minutes / hours. Also I think that you should TypeScript more (do not just declare nearly everything as type any - you should have declared the timers as null instead of false then you could have typed them) Other than that great Video! Thanks a lot! :)

[@rabiihlioui9315]

Please help, at the 19th minute, my circle doesn't not appear on the screen, all blank, and says in the elements inspection that the circle-progress tag has 0x0 resolution

[@mundobinario1303]

Hello! Nice Video! What is the microphone that you are using?

[@codingroom2876]

make series in react native please

[@alexandre-ob1nf]

up

[@Gringo1886]

Hi when i start the timer it works but when i click to stop it, that works but it wont let me start the stopwatch again

[@geettrivedi9152]

Hey Gary, Why didn't you wrap the circle-progress element into a parent element? That way, that parent element could explicitly be given a height of, say, 50vh or 60vh...

[@ac-devfullstack9709]

Greetings excellent video, I need help, where can I download free Ionic 5 templates login, registration and list?

[@oheey8161]

Not working any more... I have found out whenever Ionic get updated, some old components are just not working any more. What a brilliant framework!

[@raiii-gamingandstuffs6965]

Still working try : ionic start --type=angular

[@abdulhadilababidi8052]

50:00 why you edit the progress bar height property from the "node_modules" while you can wrap it with a 'div' and control with his size such a hard way to do something!

[@HugovanBart]

Was just thinking that...

[@CarlKho]

*You had me at your first tertiereri*

[@dhaanaanjaay]

Not sure why but every second progress count increases, on UI it appears as if it is starting from 0 which resulting in the flickering of the circle.

[@corsaronero5619]

Cool Gary. Please make a crash course on nativescript. Thank you

[@MrRiot1992]

Awesome, everything works fine, thanks a lot. Regards.

[@diltongoh292]

Hi, at 37.00 when I run the code in chrome and I click the circle, the percentage keeps restarting from 1% every time a second goes by. So instead of swiftly adding one to the current percentage, it keeps restarting from 1%

[@ShivamSingh-gu1hn]

can you please help me out how do we set all the path for java and android to get this app in mobile device

[@deejayerick]

Yes... thanks!... was waiting....

[@kingmega8730]

Pls upload ionic 5 and mysql connection

[@luisalbertopenalozaarias6975]

Amazing video, thank you so much

[@j4nch]

I'm curious, Ionic is "just" a UI library, why is it required to launch it with ionic and not ng?

[@princeafrifa2787]

nice content.... please can you help with how to integrate QR scanner in IONIC 4...? will really appreciate

[@AndrzejOlchawa]

Interesting, I get the following when I tap on the circle: HomePage.html:5 ERROR TypeError: this.fullTime.split is not a function at HomePage.startTimer (home.page.ts:28) at Object.eval [as handleEvent] (HomePage.html:8) at handleEvent (core.js:38098) at callWithDebugContext (core.js:39716) at Object.debugHandleEvent [as handleEvent] (core.js:39352) at dispatchEvent (core.js:25818) at core.js:37030 at HTMLElement. (platform-browser.js:1789) at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182)

[@coreytrowbridge2612]

I know this is an old tutorial, but I got it to work WITHOUT editing node_modules by adding the following to global.scss: svg:not(:root) { height: 50%!important; }

[@sarveshyadav01]

hey do you know how to combine ionic with django?

[@coreytrowbridge2612]

@@sarveshyadav01 Afraid not friend, I've never touched Django in my life. I'm currently only working on an app with the MEANstack which (hopefully) I'll convert to ionic, which is completely rest API based like the second part (breweries) of this video. If you're using Angular like me and this video, perhaps a search of Django and Angular might help you since ionic uses it anyways? Krystian Czekalski has a video of it, he seems pretty good.

[@sarveshyadav01]

@@coreytrowbridge2612 thanks buddy

[@TechForFree2023]

@@sarveshyadav01Ionic with php the same principle my have applied to Django though kzbin.info/www/bejne/r5-vdH-dmJV2g8k

[@scoopydevy]

it's giving me an error when i try to load the progress bar this is what it says: ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Unexpected end of expression: 85% at the end of the expression [85%] in ng:///HomePage/template.html@3:17 (" "): ng:///HomePage/template.html@9:19 Parser Error: Unexpected token # at column 1 in [#78c000] in ng:///HomePage/template.html@7:26 (" [outerStrokeColor]="#78c000" [innerStrokeColor]="#c7e596" [animation]="[ERROR ->]true" [animationDuration]="300" > "): ng:///HomePage/template.html@9:19 Parser Error: Unexpected token # at column 1 in [#c7e596] in ng:///HomePage/template.html@8:26 (" [outerStrokeColor]="#78c000" [innerStrokeColor]="#c7e596" [animation]="[ERROR ->]true" [animationDuration]="300" > "): ng:///HomePage/template.html@9:19 Parser Error: Unexpected end of expression: 85% at the end of the expression [85%] in ng:///HomePage/template.html@3:17 (" [innerStrokeColor]="#c7e596" [animation]="true" [animationDuration]="[ERROR ->]300" > "): ng:///HomePage/template.html@10:27 Parser Error: Unexpected token # at column 1 in [#78c000] in ng:///HomePage/template.html@7:26 (" [innerStrokeColor]="#c7e596" [animation]="true" [animationDuration]="[ERROR ->]300" > "): ng:///HomePage/template.html@10:27 Parser Error: Unexpected token # at column 1 in [#c7e596] in ng:///HomePage/template.html@8:26 (" [innerStrokeColor]="#c7e596" [animation]="true" [animationDuration]="[ERROR ->]300" > "): ng:///HomePage/template.html@10:27 Error: Template parse errors: Parser Error: Unexpected end of expression: 85% at the end of the expression [85%] in ng:///HomePage/template.html@3:17 (" "): ng:///HomePage/template.html@9:19 Parser Error: Unexpected token # at column 1 in [#78c000] in ng:///HomePage/template.html@7:26 (" [outerStrokeColor]="#78c000" [innerStrokeColor]="#c7e596" [animation]="[ERROR ->]true" [animationDuration]="300" > "): ng:///HomePage/template.html@9:19 Parser Error: Unexpected token # at column 1 in [#c7e596] in ng:///HomePage/template.html@8:26 (" [outerStrokeColor]="#78c000" [innerStrokeColor]="#c7e596" [animation]="[ERROR ->]true" [animationDuration]="300" > "): ng:///HomePage/template.html@9:19 Parser Error: Unexpected end of expression: 85% at the end of the expression [85%] in ng:///HomePage/template.html@3:17 (" [innerStrokeColor]="#c7e596" [animation]="true" [animationDuration]="[ERROR ->]300" > "): ng:///HomePage/template.html@10:27 Parser Error: Unexpected token # at column 1 in [#78c000] in ng:///HomePage/template.html@7:26 (" [innerStrokeColor]="#c7e596" [animation]="true" [animationDuration]="[ERROR ->]300" > "): ng:///HomePage/template.html@10:27 Parser Error: Unexpected token # at column 1 in [#c7e596] in ng:///HomePage/template.html@8:26 (" [innerStrokeColor]="#c7e596" [animation]="true" [animationDuration]="[ERROR ->]300" >

[@ahmadabdallah2896]

Guys my fab button doesn't has the pink color like the circle, it is still on the blue color, and the rest duration item on the top doesn't has the same design like in the video, does anyone has an idea how to solve this? And it's worth mentioning that my background color was black from the start not white and I couldn't change it from the variable.scss folder I don't know why.

[@MrDominique1992]

at 19:16 , i followed your every step but the animation is not working...

[@Mr007yuvraj]

@DesignCourse Can you do a Ionic 4 + Vue app and how to build apk for the same ? a simple app or the same app will be a great Idea :)

[@dostoguven]

nice course dude. thx.

[@assal0le]

How to get user role? is that possible in ionic 4?

[@zhangbruce4815]

hmm maybe if you wrap that circle around a div tag with 50% of content hight, it might work

[@raiii-gamingandstuffs6965]

IONIC 5 already release try : ionic start --type=angular this will give you ionic 4 structure..

[@vikrantadams5429]

[ERROR] An error occurred while running subprocess cordova. cordova.cmd build android --verbose exited with exit code 1.

[@snakone]

devapp dont use cordova to preview, you need to build/run the app the make cordova available

[@abdulazeezolanrewaju843]

Hi sir, the elapsed time does not reset to "00", "00", "00" after the percent === 100

[@nazeercha]

can you make a food delivery app with catering and also admin panel using ioinic 4 and angular

[@dcab7290]

Hi, if we submit this app to apple, Is apple going to reject the app because of webview or is it going to work?

[@padmanabamkarri1131]

HII GARY ,I'VE A PROBLEM WHEN I SET 1MIN 41SEC THE LOOP OF THE CIRCLE PROGRESS TIMER IS FILLED OUT AND THE 1MIN 41SEC IS OVERIDED

[@ahmetar2774]

Hello You are really good about that thanks:) I have a qustion, its really easy but I can not slove it :( When you are writing: /code on node js it can be understand; your are writnig from VSO but when I am writing nothing happend so How can I define it ????

[@nikjad567]

Hello, what if the timer have the menu page, if i go to the menu page, when we go to the main menu page while the timer start , the timer reset automatically,so how to solve it?

[@HorizonWave1807]

Can you please make a video on how to ng-package ionic 4 app specific module and create a library in umd format? I want to host this umd in server, so that I can dynamically load these modules in client ionic app.

[@koukiadem]

Nice Tutorial ♥ Thank you so much Question: In 56:20 , why did you use 2 buttons instead of one button ? i mean you could use 1 method with one button that do all the stuff ? (start and stop)

[@DesignCourse]

I wanted to show conditionals in the template, though, I suppose I could have done that with just the icons

[@mrunalkhairnar780]

can you help me or give me some hint is ionic support mathml view ? if yes then how ? i didn't found any thing about this no one give response on this so help

[@drol3762]

Hi. Thanks for the content. I tried the Ctrl+shift+I and it did not work for me. I am using a macbook. Any suggestion?

[@daniellaerachannel]

stunning!

[@juanlozoya9943]

Add the type and assign a value like this "percent: number = 0;" is redundant

[@tony2tones777]

this is great tut, for some reason my [(ngModel)]="fullTime" is not working like it should. I made sure to add FormModues but still no dice. If someone can throw me some help that would be awesome!

[@clinicaparqueanimal]

Can I get the App in the App store? What is the name?

[@abhishektailor8401]

Please can you explain that how to show an app chooser in ionic 4?

[@simplyweird6369]

Ain't gonna use it over Flutter. Hot Reload and such great control over widgets is non comparable.

[@zhangbilly4849]

circle doesn't work on safari and iPhone. Please help!!!

[@gomesbruno201]

heres a tip from a noob: - do not use math floor on total seconds - divide the progress by 60 - use 16,6666 as setInterval value this will make the circle looks a lot better, I think

[@ahmadabdallah2896]

Did you apply those tips and tested them or not?

[@gomesbruno201]

@@ahmadabdallah2896 yep, sure

[@chrispagan2965]

do you need to install something with angular before doing this? when i tried to import the circle progress bar, it was asking for angular dependencies that i had to install myself, and couldnt get it to work