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).
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 :)
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.
@@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
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.
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 :)
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.
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!
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.
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.
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!
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
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.
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.
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!
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.
@@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
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
@ 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.
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
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.
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?
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?
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!
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!
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)
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
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
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
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.
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.
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
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.
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 👌🏽
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)
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.
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
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.
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.
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...🤗
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
I don't know but i feel like react has been designed more elegantly and it seems more logical to me than Angular especially the Components part, react use JSX witch is more robust and more sensical, and the flexibility that react gives you is more important to me than the burden of choosing external libraries that angular gives you and demands you to use at the beginning. i wish you can make in the future more videos about reactjs.
Roland Brake I’m a React developer trying to branch out and learn new technologies to not get stuck in a box. Just watching this video, you have to have decorators everywhere, type code as a string, and just do other weird things that seemed like they’d become a pain in the ass. I definitely want to explore angular more, it just looks so messy compared to well written React.
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...
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
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.
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!
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?
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
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?
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.
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.
Great, but because I'm a beginner, I didn't want to use the GUI for creating components etc. so I disabled the app. I wanted to learn how to write new components into existence and had to do a bit of research. However, great tutorial.
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
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
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!!
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.
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!!😘
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
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.
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 :)
Finally, the world will see "Angular" for what it truly is. Thanks, jeff please if you're watching retweet
This tutorial desperately needs a 2024 update.
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.
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.
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? 😕
14:59 The app doesn't work. You need to change the app.component.html to use as opposed to
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!
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.
@ 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.
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.
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
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!!
@ 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.
the last step isn't possible for me, i can't find the "add" in the NX Console (Angular Console -> NX Console).
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
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
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.
Can I just say that you are a great teacher. Never though my brain could understand programming / but you make it approachable
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?
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?
Can't find the angular console extension
it now called Nx Console. All the same but new name
@@timuromarbaev1660 Ohhh Thank you
theres only an x in the top left corner when i load up the program????
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!
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!
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)
FYI anyone doing this now -- Angular Console extension appears to be renamed nx console.
yes, and there is no add for pwa
@@ferdinandkom5337 have you figured out a way around it? There are no Add or Deploy buttons so not sure how to continue the tutorial.
@@alexisordinary Same here... can't continue at the moment
@@martinguggenberger hey Martin if I remember correctly I just typed the commands in the console to complete the tutorial :)
@@alexisordinary hm, i tried but the console says that the command doesn't exist
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.
My thoughts exactly
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
Good video, people need to learn how to pause or slow the video down; the correct code is all in the Github.
Hey man, great tutorial, as someone who knows the basics of web dev but never touched angular this was great to get started 🤯
As other comments, I would say that this is far from being a beginner tutorial, but thank you for sharing your knowledge man!
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.
legit, best tutorial i have seen in a long time. missed a few baby steps but nothing worth recovering!!
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?
Can confirm this works! Looks much more simpler too.
That is to keep the state immutable
Thanks for sharing your knowledge but I wouldn't consider this as a beginner video. It's too fast and not clear for beginners.
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
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
Should I use angular today in 2021
Angular console no longer exists. It is called NX Console 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.
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.
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
is it just me or this code isnt working anymore?
Note that currently you'll need to use Angular 14, not 15, to use nebular.
This channel is getting better and better
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
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.
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 👌🏽
I read that it is due to updates on Typescript. Sad :(
@Input() value!: "X" | "O";
putting exclamation mark after value should fix it but you will get other breaking errors which i couldn't fix yet
the angular console seems to take a lot longer to use than just typing the commands lol
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)
Thanks for the feedback. Running ng add @angular/fire should init Firebase, but it looks like there's an open bug on windows currently.
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
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
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.
I'm seeing the same thing. It also happens in this video. I haven't yet solved it either 😄
did you fix this?
1 year later still no solution lol
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.
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.
Anyone know the fonts used at 4:22? Another quality video, Jeff!
@fireship tell us
I can't use the square component in the app's template, it says it is undefined
send stackblitz
3:53 TypeScrip Should Be In front
This guy TypeScripts
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...🤗
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
I just tried it, the code no longer compiles.
I don't know but i feel like react has been designed more elegantly and it seems more logical to me than Angular especially the Components part, react use JSX witch is more robust and more sensical, and the flexibility that react gives you is more important to me than the burden of choosing external libraries that angular gives you and demands you to use at the beginning. i wish you can make in the future more videos about reactjs.
Roland Brake I’m a React developer trying to branch out and learn new technologies to not get stuck in a box. Just watching this video, you have to have decorators everywhere, type code as a string, and just do other weird things that seemed like they’d become a pain in the ass. I definitely want to explore angular more, it just looks so messy compared to well written React.
what icon extancen you use in vs ?
Great video please add more about angular and it's latest versions
Hi Jeff. Planning to recreate this game in Vue. Hope you are cool with it.
There is no Angular Console as shown in the video at marketplace. How to download it?
it's now called Nx console
I just finished building a tic tac toe app today, it uses firebase as a backend. And now this shows up.
can we change the values of X and O to some random alphabets like A and B?
Anyone else struggling with the nx console commands ? 'No projects found. Did you run npm/pnpm/yarn install?'
Love from India.. You're awesome man.
If u go 2 rxjs official site u will see more games, u can just google rxjs angular games
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...
agree
can anyone help me? For some reason the buttons inside the grid are small. They don't take up the whole cell.
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
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.
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!
Super demo thanks for this. I'm curious why the use of 'splice' at 12:06.
Removes elements from an array (squares) and, if necessary, inserts new elements in their place (player X or O), returning the deleted elements.
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?
angular is cool cheers and i just sub
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
for some reason, the github version doesn't build on windows but builds on linux as npm is unable to fix dependencies.
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
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.
Can you please do an Angular 17 real-world project tutorial video?
I didn’t find in this video the “store history moves”. It was there in React tutorial. Can Angular also do this?
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?
Great, but because I'm a beginner, I didn't want to use the GUI for creating components etc. so I disabled the app.
I wanted to learn how to write new components into existence and had to do a bit of research. However, great tutorial.
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
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?
How is he using the app in brower before hosting it? I am struggling working out local host for testing purposes
how do u just spawn code like @11:48 . are you copying and pasting form somewhere or are u using shortcuts?
the power of video editing I assume.
I love you content and have subscribed to pro account. Thank you.
Awesome :) Thank you very much Puneet!
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!!