Angular for Beginners - Let's build a Tic-Tac-Toe PWA
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2019
- 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. - วิทยาศาสตร์และเทคโนโลยี
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
thanks for the comment!
thank you
thank you so much
Very helpful, Thanks.
For me, I had to remove file "ng.ps1" from "C:\Users\%YourUser%\AppData\Roaming
pm" to use ng in Windows 11 Terminal.
This tutorial desperately needs a 2023 update. So much has changed.
yeeees
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.
@@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
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 : th-cam.com/video/Sh6lK57Cuk4/w-d-xo.html
JS survival guide: th-cam.com/video/9emXNzqCKyg/w-d-xo.html
How was JS made: th-cam.com/video/FSs_JYwnAdI/w-d-xo.html
The only event loop video you'll ever need: th-cam.com/video/cCOL7MC4Pl0/w-d-xo.html
JS pro tips :th-cam.com/video/Mus_vwhTCq0/w-d-xo.html
Async/Await video: th-cam.com/video/vn3tm0quoqE/w-d-xo.html
Happy learning :)
@@abdoufma Thank you so much man, I really appreciate it.
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.
consider traversy media for more beginner friendly tutorial
"Angular Console" appears to have been renamed to "Nx Console"
Thanks, It has way fewer downloads so I wasn’t sure
also, it doesn't look anything like it...
but it seems to have the same functionality as angular console, even if it looks nothing alike...
Both don't seem to exist now.
@@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
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).
Thank you!!😘
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 :)
Thanks bro..
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.
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
Thank you bro!!😘
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 :)
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!
Thank you Milos! Awesome to hear that :)
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.
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"'.
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.
@@macks6234 tysm
Deleting the "strict": true, on tsconfig.json works !
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.
This tutorial desperately needs a 2024 update.
14:59 The app doesn't work. You need to change the app.component.html to use as opposed to
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!
Angular/Nest make a great combo. Most Nest content is high on my todo list.
@@Fireship Where videos? 😕
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.
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
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
legit, best tutorial i have seen in a long time. missed a few baby steps but nothing worth recovering!!
I got an error on the value on @Input() value : 'X' | 'O';
It's because you have strict typing on your project
My code ran smoodh
This channel is getting better and better
@ 9:30 you add to the app.component.html. At what point in the video do you change this to point at ?
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!
@@adoniscruz2807 thank you so much! been figuring out for awhile.
@@adoniscruz2807 thanks Ma'am i almost forgot to add the component to the root
@Joe Romine , I think that part is not involved in the video. I also struggled there then went to source code to check it.
Why the hell did he skip SO MUCH code? This honestly threw me off.
Can't find the angular console extension
it now called Nx Console. All the same but new name
@@timuromarbaev1660 Ohhh Thank you
Hey man, great tutorial, as someone who knows the basics of web dev but never touched angular this was great to get started 🤯
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)
theres only an x in the top left corner when i load up the program????
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!!
What VSCode theme do you use?
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
awesome, Angular needs more love
So underrated, unfortunately. It's incredibly efficient when you know how to use it.
@@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
@@Fireship My religion requires me to detest angular
@@palashsureka5423 I sense a react user
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?
can anyone help me? For some reason the buttons inside the grid are small. They don't take up the whole cell.
what icon extancen you use in vs ?
Awesome, I've learned so much, thanks a lot!
vs code only has nx console and doesnt have add feature. cannot find the @angular/pwa
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?
Where can i get all the available packages for the ng add command?
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
lifesaver
not working for me :c
thank you!
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!
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
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
Thanks for the pwa part. changed whole thing for me... :)
How does the highlight border appear on next item on click?
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.
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?
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.
can we change the values of X and O to some random alphabets like A and B?
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!
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.
As other comments, I would say that this is far from being a beginner tutorial, but thank you for sharing your knowledge man!
How can I add 2 textboxes where player can write their own names instead of X and O?
I didn’t find in this video the “store history moves”. It was there in React tutorial. Can Angular also do this?
This was amazingly helpful, thank you so much!! ❤
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.
sounds like its something to do with the SCSS. But without the code I can't help?
what is the icon theme you are using that shows angular icon
This is soo awesome! Loved it🙏
My vscode doesn’t display any autocomplete in the html. What’s that I’m missing?
is it just me or this code isnt working anymore?
Nicely done! Would be great to see this implemented in Sapper/Svelte. It's great seeing solid, working principles all through.
You will see more Svelte content on the channel soon. I have a big project planned :)
@@Fireship Thanks! Looking forward to your next post.
3 years, and now the fireship website is built with svelte kit...
Your voice just works for this type of video.
I can't use the NX Console on windows, it runs on powershell.
How will I run this on powershell?
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.
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...🤗
Hey, I'm thinking of buying your Angular course, but wanted to know if it covers state management?
I'm a tad confused as to why only one block was generated from my view. Any reason for this?
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 vid! Do you think you could make a PWA beginner tutorial for Vue next?
@ 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.
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)
Change the value of @Input() value: "X" | "O" to @Input() value: string; in the square.component.ts file
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
How is he using the app in brower before hosting it? I am struggling working out local host for testing purposes
How did you get that fresh landing page when you generated the project? All I get is a still logo and 3 boring links.
upgrade to angular 8, you are still on
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!
I cannot deploy the app on firebase, I get an error about undefined something
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 ?
How do you fix
Failed to compile.
src/app/app.module.ts:11:37 - error TS2307: Cannot find module '@angular/service-worker' or its corresponding type declarations.
11 import { ServiceWorkerModule } from '@angular/service-worker';
~~~~~~~~~~~~~~~~~~~~~~~~~
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
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.
In app.component.html, change your app-square line to
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.
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 TH-cam recommended it and... Hat off. Excellent job, mate!
how do i install angular console extension?
I can't seem to be able to install it after deploying. Any help? I wont even pop the icon
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.
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.
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?
Is that why I'm getting so many errors with my types?
Hey,
could someone explain how to remove the random highlighter after clicking on a nbButton? @ 18:01
Nebular comes with great accessibility features out of the box. The highlighting you're seeing is for the sake of accessibility of button. You might have to override this in the css, probably using !important. Although, its fine in this case, it is not really recommended to do in the real world acenario
I know this is late, but by default it seems it sets the document.focusedElement to the next object in the grid.
@@nicholostyler8873 2 years ago i am looking for that so never too late lol
I just tried it, the code no longer compiles.
Can we please get a tutorial on angular change detection and ExpressionChangedAfterItHasBeenCheckedError and steps to overcome it.
I feel you man 😁😁😂😂
😂😂
Lol, that is a much needed video.
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.
trying this in angular 14 and nebular is unable to be installed, something about dependency error greeaaat
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
what are the extensions or add-ons you are using in visual studio code for file icons
The extension is called "Material Icon Theme" with 3.6M downloads
There is no Angular Console as shown in the video at marketplace. How to download it?
it's now called Nx console
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!
Love, love, love this video!
Excellent video - thank you for your work
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?
nvm, had to migrate project to Nx, works now
Loved your work
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
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
anyone found a fix for this?
I love you content and have subscribed to pro account. Thank you.
Awesome :) Thank you very much Puneet!
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 :)
In the latest version: 11:30 -> this.winner = null; This won't work cause you can't assing null to a string.
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
@@Ma0ri0 thank you!!