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

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.

[@ItsMe-oi9dy]

This tutorial desperately needs a 2023 update. So much has changed.

[@iman2020]

yeeees

[@RS-lh4gx]

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]

thanks for the comment!

[@stealthypirate318]

thank you

[@PizzaDcalabresa]

thank you so much

[@haseebqureshi2291]

Very helpful, Thanks.

[@turboheadcrab666]

For me, I had to remove file "ng.ps1" from "C:\Users\%YourUser%\AppData\Roaming pm" to use ng in Windows 11 Terminal.

[@monour2840]

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]

@@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]

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 : kzbin.info/www/bejne/iZmZnX5rbKiooZY JS survival guide: kzbin.info/www/bejne/b5bQiYGwpqh-r8k How was JS made: kzbin.info/www/bejne/fITWkH2PrNN0mqs The only event loop video you'll ever need: kzbin.info/www/bejne/mXSyfWqDeJmDopI JS pro tips :kzbin.info/www/bejne/g6bWkKmtnbl2p5I Async/Await video: kzbin.info/www/bejne/rJ-WpaBmptqip6c Happy learning :)

[@monour2840]

@@abdoufma Thank you so much man, I really appreciate it.

[@sophearithsaing6941]

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]

consider traversy media for more beginner friendly tutorial

[@raymondonfire]

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]

Thank you!!😘

[@kingdarboja7903]

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]

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]

Thank you Milos! Awesome to hear that :)

[@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]

"Angular Console" appears to have been renamed to "Nx Console"

[@TroubleMakery]

Thanks, It has way fewer downloads so I wasn’t sure

[@sivaprakash9285]

also, it doesn't look anything like it...

[@sodiboo]

but it seems to have the same functionality as angular console, even if it looks nothing alike...

[@MaximilianBerkmann]

Both don't seem to exist now.

[@sodiboo]

@@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

[@will_abule]

Finally, the world will see "Angular" for what it truly is. Thanks, jeff please if you're watching retweet

[@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.

[@lobster-music]

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]

Thanks bro..

[@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]

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]

Thank you bro!!😘

[@guillermovillalta6322]

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.

[@trevorsoh2130]

Can I just say that you are a great teacher. Never though my brain could understand programming / but you make it approachable

[@phillipables3689]

legit, best tutorial i have seen in a long time. missed a few baby steps but nothing worth recovering!!

[@grosbras9068]

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]

Angular/Nest make a great combo. Most Nest content is high on my todo list.

[@NeekiRasoi]

@@Fireship Where videos? 😕

[@xarttx4702]

14:59 The app doesn't work. You need to change the app.component.html to use as opposed to

[@ProgrammingwithPeter]

This channel is getting better and better

[@martinguggenberger]

the last step isn't possible for me, i can't find the "add" in the NX Console (Angular Console -> NX Console).

[@theegameer12]

Hey man, great tutorial, as someone who knows the basics of web dev but never touched angular this was great to get started 🤯

[@yuridigital]

awesome, Angular needs more love

[@Fireship]

So underrated, unfortunately. It's incredibly efficient when you know how to use it.

[@niclasj2871]

@@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]

@@Fireship My religion requires me to detest angular

[@AllVid]

@@palashsureka5423 I sense a react user

[@bushraabbasi31]

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]

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]

@@macks6234 tysm

[@ulissesmalanski6929]

Deleting the "strict": true, on tsconfig.json works !

[@JuanManuelLinaresBloggerDeNiro]

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.

[@breezeex4]

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]

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)

[@danielguzman8607]

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 KZbin recommended it and... Hat off. Excellent job, mate!

[@vladimirjean]

Awesome, I've learned so much, thanks a lot!

[@kellybmackenzie]

This was amazingly helpful, thank you so much!! ❤

[@EduardsSilins]

Thanks for the pwa part. changed whole thing for me... :)

[@manofqwerty]

