Angular Crash Course

  Рет қаралды 1,475,635

Traversy Media

Traversy Media

Күн бұрын

Пікірлер: 1 400
@3pleFly
@3pleFly 2 жыл бұрын
If you have the error where your variables have not been initialized = that's because typescript requires you to initialize your variables similiar to strongly typed languages. While you should have a default value set and work with this feature to really utilize typescript, for this small 'project' you could just put an exclamation mark before your variables and it will let you leave them uninitialized, for example: subscription!: Subscription; or @Input() task!: Task;
@reedhimes
@reedhimes 2 жыл бұрын
thank you! i had this issue. also when the button component was created, there was no import for Input, so had an error on @Input.
@RataBohemia
@RataBohemia 2 жыл бұрын
You saved me bro, thank you
@ericlaravega6438
@ericlaravega6438 2 жыл бұрын
Thanks a lot, I couldn't find the way to make it work
@juandelahoz4577
@juandelahoz4577 2 жыл бұрын
ty man! that was very helpful
@johnchisowa8867
@johnchisowa8867 Жыл бұрын
Thanks. Spent the whole day trying to resolve this..
@damienquamme4903
@damienquamme4903 Жыл бұрын
If you're using Angular 17, you do have to import the component, at least I had to in order to get this to work. Example below: app.component.html import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { HeaderComponent } from './components/header/header.component'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, HeaderComponent], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-crash'; }
@XIAIXd3
@XIAIXd3 Жыл бұрын
Thank you for this! I thought I was going crazy. Would be cool if OP would update this whole tutorial for V17 on upward.
@joaomarcos7545
@joaomarcos7545 9 ай бұрын
Thank you!!!
@JuanManuelLinaresBloggerDeNiro
@JuanManuelLinaresBloggerDeNiro 8 ай бұрын
Thanks man, you also saved me! I was under the impression that it had to do with Brad using a previous version of Angular, but I didn't completely understand the instructions provided in the error. Just as a suggestion: you should probably clarify that the code above is from app.component.ts., not app.component.html. Anyway, you made my day :)
@TrueStoriesYoutube
@TrueStoriesYoutube 7 ай бұрын
Ils in .ts ont .html but thank you
@JaafarCherkaoui
@JaafarCherkaoui 7 ай бұрын
thanks bruv
@lvm_azn
@lvm_azn 9 ай бұрын
26:28 Had issues with the [ngStyle] attribute I did instead: [style.background-color]="color" - Update, also just learned that the default mode for components is standalone now. Which means whenever he is going to the app.module.ts to import something, just import it to the component you need it in. standalone = modules are for only that component.
@UsmanTheDev
@UsmanTheDev 3 жыл бұрын
Today i got my first job due to your courses. Love and respect for you from pakistan
@TraversyMedia
@TraversyMedia 3 жыл бұрын
That’s awesome man, congrats. But it’s due to your hard work. I may have had a helping hand, but you did it. Great job 😊
@simple8810
@simple8810 3 жыл бұрын
Congrats man
@Ab-cj6gl
@Ab-cj6gl 3 жыл бұрын
congrats brother
@adilmughal2251
@adilmughal2251 3 жыл бұрын
Congrats bro.
@saurabhumadikar2345
@saurabhumadikar2345 3 жыл бұрын
Congrats
@kevyyar
@kevyyar 3 жыл бұрын
We need a full course Brad! You explain so much better than all those other instructors!
@BusinessWolf1
@BusinessWolf1 Жыл бұрын
he kinda did. you can learn everything else on your own bit by bit, as you should
@reezuanrahim6646
@reezuanrahim6646 3 жыл бұрын
I think this is by far the most complete Angular tutorial done in two hours.. although it is not meant for a total beginner. Well done.. tq.
@dantshisungu395
@dantshisungu395 2 жыл бұрын
Unfortunately some of us are total beginner
@pieflies
@pieflies Жыл бұрын
@@dantshisungu395 for total beginners, I would recommend doing a lot of JavaScript learning (and also HTML and CSS) before learning Angular.
@王冠信-o1c
@王冠信-o1c 3 жыл бұрын
I've been following React, Vue, and Angular here, and in my opinion: 1. The advantage is that angular separate everything in the name of the component folder, which makes it easy to track the code. 2. Another thing is that the observable and subscription pattern ensures the asynchronous actions are clear and robust. 3. Default typescript. The points mentioned are fonds of debugging to refactoring. ----- 3. However, one component has four files, and sometimes it could be messy. Lots of files are kinds of mental attacks when switching and looking for files. 4. Angular exposes more complexity to the developer that one must first learn the class, constructor, implement, and the public, private data types. Otherwise, it could be challenging to understand. Instead, React and Vue hides those complexities, which are more user-friendly. 5. ng generate xxxxx is annoying.
@frantostin
@frantostin 3 жыл бұрын
As a little help, you can also use "g" instead of typing generate, and the same goes to component with "c", so you can just use "ng g c" and the name of it. Hope this helps a little bit!
@王冠信-o1c
@王冠信-o1c 3 жыл бұрын
Thank you!
@fatihersoy7559
@fatihersoy7559 2 жыл бұрын
"Angular exposes more complexity to the developer that one must first learn the class, constructor, implement, and the public, private data types". You should be thanking Angular because of this. Becuase they are the very fundamental of software developing, if you don't need them with other libraries/frameworks today, you'll need if not now but tomorrow so learning the basics of OOP is always good. Also if you don't want, you may not use ng generate, you can manually create your files and register to modules yourself. ng g just makes everything easier.
@hashanhemachandra4071
@hashanhemachandra4071 2 жыл бұрын
Thanks so much Brad. Thanks to this tutorial, I got my first job as a Software Engineer. Your life story is so inspiring and motivated me in my journey. I was a mechanical engineer and with so much hard work, I was able to shift my career. And on that journey, you played a most crucial role. May gods blessings be with you every day. Love and Respect form Sri Lanka ❤️
@jinge8943
@jinge8943 2 жыл бұрын
I saw this tutorial 2 times, and it was well organized tutorial for a new learners means most concepts needed in Angular in just 2 hours with small todo app. Did a good job!
@bittujacob8776
@bittujacob8776 3 жыл бұрын
i started watching your video in 2017 (html website development) when i was jobless, and now when i hear your voice, it reminds me where i was and where i am! Thankyou! God bless.
@PaulSebastianM
@PaulSebastianM 3 жыл бұрын
56:22 Brad, you can double click a word to select it, type " and VSCode will wrap the word in quotes instead of what you would normally think it would do, which is to replace the word with a ".
@tobiasfuchs2502
@tobiasfuchs2502 2 жыл бұрын
By pressing CTRL+D you can also select further elements and then type " to replace all at once.
@robertrey7002
@robertrey7002 3 жыл бұрын
Hey Brad you have built really an awesome channel over the years. Even though I don't really spend much time with Web Dev anymore, I still like to come back from time to time and watch your content, as well as your insights on life/work/mental health etc... Truly amazing work
@TraversyMedia
@TraversyMedia 3 жыл бұрын
Thank you 🙏🏼
@Dev_Everything
@Dev_Everything 3 жыл бұрын
25:30 @Input() text: string = ""; @Input() color: string = "";
@MrWowzorz
@MrWowzorz 3 жыл бұрын
Thanks, upvoted
@mackivera
@mackivera 3 жыл бұрын
Thanks a lot! this is so helpful :)
@neovim.
@neovim. 2 жыл бұрын
Was looking for this too, thanks
@daman5957
@daman5957 2 жыл бұрын
at 25:28 when Brad declares the @Input, if you get an error "Property has no initializer and is not definitely assigned in the constructor"' you can write it like @Input() text!: string; this is a temporary fix OR @Input() "text": string; is the same OR keep it the same as how Brad writes it and just assign it by writing this.text=" " in the constructor.
@lenvaz6689
@lenvaz6689 3 жыл бұрын
For minor corrections which actually mislead begginers most of the time is when you used a function call directly into the *ngIf condition for add task button. It does effect an application of this size but it does affect larger applications as a function can always have a different output.
@dddontalktopolice2754
@dddontalktopolice2754 2 жыл бұрын
4 years ago I started my career with great help from traversy media tutorials. 4 years later I’m still learning new things and traversy always seems to have a good tutorial no matter what I am learning … this channel is the best. Thanks so much for all the content .
@uncreativename454
@uncreativename454 Жыл бұрын
Can I just say I love the little notes and comparisons you sprinkle in for people who are coming from React Like saying "It's like props" or "You don't need to import this here" for example It actually really helped me better understand this, and of course this is an amazing video as usual overall! Thank you!
@marcogrillo3396
@marcogrillo3396 Жыл бұрын
I searched many other courses in yt and even though this is a crash course with older version than actual is still the best around. Keep going Brad!
@alexanderbarsukov1796
@alexanderbarsukov1796 3 жыл бұрын
I was fighting my way through Udemy course I bought for several days, and after watching 30 minutes of this crash course I already understand more Angular than ever! I am so happy this course appeared today! Thank you so much Brad! If I land a job first thing I'll do I will buy some of your courses.
@brunomiguelgroth
@brunomiguelgroth 2 жыл бұрын
Exactly my situation. "Angular Corre Deep Dive", terrible experience.
@StevenLantz
@StevenLantz Жыл бұрын
excellent! so clear and easy to follow, i am a 30 year IT professional and 18 year .NET developer and needed to look at this for new versions of my company's applications. Great first step and now that i see how the architecture is structured it is much less confusing than the first attempt made at understanding it. I am subscribed and can't wait to watch the other videos.
@mirkovolkov7636
@mirkovolkov7636 2 жыл бұрын
Since the project is fairly simple, you could embed the HTML and CSS code in the "ts" files reducing "files hopping", also you can create a minimal app with "ng new ##name## --minimal" , this way you reduce to 1 the number of files per component, furthermore you can create minimal components with the "-s -t" options at the end of the command.
@BusinessWolf1
@BusinessWolf1 Жыл бұрын
you made that comment 11 months ago, the video was posted 2 years ago.
@OlegWin355
@OlegWin355 3 жыл бұрын
Sr. Software engineer here with over 20 years of experience. Thank you for the best course online. ❤
@ebrahimsaed8810
@ebrahimsaed8810 2 жыл бұрын
Best programmer in the world, I really appreciate everything you do, truly learning a LOT from you
@OverDrive804
@OverDrive804 3 жыл бұрын
Just recently started learning Angular since the company I work for requires you to learn it and I want to teach myself Ionic at some point. I use to not like Angular, but I am starting to really enjoy it. Mainly because of how simple it is to build components and services to integrate existing third party APIs. Hope it will be here to stay for a long time🙂
@KristherLouisVidal
@KristherLouisVidal 3 жыл бұрын
Same here. I was a vue dev before and after learning angular, I’m enjoying it more
@luizcarlosdequeirozfilho2580
@luizcarlosdequeirozfilho2580 3 жыл бұрын
I was getting this error while declaring "onDelete(task)" (1:04:50): Parameter 'task' implicitly has an 'any' type.ts(7006) angular. I fixed declaring as "onDelete(task: any)". It's also possible to change "noImplicitAny": false, at "tsconfig.json" file, but I didn't tried this way.
@CabetoCifuentes
@CabetoCifuentes 2 жыл бұрын
Thanks!!!
@febobebo9634
@febobebo9634 2 жыл бұрын
Thank you very much, your comment helped me right away. I think it's better that I get used to declaring variable type, as that is a great feature of TypeScript. By the way, to be more precise set variable type to Task.
@alessiolearning8735
@alessiolearning8735 2 жыл бұрын
As @Febo Bebo said, to be precise you should declare "onDelete(task: Task)"
@umeshhbhat
@umeshhbhat 3 жыл бұрын
I used to see comments where people mention that they were thinking about a tutorial and then their KZbinr uploads the video on the same topic. The same thing happened with me finally :)
@rohitpurkait6951
@rohitpurkait6951 3 жыл бұрын
If you are using the latest version of ts then make sure to declare your variables in the constructor otherwise it will throw an error. You can also use an ! sign after the variables. For example, @Input task!: Task;
@altangerelbaatar9960
@altangerelbaatar9960 3 жыл бұрын
hairtaishu anda
@rahulxdd
@rahulxdd 3 жыл бұрын
Could you please give another example? I am new to this
@jewkeynoh
@jewkeynoh 3 жыл бұрын
" ! " for required variable and " ? " for optional. For Example: text?: string; day!: string; I'm using Angular 12 btw.
@rajatnegi3896
@rajatnegi3896 3 жыл бұрын
please give snippet of how to do it in constructor
@delta1962
@delta1962 3 жыл бұрын
@@rajatnegi3896 at 25:40 i used the following code: import { Component, OnInit , Input} from '@angular/core'; @Component({ selector: 'app-button', templateUrl: './button.component.html', styleUrls: ['./button.component.css'] }) export class ButtonComponent implements OnInit { @Input() text!: string; @Input() color!: string; constructor() { } ngOnInit(): void { } }
@hrudayd6640
@hrudayd6640 3 жыл бұрын
Because of u I was working with good product based company started from zero from your tutorials Thanks a lot
@MubinKhanLodhi
@MubinKhanLodhi 2 жыл бұрын
Brilliantly explained ... I've been doing Angular related projects for a while but mostly it was a Google search to get different things done, with your course, everything is covered so wonderfully that now I have a better hang of it. Thanks a ton ... Keep up the good work !!!
@lvm_azn
@lvm_azn 9 ай бұрын
36:21 Had issues with the *ngFor Fixed By: In your tasks.component.ts file - import CommonModule - Add CommonModule to the imports list in your Component Declaration
@benjaminluzier3734
@benjaminluzier3734 2 ай бұрын
THANK YOU SO MUCH! I was looking forever!
@xXrandomryzeXx
@xXrandomryzeXx Жыл бұрын
Although I've never been a huge Web Programming fan, after going through this tutorial, I suddenly feel the urge to create more apps using Angular. It's just so nice, fast and practical.
@freerabiul5255
@freerabiul5255 Жыл бұрын
What! Angular seems so messy! I don't know!
@Troubl3_Actual
@Troubl3_Actual 3 жыл бұрын
As an old grumpy db/backend coot spending 2 days with our company's UI Doctor trying to bash just the basics of JavaScript and Angular through my thick skull i can say i learned more in the first 30 minutes here... Thanks!
@nateF888
@nateF888 2 жыл бұрын
25:40 when I try to do @Input() text: string; I get "Property 'text' has no initializer and is not definitely assigned in the constructor." Error. does anyone know why ?
@nateF888
@nateF888 2 жыл бұрын
If anyone got the same problem, i solved it by putting "?" After "text". @Input() text?: string;
@YoYouWildinBro
@YoYouWildinBro Жыл бұрын
@@nateF888 thanks! that worked for me!
@deefadale
@deefadale 3 жыл бұрын
Tip: Most of the pain of Angular is removed when you use its Template observable binding features instead of Component binding via the 'async pipe' (eg *ngFor let task of tasks$ | async). This cuts out about 80% of code in your component.ts as the async pipe handles all the observable subscribes/unsubscribes for you. Best rule I found: manual component subscription => code smells, auto template subscription => blessed life, all remaining mandatory subscriptions abstract away into a service if possible. Great crash course for beginners though, awesome content!
@IconicProps
@IconicProps 3 жыл бұрын
I would like to say I follow, but I don't. Can you point me to some more info on this?
@muthu1046
@muthu1046 3 жыл бұрын
Finally!.. I've been waiting for Angular Crash Course for a long time👍
@DeanMcCoy
@DeanMcCoy 3 жыл бұрын
Never hurts to get a refresher on an Angular crash course. 👍
@keithprice1950
@keithprice1950 3 жыл бұрын
Spent about 6 months getting to grips with JavaScript and then a few more months with React. Got my first dev job, started today. First project - Angular. Definitely need a crash course, thank you.
@PaulSebastianM
@PaulSebastianM 3 жыл бұрын
1:07:16 Your event binding (onDeleteTask)="deleteTask(task)" is not actually taking the task from the event data. It's getting the task as part of the ngFor directive, ie. from the current component's state (tasks.component.ts). To call deleteTask() with the actual data from the onDeleteTask event, you need to call deleteTask($event) when this event fires. $event is Angular convention and is any object that you might have passed to the emit function of the EventEmitter (ie. 1:06:30 this.onDeleteTask.emit(task)). So basically $event === task here, the actual task that is correlated to the correct X icon/button that was clicked. Both version are correct functionally and do the same thing in the end, but to me, it seems more logically correct to use the actual data that comes with the event when you handle one and not handle some other data in this case.
@Robitny
@Robitny 3 жыл бұрын
I am getting an error when I use either task or $event during compiling. I am using the latest version of Angular
@The_raTex
@The_raTex 3 жыл бұрын
@@Robitny yea same, did u manage to fix it ?
@The_raTex
@The_raTex 3 жыл бұрын
I figured my error in particular: I had @Output() onAddTAsk: EventEmitter = new EventEmitter(); istead of @Output() onAddTask: EventEmitter = new EventEmitter(); in the add-task.component.ts So key sensitivity is something to look out for :)
@pashabiceps95
@pashabiceps95 3 жыл бұрын
I was looking for the people that noticed this as well
@BatkoMahnovets
@BatkoMahnovets Жыл бұрын
Hate being stuck on the minute 1:05:01. Anyone have an easy fix? Did he do changes in tsconfig.json?
@CullenKuch
@CullenKuch 8 ай бұрын
1:51:00 - For anyone who's routes are not showing up clickable, in the newer Angular 17 it seems you have to do everything at the component level. In the about.component.ts file, I imported RouterModule and then added RouterModule to the imports array in the component function below and the link now works.
@abcdabcd8605
@abcdabcd8605 6 ай бұрын
" then added RouterModule to the imports array in the component function below " Can you clearly tell where you added RouterModule in imports array?
@CullenKuch
@CullenKuch 6 ай бұрын
@@abcdabcd8605 Sure so at the top of your .ts file you will import RouterModule. Then you have to go into the @Component > imports array > and add RouterModule to that. Along with any other imports you may need to feed into the corresponding html file
@damienquamme4903
@damienquamme4903 Жыл бұрын
With Anuglar 17, when adding the button component props, I had to set the strings with empty values to get them to work. Example: @Input() text: string = "";
@manojsaibellamkonda3635
@manojsaibellamkonda3635 11 ай бұрын
Thanks
@brunomiguelgroth
@brunomiguelgroth 2 жыл бұрын
You are just amazing. I had already done your React Crash Course, and now I need to learn Angular. I was having a Udemy course and was an terrible experience. Bad tutor, he was really uncommitted with the student learning. Feels like a word generator. He didn't even explain the project content, just ordered that I clone a pre-made repository and start insanely coding from there. Really overwhelming because you don't know where you are and what you are doing. Your content is just perfect. Rethorical, logic, skills... a real Knowledge Transfer. Thanks a lot.
@webdecodedwithfahad4414
@webdecodedwithfahad4414 3 жыл бұрын
You cannot imagine how much happy I was to get notification about this course😍
@mohammadmoulakhnif7188
@mohammadmoulakhnif7188 3 жыл бұрын
me too
@eugenenovikov671
@eugenenovikov671 3 жыл бұрын
аналогично
@denist.8993
@denist.8993 3 жыл бұрын
+1 Очень вовремя)
@byronk5
@byronk5 3 жыл бұрын
You and me both!
@68dsuding
@68dsuding 3 жыл бұрын
You cannot imagine how much happy I was also.
@JasonJasonJasonJason-p4s
@JasonJasonJasonJason-p4s 3 жыл бұрын
just got hired by state farm, but the team uses Angular instead of React, your videos are definitely helpful, really appreciate it!
@bornultimat4813
@bornultimat4813 3 жыл бұрын
Probably the best Angular tutorial I've ever seen... You really helped me to understand the framework and it's function! Especially the combination of Frontend and Backend... Thank you very much!!
@cobrakilla8
@cobrakilla8 Жыл бұрын
This is possible the best Angular crash course I have ever watched. You are an amazing teacher, thanks.
@karlchiucinco3801
@karlchiucinco3801 3 жыл бұрын
Thank you so much for that crash course! I think you covered all the fundamentals in building an Angular app. No boring lectures, just straight coding which is what I need!
@anj000
@anj000 2 жыл бұрын
1:04:36 Do you really need to emit 'onDelete' and 'onToggle' events with a 'task' value? In my opinion you could leave that blank because a parent component (in that case 'task' component) already knows from which component this event is emitted. And because of that parent component is able to take this event and call it's method with a correct task object. 1:19:52 don't you think that toggling 'task.reminder = !task.reminder' should be done after put request is successfully completed? That is - inside subscribe method? 1:43:02 why do we need 'subscription` variable, if we do not use it anywhere? Also in case of strict typescript checking in the new TS version - it will force us to initialize 'showAddTask' variable. And in that case it would be good idea to initialize it with the same value everywhere.
@riyakumari8377
@riyakumari8377 2 жыл бұрын
hey my toggle for Add button didnt work is there something different u did wrt video?
@saikumark1224
@saikumark1224 3 жыл бұрын
I completed learning Spring Boot yesterday. Then, I wanted to learn a JS framework. I fixed on Angular. And Now I get this notification. Thank you Brad 👍✌️. You are life savior buddy🙏
@sachin__ak
@sachin__ak 3 жыл бұрын
Go with Vue or React, it is better than angular
@saikumark1224
@saikumark1224 3 жыл бұрын
@@sachin__ak I will learn them later.. But the Orgs in India prefer Angular mostly... That's the reason I am learning Angular
@saikumark1224
@saikumark1224 3 жыл бұрын
@@sachin__ak Are the companies hiring for React here?
@barryblack8332
@barryblack8332 3 жыл бұрын
@@sachin__ak You mean it's easier to learn.
@sachin__ak
@sachin__ak 3 жыл бұрын
@@barryblack8332 yep and developer friendly too, vue js is the most simplest to learn
@jasonrusso4156
@jasonrusso4156 3 жыл бұрын
I'm stuck at 25:45. When I put the @Input() text: string; and color annotations in button.component it gives me an error and will not transpile. Property 'text' has no initializer and is not definitely assigned in the constructor.ts(2564)
@john_michael_white
@john_michael_white 3 жыл бұрын
This is a magnificent tutorial. A month ago I watched it, having had a background which included AngularJS several years ago, and now I'm flying with the Angular 13. It's such a fun framework to develop with once you're over the learning curve, and getting over it was 100% thanks to you. Great stuff!
@andrewlawton7415
@andrewlawton7415 2 жыл бұрын
At minute 39:00 I am getting an error @Input() task: Task; Is anyone else getting an error Property 'task' has no initializer. I have had no error up until now and the webpage will not compile. I cannot move any further in the tutorial.
@andrewlawton7415
@andrewlawton7415 2 жыл бұрын
UPDATE: I had to modify my code. Replaced line. "@Input() task: Task" TO " @Input() task!: Task;". Just a Heads Up
@barteg_s
@barteg_s 2 жыл бұрын
Coming from React I'm finding this quite challenging to be honest. My brain is so used to JSX and state, that all of this seems really hard to remember. Especially rxjs. I know it will take up quite a lot of time to be comfortable, but this video is a good starting point. I landed a job which requires me to code in Angular, hopefully I will be productive with it soon. Thanks Brad!
@123userthatsme
@123userthatsme 2 жыл бұрын
Right?! He started adding to task service and I was like "why is his beginner's tutorial stateless??"
@spankyspork5808
@spankyspork5808 2 жыл бұрын
If you're having trouble wrapping your head around writing Angular tests, try the suite-slimmer-angular npm library, makes it a lot easier
@stefannikolovski3167
@stefannikolovski3167 2 жыл бұрын
@@123userthatsme Is that the reason why when deleting a task he is doing it both from the db AND filtering it out from the UI? I thought when you delete it from the db it automatically updates the UI since we have getTasks() in the onInit method
@tastes-like-straberries
@tastes-like-straberries Жыл бұрын
@@stefannikolovski3167 that's a good point. i don't know why i never thought of it
@pieflies
@pieflies Жыл бұрын
@@stefannikolovski3167 The ngOnInit() hook only gets fired when the component is created, so if you want to fetch the data again later you need to implement that some other way. Generally speaking, when you’re interacting with data via HTTP requests, you don’t want to make unnecessary requests, so you don’t want to do another HTTP GET after the HTTP DELETE if you don’t need to (in this case you don’t need to). So you just delete in the DB and if that is successful you delete in the UI.
@argentaegis
@argentaegis Жыл бұрын
The quality and robustness of your tutorial videos is always appreciated.
@b1n0ry92
@b1n0ry92 3 жыл бұрын
Brad I wish Django Course like this, hope you see this :) and all I want to say is thanks for everything you have done for the community, you are great man among us.
@TraversyMedia
@TraversyMedia 3 жыл бұрын
I have a Django crash course. It is maybe a year old, ut still relevant
@b1n0ry92
@b1n0ry92 3 жыл бұрын
@@TraversyMedia :)
@IRgEEK
@IRgEEK 3 жыл бұрын
@@b1n0ry92 and the Django course just as awesome as all Brad's content. Go get it.
@aleksandranikolov5713
@aleksandranikolov5713 3 жыл бұрын
Best explanation ever. Already payed for 3 courses on udemy looking for nice explanation and didnt understood anything. Thank you! You are the best
@tradewithtony
@tradewithtony 3 жыл бұрын
Waoooooh Greetings from Tanzania, Have been waiting for this one.
@mpembainc
@mpembainc 3 жыл бұрын
React na Angular Developer kutoka Tanzania visiwani (Zanzibar). Nimefurahi kukutana na ww hapa.
@ckentj
@ckentj 2 жыл бұрын
Thank you for your patience in teaching this course, Angular does have a steep learn curve but in my humble opinion it is worth the effort.
@AussieAmigan
@AussieAmigan 3 жыл бұрын
I think this would be a great tutorial for my team to get up to speed on Angular. It was neat what you did with the Add button at the end with it detecting the route, which is a good concept to teach. However, your Button component has just become less generic, and if you use this route detection technique specific to your page, which may be one of dozens developed by a team in an enterprise, I doubt your pull request will be passed. Just saying. We have at least a dozen such custom controls in our project, so a great concept to teach. Thank you.
@darrenjosiah9246
@darrenjosiah9246 2 жыл бұрын
If you encounter error at 25:48, the solution is: @Input() text!: string; @Input() color!: string;
@amazekhashaa7309
@amazekhashaa7309 3 жыл бұрын
Yeah i think angular is best with typescript. Angular has a structure like a building. Its on point Brad!
@kasisshrestha238
@kasisshrestha238 Жыл бұрын
Great video for getting the kick-start. I would suggest having a few pages open up like app.component.html , app.component.ts , button.component.ts and button.component.html, or write it down on a piece of paper. Then use the pen to draw the flow from one page to another, to get a clear understanding of what's happening. Once you draw it, it gives a clear idea of the road map of whole video since it's such an iterative process. :)
@ramiibrahem4386
@ramiibrahem4386 3 жыл бұрын
Angular is my favorite frontend framework 🔥 Thank you very much 💖
@jgttech
@jgttech 3 жыл бұрын
And probably the only one you know if this is your favorite.
@ramiibrahem4386
@ramiibrahem4386 3 жыл бұрын
@@jgttech Well, I dealt with other frameworks like Vue and Svelte as well as React library and in the end I found that Angular was the best choice for me but unlike you, my preference for a specific framework doesn't mean that I don't respect other frameworks.
@sharpen81
@sharpen81 3 жыл бұрын
You can really sense Brad is not a fan of Angular. :D I was working a lot with React, but in the new job I had to switch to Angular. Some stuff is much easier to do in React, for example this toggle button functionality. You only have to use useState hook with some boolean value, stick it to the component and that is that. In Angular you need to create service, subscription, pass the values from service to components, catch the value in components, use ngIf on html etc. just to make that simple task (this probably can be done in simpler way but I'm refering to this course). But since I'm working on bigger project in the new job, I really don't know how would React handle this kind of complexity. Probably thru Redux and many, many slices. As Brad acknowledges it in the end of the course, Angular is really good for bigger projects with many developers working on it since it has good structure and already incorporated functionalities. React for smaller to middle projects.
@ph3me
@ph3me 3 жыл бұрын
I've been working a lot with react. And currently in the same position. Recently applied for a Front-end postition in the hopes they might make an assessment based on React, except I've got an assessment based on Angular. How was the jump from React to Angular if you don't mind me asking?
@robertjesuraj
@robertjesuraj 3 жыл бұрын
Wanted to appreciate the effort you put to make the points clear. Great teaching skill❤️. This angular 2 hr course is enough to build great applications.👍 covers all topics. 👏
@real-webbe
@real-webbe Жыл бұрын
FYI for anybody else working through this tutorial - at about 1:15:00 into the tutorial I added (dblClick)="onToggle(task)" and did not catch the mention that dblclick needs to be all lowercase. Took me a few minutes to figure it out.
@mukta4689
@mukta4689 3 жыл бұрын
"I don't know what the hell I just did" in the deleting tasks module confirmed it for me that you're a true programmer. Loved this project btw, thanks to it I understood a lot of basics regarding angular, how I can solve problems if I get stuck and how to implement CRUD operations.
@diockman718
@diockman718 3 жыл бұрын
could you perhaps help me, I'm having an error when I pass task on onDelete function. I don't why I am having this error.
@diockman718
@diockman718 3 жыл бұрын
This it what my compiler says: Error: src/app/components/task-item/task-item.component.ts:19:12 - error TS7006: Parameter 'task' implicitly has an 'any' type.
@monikatothnepasztor5802
@monikatothnepasztor5802 3 жыл бұрын
@@diockman718 what was the solution, i have the same mistake right now, thx
@yabokutvji4717
@yabokutvji4717 7 ай бұрын
In case anybody wonders why you dont have a app.module.ts file: In the past the command ng new my-app created a module based app as default. But now since angular v17, a standalone (not module based) app is created as default. To have a module based app with the app.module.ts file like in the video, you have to use the following command instead: ng new my-app --no-standalone
@arnabpersonal6729
@arnabpersonal6729 2 жыл бұрын
Must say Brad has done a good job in teaching a hard framework and include all features that it provides.
@shivani9840
@shivani9840 2 жыл бұрын
Hey Arnab! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?
@javiersistemas
@javiersistemas 3 жыл бұрын
Who put a dislike to our buddy Brad? 🤔 ... All my success, my man ... You deserve 10k likes in every video cause you're very clear in your explanations 😀😀🚩🚩🙏🙏💪💪
@kettenbach
@kettenbach 3 жыл бұрын
Ben Awad? 🥕👨‍🌾🚜
@javiersistemas
@javiersistemas 3 жыл бұрын
@@kettenbach hahaha 😂😂😂
@hacene-zerrouk
@hacene-zerrouk 2 жыл бұрын
I love how angular works . Thanks braad 👏
@cybercharlatan9424
@cybercharlatan9424 3 жыл бұрын
This tutorial was awesome, normally I would just lurk but I felt a need to say how much I appreciate you making this video. As you led on, my background is with React so I agree Angular can be a little more tricky but I'm tempted to watch your React video as well just because I like your style so much and see if I pick up anything
@zzaichik8572
@zzaichik8572 Жыл бұрын
FYI, I believe if you highlight the word (double click) with VS Code and hit the quotes key, it won't delete the word and will add both opening and closing quotes.
@arvilynrogel8781
@arvilynrogel8781 3 жыл бұрын
Hello, thank you so much for this 2 hour tutorial. It's a great help for me who's currently on bootcamp as a full stack developer.
@BusinessWolf1
@BusinessWolf1 Жыл бұрын
You are one of the best explainers I've had the privilege of listening to.
@hipstersantosh9101
@hipstersantosh9101 3 жыл бұрын
can you tell me whhat is the theme ? it looks sooo goood!!!?!?
@Gogito-xw2qd
@Gogito-xw2qd 3 жыл бұрын
Github theme.
@jmarcetaa
@jmarcetaa 2 жыл бұрын
If you got an error on 25:40 minute, add ! after value like this: @Input() text!: string;
@SSeeiicckk
@SSeeiicckk 3 жыл бұрын
Thank you for your tutorials. I've been able to get a job! Full stack and in a great degree thanks to your videos and tutorials. You're the best!
@hamedsaeednia5507
@hamedsaeednia5507 3 жыл бұрын
Every notification about brad i open youtube.
@tiagovieira2375
@tiagovieira2375 3 жыл бұрын
Anyone else having problems with ? Throwing exception and I have the same imports...
@tiagovieira2375
@tiagovieira2375 3 жыл бұрын
Nvm guys, for those who are having this issue, just restart angular server... if the error persist, restart vscode aswell
@basileuskoi
@basileuskoi 3 жыл бұрын
Thank you!
@dadadodo123
@dadadodo123 3 жыл бұрын
@@tiagovieira2375 thank you so much!
@ch4dix
@ch4dix 3 жыл бұрын
I'm not sure how common this issue is but if you experience the error that fa-icon element is unrecognized you may need to restart (disable/enable) the Angular Language Service in VS Code.
@DergoldeneNarr
@DergoldeneNarr 3 жыл бұрын
Thanks for the comment I was totally confused why my code didn't work. You helped me out a lot by pointing that out!
@patrickneggie599
@patrickneggie599 3 жыл бұрын
What theme are you using for VS Code? The text looks really clean in these colors. Great video by the way!
@Xenon77x
@Xenon77x 3 жыл бұрын
github dark
@anshumanSrivastavaHere_I_COME
@anshumanSrivastavaHere_I_COME 2 жыл бұрын
I'm starting a new full stack developer position, and i haven't done agnular in a while. I think this is PERFECT for those who need to just dip their toes into this. I knew what was going on due to some prior experience in angular a few years ago. However it's definitely not my strong point as i'm more of a backend developer. THanks again for this. I think the auto generate stuff is quite neat. I remember having to go update the files manually and wondering why my stuff doesn't show up
@vladimirjecic3871
@vladimirjecic3871 2 жыл бұрын
I followed this entire course and made my first project in angular, thank you! Your presentation was really good,and easy to follow through. One suggestion I only have is to name variables differently across components for example at 37:57, too many things had name 'task. It all works well like that, but as a beginner who seeks to understand how parameters are passed and how angular works in general, it would make more sense to me if I was able to discern exactly which property is referenced and where.
@Salma.Louhichi
@Salma.Louhichi Жыл бұрын
Did you use Angular 15 ? or which version exactly ?
@vladimirjecic3871
@vladimirjecic3871 Жыл бұрын
@@Salma.Louhichi Hi! I used the latest version at that time which was 15.0.1
@me_gaurav_rana
@me_gaurav_rana 10 ай бұрын
Thanks Traversy i had my interview today they had thing like knowledge of angular will be plus point i learned from you video and little bit of self study just landed me the job
@nieev15july
@nieev15july 3 жыл бұрын
In case you getting this compilation error- Property '…' has no initializer and is not definitely assigned in the constructor, add this in tsconfig.json - "strictPropertyInitialization": false
@ninarocket3149
@ninarocket3149 3 жыл бұрын
THANK YOU!!!
@TheRonron1994
@TheRonron1994 3 жыл бұрын
@@reyalvarez1617 Put it inside the angularCompilerOptions object.
@TheRonron1994
@TheRonron1994 3 жыл бұрын
This is what I hate w/ Angular. Every time I try to follow a tutorial, I'll randomly encounter this kind of hiccups.
@techieT
@techieT 3 жыл бұрын
Thank you sooo much Rajeev.I've been looking for a solution everywhere... thanks a lot
@mobileeats-q2i
@mobileeats-q2i 3 жыл бұрын
This fix worked. Thanks so much!
@dawoodahmad8243
@dawoodahmad8243 3 жыл бұрын
Hi, is anyone helps me out, please, Actually, I got an error after writing this in task-item.component.ts file => @Input() task: Task; Video time 39:08 Here is an error: Property 'task' has no initializer and is not definitely assigned in the constructor. Please help me out with this.
@gleisonsubzeroKZ
@gleisonsubzeroKZ 3 жыл бұрын
This is happening because you've started your project using the strict mode, to get rid of this error you should update your ts.config compiler options and set strictPropertyInitialization to false.
@dawoodahmad8243
@dawoodahmad8243 3 жыл бұрын
@@gleisonsubzeroKZ thanks bro
@gradientO
@gradientO 3 жыл бұрын
Angular is good actually. It doesn't deserve the hate it gets. It's sad. I thought of finally deep diving into angular after some years, and you release this video exactly after that. Thanks
@darkman8939
@darkman8939 3 жыл бұрын
@@chitrangsharma bro even updates are not crucial in angular if you learned angular since v2 it still the same until now it gets update on the performance and internal stuff not the syntax or features, and it does not follow MVC Angular follows a component-oriented architecture, mvc can only be on the backend
@DEVDerr
@DEVDerr 3 жыл бұрын
It's hated because: - it's named poorly - it shouldn't be named Angular anymore, because still people think about Angular 1 after hearing "Angular" to this day (which is ridiculous for me but it is what it is unfortunetly. Blame people) - it's not as minimalistic as React or Vue - but people don't know that it's good (really good), because only Angular gives you 100% compatible features like SSR, PWA etc. right away and it well suits corporate apps with it's strict way of doing things which reduces amount of bad code and architecture by a lot Maybe some day this weird JS community will finally see how many problems Angular solves in this ecosystem
@barryblack8332
@barryblack8332 3 жыл бұрын
@@DEVDerr You would be surprised how difficult it is to give a good name to your stuff. But then I think they can do better, these guys went from renderer to renderer2(like HOW). There's a componentFactoryResolver and resolveComponentFactory. There's more of these.
@funkymunky8787
@funkymunky8787 3 жыл бұрын
This is not a deep dive into angular by any means
@punsmith
@punsmith 3 жыл бұрын
Much agreed. Angular allows me to do almost everything I want without downloading any additional dependencies and have a robust and performant web app. But for some reason people were tricked that "Classes" are a bad thing, that JSX somehow is super amazing and Angular directives are not "pure" html and SUPER confusing. Also, only React developers have become NOTORIOUSLY worried about immutability and components knowing their own state, eventually spawning some of the weirdest concepts (like creating a component for a component that holds its state...). Angular and Vue all the way. Maybe now Svelte too... but I'll wait for what Sapper will be replaced by.
@VilerVicious
@VilerVicious 3 жыл бұрын
at 25:48, when declaring those two "@input", I get errors: 'Property 'text' has no initializer and is not definitely assigned in the constructor.ts(2564) (property) ButtonComponent.text: string' & 'Property 'color' has no initializer and is not definitely assigned in the constructor.ts(2564) (property) ButtonComponent.color: string'. This won't allow to compile
@ajaysharan8130
@ajaysharan8130 3 жыл бұрын
Bro i also getting this same error. did you find out how to fix this?
@VilerVicious
@VilerVicious 3 жыл бұрын
@@ajaysharan8130 i changed tutorial 😅
@carlosvaldivia2661
@carlosvaldivia2661 3 жыл бұрын
go to tsconfig.json and change "strict": false to
@ellsonmendesYT
@ellsonmendesYT 3 жыл бұрын
For anyone who is receiving Errors at 26:09 in below declarations @Input() text:string; @Input() color:string; Place an "!" after the name of the variable like this @Input() text!:string; @Input() color!:string; or place this option on tsconfig.json "strictPropertyInitialization": false Are you following up Lerão?!
@arpitjain6336
@arpitjain6336 3 жыл бұрын
I just switched my job role into UI Development and I am glad I found this video.
@MrSudatt
@MrSudatt 2 жыл бұрын
Sir, I am following your courses from a long time (I am a slow learner ), you are really a good teacher I have finished HTML, CSS, javaScript ( your course on udemy ) . It's a request to you that would you Please make a detailed crash course on Angular( just like your javaScript course on udemy). It would be a great help to the freshers like me to get entry in a IT company (to start a career as a developer) .
@jannickbreunis
@jannickbreunis 2 жыл бұрын
FreeCodeCamp has an Angular for beginners course which is 17 hours long.
@MrSudatt
@MrSudatt 2 жыл бұрын
@@jannickbreunis thank you very much ...I feel very happy that someOne reply to help...Thanks
@andrewshorts1198
@andrewshorts1198 Жыл бұрын
@@jannickbreunis That guy doesn't go through the nuances of Angular. He may speak for about 10 secs about providers and move on.
@Salma.Louhichi
@Salma.Louhichi Жыл бұрын
I've only installed Free Solid Icons when asked : Choose Font Awesome icon packages you would like to use. What should I do ?
@joew426
@joew426 2 жыл бұрын
For the second time in as many years, one of your tutorials has helped me to fake it 'til I make it!
@moefarid1953
@moefarid1953 3 жыл бұрын
Brad, we love your work and amazing tutorials. Big fan!!
@kelbinlin287
@kelbinlin287 2 жыл бұрын
Best Free Tutorial for angular that i found, good job!!
@derickmoncado
@derickmoncado 3 жыл бұрын
FINALLY. Been waiting for this one 🙏
@RR-jq1bi
@RR-jq1bi 3 жыл бұрын
yes, it took a long time
@davidwang5445
@davidwang5445 2 жыл бұрын
This is a great Angular crash course. It is very practical, simulating to the real world. The teaching is very clear, well organized and presented. Strongly recommended!
@lakshyarajdash
@lakshyarajdash 2 жыл бұрын
This was a really awesome course that I had ever followed. The tutorials I used to watch used the localstorage to store the data. But you took us on a full journey of angular. Thanks Brad!
@wildcoder5698
@wildcoder5698 2 жыл бұрын
kzbin.info/www/bejne/p52aaHuhZreHfaM
@RodrigoNishino
@RodrigoNishino 3 жыл бұрын
Long time ago I remember giving up on Angular, but with this video I kinda get it. Good teacher
3 жыл бұрын
I recommend Brad's Angular course on udemy. It's just too good.
@maximumcockage6503
@maximumcockage6503 3 жыл бұрын
@ I suggest both. I learned from both of them.
@vjzb3
@vjzb3 3 жыл бұрын
You are so clutch with the timing of this video. Thank you, Brad!
@colephares4973
@colephares4973 3 жыл бұрын
for Angular 12, I had to add ! after the variable names at 25:48 for it to compile, otherwise I got the "Property 'color' has no initializer and is not definitely assigned in the constructor." error message on them both.
@narharos4974
@narharos4974 3 жыл бұрын
Thanks! We can also add "strictPropertyInitialization": false in tsconfig.json
Node.js Crash Course
2:06:35
Traversy Media
Рет қаралды 257 М.
Angular Crash Course | Learn modern Angular in 90 minutes
1:29:09
Code with Ahsan
Рет қаралды 44 М.
The evil clown plays a prank on the angel
00:39
超人夫妇
Рет қаралды 53 МЛН
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
Vue JS Crash Course
1:50:52
Traversy Media
Рет қаралды 1,3 МЛН
TypeScript Crash Course
52:27
Traversy Media
Рет қаралды 620 М.
5 Signs of an Inexperienced Self-Taught Developer (and how to fix)
8:40
The Modern Angular Crash Course - 2022
2:04:15
Laith Academy
Рет қаралды 115 М.
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 862 М.
Angular Tutorial for Beginners: Learn Angular & TypeScript
2:02:42
Programming with Mosh
Рет қаралды 4,5 МЛН
React JS Crash Course
1:48:48
Traversy Media
Рет қаралды 3,4 МЛН
I Took a Basic Todo App and Made It Cost $2000/Month
10:55
Coding with Lewis
Рет қаралды 73 М.
Learn Angular A-Z: Complete Tutorial for Beginners
4:21:33
Envato Tuts+
Рет қаралды 199 М.