Angular for Beginners - Let's build a Tic-Tac-Toe PWA

  Рет қаралды 475,240

Fireship

Fireship

4 жыл бұрын

Learn the basics of Angular 8 🚀 by building a tic-tac-toe game 🕹️ from scratch...Then deploy it as an installable progressive web app (PWA). Go beyond the basics 👉fireship.io/courses/angular/
Full Source Code: github.com/fireship-io/angula...
Angular Docs: angular.io/
#angular #pwa #tutorial
Take Angular quizzes 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

Пікірлер: 456
@ItsMe-oi9dy
@ItsMe-oi9dy 10 ай бұрын
This tutorial desperately needs a 2023 update. So much has changed.
@iman2020
@iman2020 2 ай бұрын
yeeees
@RS-lh4gx
@RS-lh4gx 2 жыл бұрын
For anyone confused at the Angular Console plugin part, Nx Console is the new name of the extension Also if you run into an issue with using ng new after npm installing the angular cli on windows, you may need to run your terminal as an admin; that's what I had to do
@lutcodes1216
@lutcodes1216 2 жыл бұрын
thanks for the comment!
@stealthypirate318
@stealthypirate318 2 жыл бұрын
thank you
@PizzaDcalabresa
@PizzaDcalabresa 2 жыл бұрын
thank you so much
@haseebqureshi2291
@haseebqureshi2291 2 жыл бұрын
Very helpful, Thanks.
@turboheadcrab666
@turboheadcrab666 2 жыл бұрын
For me, I had to remove file "ng.ps1" from "C:\Users\%YourUser%\AppData\Roaming pm" to use ng in Windows 11 Terminal.
@raymondonfire
@raymondonfire 9 ай бұрын
Awesome project. Thanks. A few minor fixes: 1. In app.component.html should change to 2. In square.component.ts @Input() value: 'X' | 'O'; should rather be @Input() value: string; 3. In board.component.ts change this.winner = null; to this.winner = ""; and change the return null; in caclulateWinner to return ""; 4. Add "strictPropertyInitialization": false under "compilerOptions":{ in the project folder/tsconfig.json file, to avoid the value error. 5. Nebular is not compatible with Angular 16 yet. Either create the app with ng new --version=15 or just skip all the nebular parts (don't add the extra nb.... coding).
@AwesomePatPatPat
@AwesomePatPatPat 9 ай бұрын
Thank you!!😘
@monour2840
@monour2840 4 жыл бұрын
I know your channel is not for complete beginners, but I really hope you do more explanation videos for people starting out like me, I really love your style but many things and concepts went over my head ... I have so much to learn. Thanks for everything man, you're an inspiration.
@monour2840
@monour2840 4 жыл бұрын
@@helloworld7826 Thanks for the comment man, I'm already learning, I just look up to him so much and want more content for beginners explaining the basic concepts, he has a great style ... that's all
@abdoufma
@abdoufma 4 жыл бұрын
Take your time and learn one thing at a time, you'll get the hang of eventually :) Also if you're beginner, I suggest sticking to vanilla JS (jQuery and TS are also fine) until you have mastered all the basics, after that, I recommend checking these great Resources: History of JS : kzfaq.info/get/bejne/ic5mn65mnKnZm2g.html JS survival guide: kzfaq.info/get/bejne/b8udi7Gr1qmvqZs.html How was JS made: kzfaq.info/get/bejne/fLmjkq2K3NSllH0.html The only event loop video you'll ever need: kzfaq.info/get/bejne/mal_f5p-qJq0nGQ.html JS pro tips :kzfaq.info/get/bejne/g9ujktmozbqnoWQ.html Async/Await video: kzfaq.info/get/bejne/rNRjp9Bh1tvToXk.html Happy learning :)
@monour2840
@monour2840 4 жыл бұрын
@@abdoufma Thank you so much man, I really appreciate it.
@sophearithsaing6941
@sophearithsaing6941 4 жыл бұрын
You can search for resources from Academind or Udemy on youtube, they have a lot of great free resources for beginner then you can continue here to improve much more.
@DANiel25178
@DANiel25178 4 жыл бұрын
consider traversy media for more beginner friendly tutorial
@howardleen4182
@howardleen4182 5 ай бұрын
This tutorial desperately needs a 2024 update.
@lobster-music
@lobster-music 2 жыл бұрын
For anyone facing the problem of TS compiler complaining that 'value' is not initialized in the constructor, you can just add "strictPropertyInitialization": false in your ts config :)
@hasanmujawar2004
@hasanmujawar2004 Жыл бұрын
Thanks bro..
@ulissesmalanski6929
@ulissesmalanski6929 Жыл бұрын
stack overflow: Just make sure you add that after "strict": true else the transpiler seems to turn it on again (although VS seems to know it's off). after that change something on the square.components.ts file in order to the magic happens.
@blueyZee
@blueyZee Жыл бұрын
Or put a ! at the end of the variable to show that it will not be null or give it a type that is a union of string | null | undefined
@AwesomePatPatPat
@AwesomePatPatPat 9 ай бұрын
Thank you bro!!😘
@kingdarboja7903
@kingdarboja7903 4 жыл бұрын
Been a Front end Dev in Angular and this is the first time I see a different third party library for UI stuff besides Bootstrap, Material and Foundation. Love your courses :)
@pampula9327
@pampula9327 4 жыл бұрын
This is pure gold. Thank you! I am starting out Angular and I would love to see a bit more content that is aimed for beginners but anyway you got yourself another pro member, absolutely love this tempo, explanations and I am even excited about the intermediate content that you have for pro members. Great job!
@Fireship
@Fireship 4 жыл бұрын
Thank you Milos! Awesome to hear that :)
@jowbloe4700
@jowbloe4700 Жыл бұрын
How's the Angular been working out? I'm about to jump into it. I'm typically a C#/WPF type of guy. Past couple of years I did DevOps with Ansible/Jenkins.
@sodiboo
@sodiboo 4 жыл бұрын
"Angular Console" appears to have been renamed to "Nx Console"
@TroubleMakery
@TroubleMakery 4 жыл бұрын
Thanks, It has way fewer downloads so I wasn’t sure
@sivaprakash9285
@sivaprakash9285 3 жыл бұрын
also, it doesn't look anything like it...
@sodiboo
@sodiboo 3 жыл бұрын
but it seems to have the same functionality as angular console, even if it looks nothing alike...
@MaximilianBerkmann
@MaximilianBerkmann 3 жыл бұрын
Both don't seem to exist now.
@sodiboo
@sodiboo 3 жыл бұрын
@@MaximilianBerkmann I can find it still from my installed extensions, and the link to its marketplace listing is still functional marketplace.visualstudio.com/items?itemName=nrwl.angular-console
@guillermovillalta6322
@guillermovillalta6322 4 жыл бұрын
This is great, this video was my first experience developing something with Angular and really liked it! A few steps are overlooked but everything makes sense in the end. Thanks for your hard work.
@will_abule
@will_abule 4 жыл бұрын
Finally, the world will see "Angular" for what it truly is. Thanks, jeff please if you're watching retweet
@sauraussaurus
@sauraussaurus Жыл бұрын
I'm beginner just about 9 months into it all and just finished a javascript course, this is all new to me, this video was a tad fast paced for me but i bought the actual course on the website and im glad to say that this was broken down and slowed down so it was very clear and concise, can't wait to finish it.
@grosbras9068
@grosbras9068 4 жыл бұрын
It would be great to have a tutorial with Angular and NestJS (even better if there is websocket in it!). Two very powerful frameworks, same global architecture, two powerful CLIs and same language. Thanks for your work!
@Fireship
@Fireship 4 жыл бұрын
Angular/Nest make a great combo. Most Nest content is high on my todo list.
@NeekiRasoi
@NeekiRasoi 3 жыл бұрын
@@Fireship Where videos? 😕
@phillipables3689
@phillipables3689 4 жыл бұрын
legit, best tutorial i have seen in a long time. missed a few baby steps but nothing worth recovering!!
@trevorsoh2130
@trevorsoh2130 2 жыл бұрын
Can I just say that you are a great teacher. Never though my brain could understand programming / but you make it approachable
@saurabhdome
@saurabhdome 3 жыл бұрын
Whenever you create a video "for Beginners" you should create it for Beginners, In the whole video, your priority was to shorten the video rather than the core philosophy of the video, "To deliver the knowledge". It was fine you doubled the length, We would have still watched it. I learned a lot in these 20 mins but a mess is left behind and I ended up not able to create the TicTacToe webapp. Thank you for your efforts though.
@ProgrammingwithPeter
@ProgrammingwithPeter 4 жыл бұрын
This channel is getting better and better
@xarttx4702
@xarttx4702 Жыл бұрын
14:59 The app doesn't work. You need to change the app.component.html to use as opposed to
@theegameer12
@theegameer12 2 жыл бұрын
Hey man, great tutorial, as someone who knows the basics of web dev but never touched angular this was great to get started 🤯
@yuridigital
@yuridigital 4 жыл бұрын
awesome, Angular needs more love
@Fireship
@Fireship 4 жыл бұрын
So underrated, unfortunately. It's incredibly efficient when you know how to use it.
@niclasj2871
@niclasj2871 4 жыл бұрын
@@Fireship When I started I went for vuejs because it seemed very smooth to learn specially with the CDN integration for a absolute beginner it was awesome. Now over a year later I got a vuejs app in production and while I kinda wanna learn Angular and maybe use that for future projects I always catch myself thinking what can it provide that vuejs doesnt? Thats why I personally did not go for it.. yet
@palashsureka5423
@palashsureka5423 3 жыл бұрын
@@Fireship My religion requires me to detest angular
@AllVid
@AllVid 3 жыл бұрын
@@palashsureka5423 I sense a react user
@breezeex4
@breezeex4 4 жыл бұрын
Great video!! I have all my developers working me following you!!! Keep it up!! I hope you get into the details of lazy loading, not much out there on this and I think it would be beneficial to everyone!!
@andresram_1
@andresram_1 4 жыл бұрын
Amazing, but one additional improvement: You should prevent additional moves when the winner is known. Adding something in the makeMove method will solve this (i.e. if the winner is not null, then return)
@kellybmackenzie
@kellybmackenzie Жыл бұрын
This was amazingly helpful, thank you so much!! ❤
@vladimirjean
@vladimirjean 4 жыл бұрын
Awesome, I've learned so much, thanks a lot!
@bushraabbasi31
@bushraabbasi31 3 жыл бұрын
follow steps throughout the video still get errors. Property 'squares' has no initializer and is not definitely assigned in the constructor. Type 'null' is not assignable to type 'string'. Type 'string' is not assignable to type '"X" | "O"'.
@macks6234
@macks6234 2 жыл бұрын
this looks like an issue with the tsconfig.json. try deleting " strictTemplates" from the angularCompilerOptions or set it to false. if that doesn't suffice try deleting "strict" from the compilerOptions or set it to false.
@mwn02
@mwn02 Жыл бұрын
@@macks6234 tysm
@ulissesmalanski6929
@ulissesmalanski6929 Жыл бұрын
Deleting the "strict": true, on tsconfig.json works !
@JuanManuelLinaresBloggerDeNiro
@JuanManuelLinaresBloggerDeNiro 2 ай бұрын
I know it's a 2yo question, but just in case someone comes here looking for help as I did, I wanted to complement the solutions mentioned, in case you prefer not to turn "strict" to false in tsconfig.json. For the "Property ... has no initializer and is not definitely assigned in the constructor" error, you can add an exclamation mark (!) after the name of the variable to skip initialization (e.g.: squares!: any[ ];). For the "Type 'null' is not assignable to type 'string' " error, you can type the variable string also as null, like this: winner: string | null; I hope this helps.
@danielguzman8607
@danielguzman8607 4 жыл бұрын
Recently, a friend of mine (which is just starting learning web dev) told me Angular is going down in popularity lists... I just said: "I love Angular anyways. I'll with it". Lol I Really love Angular. I've been using it since a few years. Came to video because KZfaq recommended it and... Hat off. Excellent job, mate!
@EduardsSilins
@EduardsSilins 4 жыл бұрын
Thanks for the pwa part. changed whole thing for me... :)
@JoeRomine
@JoeRomine 4 жыл бұрын
@ 9:30 you add to the app.component.html. At what point in the video do you change this to point at ?
@adoniscruz2807
@adoniscruz2807 4 жыл бұрын
Thank you! This helps so much! For anyone who doesn't see the board rendering at this point in the tutorial, try this: a) go into the app.component.html file and change to b) If the board renders but the button are still to small, go to the sqaure.component.ts then in @Component > style make sure it looks like this: styles: ['button { width: 100%; height: 100%; font-size: 5em !important; }'] (from the source code in the description) 3) At this point the app should look like the one in the tutorial and you should be good to proceed to add the extra styling from the rest of the tutorial!
@ederjuniorchua827
@ederjuniorchua827 4 жыл бұрын
@@adoniscruz2807 thank you so much! been figuring out for awhile.
@wilfred05777
@wilfred05777 4 жыл бұрын
@@adoniscruz2807 thanks Ma'am i almost forgot to add the component to the root
@goksengorgulu4874
@goksengorgulu4874 4 жыл бұрын
@Joe Romine , I think that part is not involved in the video. I also struggled there then went to source code to check it.
@alexisordinary
@alexisordinary 4 жыл бұрын
Why the hell did he skip SO MUCH code? This honestly threw me off.
@willigeek2013
@willigeek2013 4 жыл бұрын
Man! You have no idea how helpful you are ... You might as well be Superman or dare i say ... SuperFireShip! #lamejoke Thanks alot man. Really appreciate your effort. SO HELPFUL.
@superaavish
@superaavish 4 жыл бұрын
This is soo awesome! Loved it🙏
@karlmiller6885
@karlmiller6885 4 жыл бұрын
Hey there Fireship, love the tutorials, they've really accelerated my learning. I ran into a problem with this that I am scratching my head over. The tic tac toe board functions, but the buttons don't fill type divs. Not sure if there was something omitted or it's because the vids already outdated, couldn't find where I missed it. This was a great introduction to angular for me and I'm excited to learn this framework! Hard to debug though, since all the generated code makes the process sort of invisible on the front end. I can see why its so worth learning now!
@ausgearbeitet4684
@ausgearbeitet4684 4 жыл бұрын
I run in the same problem. Your can create or add following styles to the square.components.scss "button { width: 100%; height: 100%; font-size: 5em !important; }" or you need to copy it into styles: [ ] in the square.component.ts if you used inline functionality
@peterdobos7907
@peterdobos7907 Жыл бұрын
I had the same problem, and even the css didn't help. I forgot to remove the tag from before the tag in the square.component.ts. I removed it and that fixed the problem! Hope it helps! :D
@HexapoDD
@HexapoDD 4 жыл бұрын
Nice, exactly what I was looking for. Now that I know Vue a little, I think it is Time for the next Challange. Thanks for this!
@juandiego-jw3vm
@juandiego-jw3vm 4 жыл бұрын
As other comments, I would say that this is far from being a beginner tutorial, but thank you for sharing your knowledge man!
@angela_jx
@angela_jx 3 жыл бұрын
My frontend development journey was vue->react->angular. The only reason I tried out angular was because I wanted to learn ionic and heard it was better with angular. But god damn everything just feels so much more organized and simple in angular. I’m sure some of that is just typescript. My experience has been awesome in the past year or so. I pretty much exclusively use angular in my projects today
@jrafaelloredo4969
@jrafaelloredo4969 2 жыл бұрын
I couldn't use the Nx console because for some reason CLI is not detecting the latest node version i installed on my Mac. So i just went ahead and typed the commands. Great video. Thank you for making such great content.
@manofqwerty
@manofqwerty 4 жыл бұрын
Your voice just works for this type of video.
@narasimhasudhakar2470
@narasimhasudhakar2470 4 жыл бұрын
Loved your work
@AllenConway
@AllenConway 3 жыл бұрын
Great video! Only thing is I don't recommend is inlining the CSS and the template in the component at 6:30. It's just not how mainstream Angular development is done. It does look more React-esque as that's what a React component takes shape as with JSX and CSS in JS, but not Angular. You might not agree and I know this was just a demo, but people learning Angular probably shouldn't use that practice.
@martinguggenberger
@martinguggenberger 3 жыл бұрын
the last step isn't possible for me, i can't find the "add" in the NX Console (Angular Console -> NX Console).
@justinnoor4915
@justinnoor4915 3 жыл бұрын
Excellent video - thank you for your work
@trueberryless
@trueberryless 8 ай бұрын
Great tutorial! It covered all the necessary basic stuff. Little bit sad that Nebular is half dead right now and doesn't support Angular v16... But you can use Angular Material as well, so no problem!
@alexisordinary
@alexisordinary 3 жыл бұрын
For people struggling towards the end because of Nx Console, you can type in the commands normally in your terminal window. These are the commands I needed to use towards the end of the project to deploy it: ng add @angular/fire ng add @angular/pwa ng build (can be done in nx console) ng deploy
@Cru5y
@Cru5y 3 жыл бұрын
lifesaver
@andreclerigo3339
@andreclerigo3339 3 жыл бұрын
not working for me :c
@stevenj29
@stevenj29 3 жыл бұрын
thank you!
@eshaan7_
@eshaan7_ 4 жыл бұрын
Love, love, love this video!
@Contractor48
@Contractor48 4 жыл бұрын
I love you content and have subscribed to pro account. Thank you.
@Fireship
@Fireship 4 жыл бұрын
Awesome :) Thank you very much Puneet!
@bensonmwaura9494
@bensonmwaura9494 4 жыл бұрын
Nicely done! Would be great to see this implemented in Sapper/Svelte. It's great seeing solid, working principles all through.
@Fireship
@Fireship 4 жыл бұрын
You will see more Svelte content on the channel soon. I have a big project planned :)
@bensonmwaura9494
@bensonmwaura9494 4 жыл бұрын
@@Fireship Thanks! Looking forward to your next post.
@phoneywheeze9959
@phoneywheeze9959 Жыл бұрын
3 years, and now the fireship website is built with svelte kit...
@Brunoenribeiro
@Brunoenribeiro 4 жыл бұрын
I worked with Angular for a year, then migrated to Vue. I liked it so much that almost forgot how Angular helps by having so much out of the box. Thank you for this video, really useful! And good luck with the complete course! Might check it out :)
@rubenheymans1988
@rubenheymans1988 4 жыл бұрын
another great tutorial, gj man
@ahmedmotawea2072
@ahmedmotawea2072 4 жыл бұрын
Great video please add more about angular and it's latest versions
@yayo1977
@yayo1977 4 жыл бұрын
Props for another great tutorial! i am always couius when to use inline styles and templates and when not I alway like to use it separated but i loos very interestin to my to do it all in one file, althoug i get worry it can get to complex.
@karthikpgmr2811
@karthikpgmr2811 4 жыл бұрын
Super I am Happy about thiss🤗🤗🤗🤗🤗... plz upload detailed PWA Development..
@darthvader3229
@darthvader3229 3 жыл бұрын
I got an error on the value on @Input() value : 'X' | 'O';
@mediesjef
@mediesjef 3 жыл бұрын
It's because you have strict typing on your project
@kindred9768
@kindred9768 Жыл бұрын
My code ran smoodh
@mijaelwatts
@mijaelwatts 4 жыл бұрын
Wow man, I really enjoyed this tutorial, thank u very much and congrats! I do believe this is not for total beginners but is what people with a lil' bit more experience with the framework and want to speed up need.straight to the point, and short. Looking forward to keep checking ur vids :)
@MrBledi
@MrBledi 4 жыл бұрын
great explanation but for me personally using the ui for generating the components instead of the terminal, i didn't understand a bit but now i understood angular much better thanks
@RobertWildling
@RobertWildling 3 жыл бұрын
Due to Typescript updates, this tutorials needs a makeover. Would be a perfect example of how to evolve in TypeScript... Any chance to motivate you, @Fireship, in doing so?
@zendragon6
@zendragon6 2 жыл бұрын
Is that why I'm getting so many errors with my types?
@yt.neerajkumar
@yt.neerajkumar 3 жыл бұрын
Love from India.. You're awesome man.
@stevennery233
@stevennery233 4 жыл бұрын
This was great!
@georgiyzhuravlev9350
@georgiyzhuravlev9350 4 жыл бұрын
Awesome! Thanks!
@This.and.that.
@This.and.that. 4 жыл бұрын
Great vid! Do you think you could make a PWA beginner tutorial for Vue next?
@ericaskari
@ericaskari 4 жыл бұрын
I don't know really why Angular isn't that popular, not only it's Single page application It can be installed as pwa Can be lazy load different parts very very easily. It can scale up God damn very sexy. It's a year I'm working with Angular and I love it.
@harshpatel4780
@harshpatel4780 4 жыл бұрын
Great Work!
@iman2020
@iman2020 2 ай бұрын
even tho i found trouble to work with nebular i actualy love this video soo much great way to get started with angular btw is there any other tools i could use instead of nebular?
@g-luu
@g-luu 4 жыл бұрын
Hi Jeff, awesome content as always. Quick one - how do i make a once off purchase on your course cause seems like its only available for members. Thanks.
@JengasC
@JengasC 4 жыл бұрын
Cool! Go on!
@royalguard1012
@royalguard1012 Жыл бұрын
This app is broken and doesn't work anymore
@jackkirby5287
@jackkirby5287 2 жыл бұрын
Angular console no longer exists. It is called NX Console now :)
@monstereugene
@monstereugene Жыл бұрын
this is great and the fact I understand 80 percent of what's happening means I've come a long way. But I think it's best if I get the fundamentals completely down before I use any frame works. If this is backwards and you're a professional let me know.
@Edonaus
@Edonaus 4 жыл бұрын
This was so cool
@robhein7573
@robhein7573 3 жыл бұрын
I LOVE the pacing of this video. As an experienced dev, I'd much rather pause and review than sit through repetitive info I already know.
@9997eman
@9997eman 3 жыл бұрын
My thoughts exactly
@finalsecretofchrono1339
@finalsecretofchrono1339 2 жыл бұрын
Good video, people need to learn how to pause or slow the video down; the correct code is all in the Github.
@zitch7908
@zitch7908 Жыл бұрын
theres only an x in the top left corner when i load up the program????
@WorldAquariumSingapore
@WorldAquariumSingapore 3 жыл бұрын
angular is cool cheers and i just sub
@ashikbarua193
@ashikbarua193 2 жыл бұрын
Great video!
@brahim_boussadjra
@brahim_boussadjra 4 жыл бұрын
awesome tutorial
@ExplorerDori
@ExplorerDori 2 жыл бұрын
Can't find the angular console extension
@timuromarbaev1660
@timuromarbaev1660 2 жыл бұрын
it now called Nx Console. All the same but new name
@ExplorerDori
@ExplorerDori 2 жыл бұрын
@@timuromarbaev1660 Ohhh Thank you
@manishthomas341
@manishthomas341 4 жыл бұрын
Awesome 👍😍❤️
@akshaykumar_r
@akshaykumar_r 4 жыл бұрын
Nebular is growing!! :D
@edrobinson8248
@edrobinson8248 3 жыл бұрын
excellent. not many videos out there that build a practical app. great for my revision but bit misleading (and discouraging!) to decribe it as "for beginners". thanks !
@RyanScottECE
@RyanScottECE 4 жыл бұрын
FYI anyone doing this now -- Angular Console extension appears to be renamed nx console.
@ferdinandkom5337
@ferdinandkom5337 4 жыл бұрын
yes, and there is no add for pwa
@alexisordinary
@alexisordinary 4 жыл бұрын
@@ferdinandkom5337 have you figured out a way around it? There are no Add or Deploy buttons so not sure how to continue the tutorial.
@martinguggenberger
@martinguggenberger 3 жыл бұрын
@@alexisordinary Same here... can't continue at the moment
@alexisordinary
@alexisordinary 3 жыл бұрын
@@martinguggenberger hey Martin if I remember correctly I just typed the commands in the console to complete the tutorial :)
@martinguggenberger
@martinguggenberger 3 жыл бұрын
@@alexisordinary hm, i tried but the console says that the command doesn't exist
@nikensss
@nikensss 4 жыл бұрын
Hi Jeff. Is it possible to deploy an angular app to a firebase project and at the same time, use that firebase project to deploy some cloud functions that would act as the backend of that angular app?
@pepepriest5973
@pepepriest5973 2 жыл бұрын
My first project, thx for the guide dude! Question: why all variables/const now need a start value? I saw that too with flutter when i updated the core
@alfa_q
@alfa_q 4 жыл бұрын
Good video which is excellent for beginners like me who are proficient in at least one programming language (Python for me), minor knowledge of CSS, HTML, and JS That being said, there are two things that were skipped: Button CSS: button { width: 100%; height: 100%; font-size: 5em !important; } App Component HTML: But overall a great tutorial. Made me subscribe to the full course.
@Bob65001
@Bob65001 Жыл бұрын
I noticed the board part easily enough- but I was definitely stumped on the css. THANKYOU SO MUCH!
@Siclon100
@Siclon100 4 жыл бұрын
Great work! As ussual
@Fireship
@Fireship 4 жыл бұрын
Thank you Mario :)
@Siclon100
@Siclon100 4 жыл бұрын
@@Fireship thanks you for your awsome work ={D
@JoeRomine
@JoeRomine 4 жыл бұрын
@ 17:37 is the last time I see the square component and it has no style set. Without styling the X & O buttons wont fill the entire square. I see the proper styling on the square component in the github repo.
@geekdesprairies
@geekdesprairies 2 жыл бұрын
Cool video! Just a question: at 12:00, wouldn't it be more simple to do just this: this.squares[idx] = this.player; Instead of splicing?
@FerdinandCoding
@FerdinandCoding Жыл бұрын
Can confirm this works! Looks much more simpler too.
@classicalfandom8219
@classicalfandom8219 Жыл бұрын
That is to keep the state immutable
@adesh116
@adesh116 4 жыл бұрын
Can we please get a tutorial on angular change detection and ExpressionChangedAfterItHasBeenCheckedError and steps to overcome it.
@ericaskari
@ericaskari 4 жыл бұрын
I feel you man 😁😁😂😂
@adesh116
@adesh116 4 жыл бұрын
😂😂
@Fireship
@Fireship 4 жыл бұрын
Lol, that is a much needed video.
@SuboptimalEng
@SuboptimalEng 4 жыл бұрын
What VSCode theme do you use?
@webbhinton6842
@webbhinton6842 Жыл бұрын
Note that currently you'll need to use Angular 14, not 15, to use nebular.
@leonardocollares
@leonardocollares 4 жыл бұрын
Thanks for sharing your knowledge but I wouldn't consider this as a beginner video. It's too fast and not clear for beginners.
@alexismandelias
@alexismandelias 3 жыл бұрын
For the "too fast", you can always rewind or slow down the video to x0.75 for example. For the not clear, yea a little bit of knowledge is required before diving into this stuff
@amankaushik5833
@amankaushik5833 3 жыл бұрын
well you forgot to say that its "too fast for you", and btw he explained it very clearly, and you can rewind the video if you didn't understand something
@paolodisintegra
@paolodisintegra 4 жыл бұрын
Angular + rxjs = 💣🔥
@SunilSkanda
@SunilSkanda 4 жыл бұрын
Hey, I'm thinking of buying your Angular course, but wanted to know if it covers state management?
@liondeluxe3834
@liondeluxe3834 4 жыл бұрын
I just finished building a tic tac toe app today, it uses firebase as a backend. And now this shows up.
@brucelee7782
@brucelee7782 Жыл бұрын
very nice tutorial I like
@Baxa125
@Baxa125 Жыл бұрын
Thanks
@elmotareal
@elmotareal 4 жыл бұрын
I had pwa added and i wish it was that simple... It turned out to be a nightmare if you had multiple projects on the same root
@orange_machine264
@orange_machine264 4 жыл бұрын
Anyone know the fonts used at 4:22? Another quality video, Jeff!
@eshaan7_
@eshaan7_ 4 жыл бұрын
@fireship tell us
@AdiSings2023
@AdiSings2023 2 жыл бұрын
In the latest version: 11:30 -> this.winner = null; This won't work cause you can't assing null to a string.
@Ma0ri0
@Ma0ri0 2 жыл бұрын
try deleting " strictTemplates" from the angularCompilerOptions or set it to false. if that doesn't suffice try deleting "strict" from the compilerOptions or set it to false
@xarttx4702
@xarttx4702 Жыл бұрын
@@Ma0ri0 thank you!!
@kumarharsh4408
@kumarharsh4408 3 жыл бұрын
Thank you for this amazing video. But Please try to go slow and dont skip anything .
@Jubinmail
@Jubinmail 3 жыл бұрын
Hi Jeff. Planning to recreate this game in Vue. Hope you are cool with it.
@andreclerigo3339
@andreclerigo3339 3 жыл бұрын
is it just me or this code isnt working anymore?
@teuns9
@teuns9 Жыл бұрын
even when i copy paste the entire app dir it gives me some string error with 'X' | 'O' to string value (the variable stats called value)
@drpib14
@drpib14 Жыл бұрын
Change the value of @Input() value: "X" | "O" to @Input() value: string; in the square.component.ts file
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,5 МЛН
Build Your First ANGULAR Web app ~ Beginner Angular Todo app
30:29
Tyler Potts
Рет қаралды 117 М.
Heartwarming: Stranger Saves Puppy from Hot Car #shorts
00:22
Fabiosa Best Lifehacks
Рет қаралды 21 МЛН
路飞被小孩吓到了#海贼王#路飞
00:41
路飞与唐舞桐
Рет қаралды 67 МЛН
🤔Какой Орган самый длинный ? #shorts
00:42
Русалка
01:00
История одного вокалиста
Рет қаралды 5 МЛН
10 regrets of experienced programmers
8:16
Fireship
Рет қаралды 1,1 МЛН
Angular Tutorial for Beginners: Learn Angular & TypeScript
2:02:42
Programming with Mosh
Рет қаралды 4,3 МЛН
My Brain after 569 Leetcode Problems
7:50
NeetCode
Рет қаралды 2,4 МЛН
Reacting to Controversial Opinions of Software Engineers
9:18
Fireship
Рет қаралды 2 МЛН
Angular Basics, Pros and Cons Explained
11:41
AltexSoft
Рет қаралды 54 М.
10 Programmer Stereotypes
5:08
Fireship
Рет қаралды 3,1 МЛН
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,3 МЛН
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 459 М.
100+ Linux Things you Need to Know
12:23
Fireship
Рет қаралды 727 М.
Angular vs React: which should you choose?
6:26
Kodaps Academy
Рет қаралды 108 М.
Опыт использования Мини ПК от TECNO
1:00
Андронет
Рет қаралды 768 М.
1$ vs 500$ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ !
23:20
GoldenBurst
Рет қаралды 1,6 МЛН
Samsung Galaxy 🔥 #shorts  #trending #youtubeshorts  #shortvideo ujjawal4u
0:10
Ujjawal4u. 120k Views . 4 hours ago
Рет қаралды 3,9 МЛН