Your voice just works for this type of video.

[@juandiego-jw3vm]

As other comments, I would say that this is far from being a beginner tutorial, but thank you for sharing your knowledge man!

[@g-luu]

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.

[@nikensss]

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?

[@HexapoDD]

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!

[@zitch7908]

theres only an x in the top left corner when i load up the program????

[@superaavish]

This is soo awesome! Loved it🙏

[@willigeek2013]

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.

[@narasimhasudhakar2470]

Loved your work

[@This.and.that.]

Great vid! Do you think you could make a PWA beginner tutorial for Vue next?

[@SunilSkanda]

Hey, I'm thinking of buying your Angular course, but wanted to know if it covers state management?

[@jrafaelloredo4969]

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.

[@justinnoor4915]

Excellent video - thank you for your work

[@eshaan7_]

Love, love, love this video!

[@karlmiller6885]

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]

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]

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

[@ahmedmotawea2072]

Great video please add more about angular and it's latest versions

[@angela_jx]

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

[@saurabhdome]

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.

[@trueberryless]

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!

[@FrankLloydTeh]

Where can i get all the available packages for the ng add command?

[@pepepriest5973]

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

[@yayo1977]

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.

[@HK-sw3vi]

why is that for some reason my buttons and Xs and Os only appearing on the top left corner of each cell? is there a default padding or something along those lines?

[@darthvader3229]

I got an error on the value on @Input() value : 'X' | 'O';

[@mediesjef]

It's because you have strict typing on your project

[@kindred9768]

My code ran smoodh

[@bensonmwaura9494]

Nicely done! Would be great to see this implemented in Sapper/Svelte. It's great seeing solid, working principles all through.

[@Fireship]

You will see more Svelte content on the channel soon. I have a big project planned :)

[@bensonmwaura9494]

@@Fireship Thanks! Looking forward to your next post.

[@phoneywheeze9959]

3 years, and now the fireship website is built with svelte kit...

[@vishnulucky5141]

can we change the values of X and O to some random alphabets like A and B?

[@SuboptimalEng]

What VSCode theme do you use?

[@youtubecommentor1338]

great work , but.. in the app.component.html the code isnt recognising nb-layout. says "nb-layout is not a known element" . pls tell me what to import and into which file...🤗

[@alexisordinary]

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]

lifesaver

[@andreclerigo3339]

not working for me :c

[@stevenj29]

thank you!

[@rubenheymans1988]

another great tutorial, gj man

[@skyzane2735]

I didn’t find in this video the “store history moves”. It was there in React tutorial. Can Angular also do this?

[@MrBledi]

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

[@AllenConway]

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.

[@JoeRomine]

@ 9:30 you add to the app.component.html. At what point in the video do you change this to point at ?

[@adoniscruz2807]

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]

@@adoniscruz2807 thank you so much! been figuring out for awhile.

[@wilfred05777]

@@adoniscruz2807 thanks Ma'am i almost forgot to add the component to the root

[@goksengorgulu4874]

@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]

Why the hell did he skip SO MUCH code? This honestly threw me off.

[@giorgimerabishvili8194]

How does the highlight border appear on next item on click?

[@nodidog]

There is no Angular console extension available now, only NX console. And in my project when I run serve, nothing happens. It returns: > Executing task: ng serve myapp < and does nothing else as far as I can tell - no visual on-the-fly compilation, doesn't serve on 4200, just hangs. Pretty frustrating to have an immediate roadblock before I've even written a single line of code.

[@Contractor48]

I love you content and have subscribed to pro account. Thank you.

[@Fireship]

Awesome :) Thank you very much Puneet!

[@ExplorerDori]

Can't find the angular console extension

[@timuromarbaev1660]

it now called Nx Console. All the same but new name

[@ExplorerDori]

@@timuromarbaev1660 Ohhh Thank you

[@royilevy7322]

