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

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

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

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

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!

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

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

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

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!

This tutorial desperately needs a 2024 update.

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.

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.

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

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"'.

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

awesome, Angular needs more love

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!

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.

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

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.

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

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

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?

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

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

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

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!

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

Can't find the angular console extension

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

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.

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

In the latest version: 11:30 -> this.winner = null; This won't work cause you can't assing null to a string.

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.

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)

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?

Angular console no longer exists. It is called NX Console now :)

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

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)

FYI anyone doing this now -- Angular Console extension appears to be renamed nx console.

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.

I'm stuck at css. I only see a small square with an X. Nothing i put on css changes anything. Can anyone help me with this? I',m sure its something really stupid.

This app is broken and doesn't work anymore

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

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.

Note that currently you'll need to use Angular 14, not 15, to use nebular.

Thanks for this tutorial, but... I'm a full beginner in Angular, but not in web development. Just tried to follow you step by step typing every single letter and didn't get exact results what you got( 14:58 my buttons don't look like yours. You missed "firebase init" at the end so deploy in the video won't work( So please, don't miss such steps in your videos, they are really great and full of good info, but such moments can make a lot of troubles) All good)

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?

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

Can we please get a tutorial on angular change detection and ExpressionChangedAfterItHasBeenCheckedError and steps to overcome it.

Good video, people need to learn how to pause or slow the video down; the correct code is all in the Github.

is it just me or this code isnt working anymore?

the angular console seems to take a lot longer to use than just typing the commands lol

Anyone getting errors with various parts of the code, have a look at the autogenerated tsconfig.json file and replace it with the following code: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } } It is his code from his github.

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.

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

Should I use angular today in 2021

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

Your voice just works for this type of video.

webpack to prevent js bubbling. assets folder angular out of box solutions: cli react: html react to data dumb component setup in ngOnInit nebular is a powerful style library for angular ngModules, to use angular in progressive way(use only parts of the framework that you currently need) pwa

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.

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.

Great tutorial, but unfortunately with the newer versions of Angular the board.component.ts code is full of errors, I guess my typescript version is tougher than the one used in the tutorial. So this 20min tutorial is taking hours...

Hey! thank you so much for the cool content, very helpful. when I click on one of the squares the next available one gets highlited instead, I thought it was just a problem I cause after customizing some stuff. I noticed it happens in your version too, I know the board technically works fine but do you (or anyone) know why it happens? how do I fix it ? Thank you.

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

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

I do not reccommend this video for beginners, I tried using this to learn angular for the first time and it feels like it's outdated. maybe I am just newb but I tried copying the same things as the video and a lot isn't stated in the video.

Loved your work

Anyone know the fonts used at 4:22? Another quality video, Jeff!

3:53 TypeScrip Should Be In front

At 10:15 I get the error "Property 'squares' has no initializer and is not definitely assigned in the constructor." The same goes for xIsNext and winner. Can I know why am I having this error and how can I fix it? This is my first try on Angular yess. Great tutorial btw 👌🏽

Any Windows users running running into "Error: This command is not available when running the Angular CLI outside a workspace." when using commands like ng add ? I'm able to use ng serve, but not ng add/ng run...Very confusing

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.

The hover effect is buggy. When you click a square it makes the next square go in focus for a split second, giving it the hover effect. It's incredibly annoying. I've tried to fix it for hours. Someone for the love of god help

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

Help, my squares aren't squares, they're just rectangles placed one under the other hahaha :(

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

Hi awesome tutorial, easiest among all the tictactoe for angular present oninternet, i leart many things in this tutorial extensions , and firebase and angular true value pwa, there were few erros as due to recent code update is needed by you,, but i am only stuck with using nx console and uploading to firebase using pwa, that last part i am not able to process

Hey, could someone explain how to remove the random highlighter after clicking on a nbButton? @ 18:01

If u go 2 rxjs official site u will see more games, u can just google rxjs angular games

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!

Love from India.. You're awesome man.

anyone here got to 15:00 and the button is small ?( the 'X' and 'O' buttons not matching the grid size and they are small show at the left) if anyone is encountring this problem and fixed it . Please share with us your solution. Btw great tutorial to angular, learned a lot as a beginner!

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

Can you please do an Angular 17 real-world project tutorial video?

i have one week since i started angular , i did crud project , but i failed this one , i followed every steps but still didn't understand some concepts , wish me good luck to the next projects , and if you have any advice, feel free to share it with me , thank you

Great work! As ussual

Excellent video - thank you for your work

I am getting bundle error on prod build , Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 622.16 kB with a total of 1.61 MB.

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

I can't use the square component in the app's template, it says it is undefined

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

Thank you for this amazing video. But Please try to go slow and dont skip anything .

I just tried it, the code no longer compiles.

angular is cool cheers and i just sub

I don't know. Followed exactly what you did but the game itself didn't come up. Rechecked multiple times all I could see was the one button with the X in it created early. Copied code from your github file to file and that completely broke the app.

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

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.

i'm in the initial step of creating a `square` component but when using Nx Console, project name is now a select list, but there are no options to select. How can I get Nx Console to recognize my project name (tic-tac-toe), or, what do I need to configure?

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

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 !