can anyone help me? For some reason the buttons inside the grid are small. They don't take up the whole cell.

[@iman2020]

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?

[@mathiasbraun6982]

How can I add 2 textboxes where player can write their own names instead of X and O?

[@netharuM]

what is the icon theme you are using that shows angular icon

[@georgiyzhuravlev9350]

Awesome! Thanks!

[@karthikpgmr2811]

Super I am Happy about thiss🤗🤗🤗🤗🤗... plz upload detailed PWA Development..

[@andreclerigo3339]

is it just me or this code isnt working anymore?

[@JengasC]

Cool! Go on!

[@TheASofMacWac]

How is he using the app in brower before hosting it? I am struggling working out local host for testing purposes

[@RaMeDrkazoni]

what icon extancen you use in vs ?

[@eoussama]

How did you get that fresh landing page when you generated the project? All I get is a still logo and 3 boring links.

[@Daamilola]

upgrade to angular 8, you are still on

[@den7ee]

Thank you! But is not working here, i have a difficulty to declare and use variables and functions because the type definition of typescript, someone can help me please?

[@emeraldelnas4833]

I can't use the NX Console on windows, it runs on powershell. How will I run this on powershell?

[@vampirejs758]

Should I use angular today in 2021

[@ridge_n]

I'm a tad confused as to why only one block was generated from my view. Any reason for this?

[@Brunoenribeiro]

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 :)

[@yt.neerajkumar]

Love from India.. You're awesome man.

[@consume94]

vs code only has nx console and doesnt have add feature. cannot find the @angular/pwa

[@salmansiddiqi9888]

Can I integrate this game in my AngularJS(1) project? Like if I want to use this game in one of my pages is it possible?because this is made with angular8

[@preyat94]

The buttons in my application, before the @nebular/theme installation, are not filling up all of the space in each square in the grid. They are instead fixed to the upper left corner. Everything works fine: logic is fine and click functionality is fine but each grid section is mostly empty white space with the button in the upper left looking tiny. I don't know how yours is filling up all the space? I've copied everything exactly, what am I missing? Thanks.

[@9997eman]

sounds like its something to do with the SCSS. But without the code I can't help?

[@ericaskari]

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.

[@dylandu6229]

I'm just curious how to combine the two components to one, like replace the to , but I don't know if there is a way to define the type of [value] to 'X' | 'O' in button tag, some idea will be appreciated.

[@9997eman]

you can put a hundred components in one. You just need to get the selector from each .ts file and add it to your dumb component.

[@skyzane2735]

My vscode doesn’t display any autocomplete in the html. What’s that I’m missing?

[@toan7224]

what wrong with nebular ? my button still white with X and O above it. I had wrote the same at your tutorial but where my "success" and "info" color ?

[@harshpatel4780]

Great Work!

[@stevennery233]

This was great!

[@burm4npgoget707]

Hi I'm working on a react/nextjs project with ant design. Would anyone know a way or a different ui library in react that lets you do the similar thing around 16:20 in this video? Just import or install only the ui components you need in the project without installing the entire library. Thank you.

[@adrienfernandez172]

I tried to install @angular/fire, but I get an error "certificate has expired". Are you aware of the issue and what can I do to fix it? thanks!

[@howardleen4182]

This tutorial desperately needs a 2024 update.

[@muyiwaaderinto4247]

Nice tutorial please how do i get this uploaded on heroku. Thanks

[@akshaykumar_r]

Nebular is growing!! :D

[@JoeRomine]

@ 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.

[@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]

Change the value of @Input() value: "X" | "O" to @Input() value: string; in the square.component.ts file

[@liondeluxe3834]

I just finished building a tic tac toe app today, it uses firebase as a backend. And now this shows up.

[@robhein7573]

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]

My thoughts exactly

[@geekdesprairies]

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]

Can confirm this works! Looks much more simpler too.

[@classicalfandom8219]

That is to keep the state immutable