Angular Crash Course

Sdílet
Vložit
  • čas přidán 2. 06. 2024
  • Learn the fundamentals of Angular in this project-based crash course
    Video Sponsor:
    www.hostinger.com/traversymedia
    - Use the code TRAVERSYMEDIA for 10% off!
    Code:
    github.com/bradtraversy/angul...
    Latest Udemy Courses:
    traversymedia.com​
    💖 Support The Channel!
    / traversymedia
    Timestamps:
    0:00 - Hostinger Sponsor
    0:35 - Intro & Slides
    7:41 - Angular CLI & Setup
    10:39 - Files & Folders
    14:49 - Component structure
    16:42 - Properties & Interpolation
    18:40 - Global Styles
    19:20 - Header Component
    23:15 - Button Component
    24:36 - Component Input Data
    22:19 - Creating an event & event emitter output
    30:51 - Mock Tasks & Task Interface
    34:10 - Tasks Component
    36:03 - Looping with ngFor
    37:16 - Task Item Component
    40:13 - Angular Font Awesome Setup
    44:39 - Create a Task Service
    49:06 - Creating and Subscribe to Observable
    50:04 - JSON-Server Setup
    57:29 - Angular HTTP Client
    59:48 - Fetching Tasks
    1:02:59 - Deleting Tasks
    1:12:54 - Toggle Reminder
    1:20:29 - Add Task Component
    1:26:26 - Forms Module & ngModel
    1:29:00 - Submit & Create Task
    1:37:02 - Toggle Button & UI Service
    1:51:38 - Angular Router
    1:57:34 - Limit Component to Route
  • Věda a technologie

Komentáře • 1,4K

  • @UsmanTheDev
    @UsmanTheDev Před 3 lety +1573

    Today i got my first job due to your courses. Love and respect for you from pakistan

  • @damienquamme4903
    @damienquamme4903 Před 6 měsíci +35

    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 Před 6 měsíci +3

      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 Před 2 měsíci +1

      Thank you!!!

    • @HafsahJilanee
      @HafsahJilanee Před 2 měsíci +1

      thank youuu

    • @JuanManuelLinaresBloggerDeNiro
      @JuanManuelLinaresBloggerDeNiro Před měsícem +2

      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 Před měsícem

      Ils in .ts ont .html but thank you

  • @muthu1046
    @muthu1046 Před 3 lety +73

    Finally!.. I've been waiting for Angular Crash Course for a long time👍

  • @kevyyar
    @kevyyar Před 2 lety +72

    We need a full course Brad! You explain so much better than all those other instructors!

    • @BusinessWolf1
      @BusinessWolf1 Před rokem +9

      he kinda did. you can learn everything else on your own bit by bit, as you should

  • @john_michael_white
    @john_michael_white Před 2 lety +21

    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!

  • @karlchiucinco3801
    @karlchiucinco3801 Před 2 lety +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!

  • @MubinKhanLodhi
    @MubinKhanLodhi Před rokem +3

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

  • @bornultimat4813
    @bornultimat4813 Před 2 lety +5

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

  • @3pleFly
    @3pleFly Před rokem +185

    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 Před rokem +7

      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 Před rokem +6

      You saved me bro, thank you

    • @ericlaravega6438
      @ericlaravega6438 Před rokem +5

      Thanks a lot, I couldn't find the way to make it work

    • @juandelahoz4577
      @juandelahoz4577 Před rokem +3

      ty man! that was very helpful

    • @johnchisowa8867
      @johnchisowa8867 Před rokem +2

      Thanks. Spent the whole day trying to resolve this..

  • @lenvaz6689
    @lenvaz6689 Před 3 lety +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.

  • @marcogrillo3396
    @marcogrillo3396 Před 11 měsíci +1

    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!

  • @jinge8943
    @jinge8943 Před rokem +4

    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!

  • @studentemail8067
    @studentemail8067 Před 3 lety +22

    I was waiting for this course. And hope you do more Angular projects.
    Thank you Brad.

    • @mainiyale1773
      @mainiyale1773 Před 3 lety +1

      Simplilearn is offering 🔥Free Angular Course: www.simplilearn.com/learn-angular-basics-free-course-skillup?SLP02675&

  • @robertrey7002
    @robertrey7002 Před 3 lety +24

    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

  • @dddontalktopolice2754
    @dddontalktopolice2754 Před 2 lety

    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 .

  • @rohitpurkait6951
    @rohitpurkait6951 Před 2 lety +523

    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 Před 2 lety

      hairtaishu anda

    • @rahulxdd
      @rahulxdd Před 2 lety

      Could you please give another example? I am new to this

    • @jewkeynoh
      @jewkeynoh Před 2 lety +29

      " ! " for required variable and " ? " for optional.
      For Example:
      text?: string;
      day!: string;
      I'm using Angular 12 btw.

    • @rajatnegi3896
      @rajatnegi3896 Před 2 lety +1

      please give snippet of how to do it in constructor

    • @delta1962
      @delta1962 Před 2 lety +60

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

  • @robertjesuraj
    @robertjesuraj Před 3 lety +5

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

  • @hashanhemachandra4071
    @hashanhemachandra4071 Před rokem +21

    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 ❤️

  • @webdecodedwithfahad4414
    @webdecodedwithfahad4414 Před 3 lety +185

    You cannot imagine how much happy I was to get notification about this course😍

  • @Dev_Everything
    @Dev_Everything Před 2 lety +25

    25:30 @Input() text: string = "";
    @Input() color: string = "";

  • @uncreativename454
    @uncreativename454 Před rokem +8

    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!

  • @moefarid1953
    @moefarid1953 Před 3 lety +7

    Brad, we love your work and amazing tutorials. Big fan!!

  • @kshitijrangari7014
    @kshitijrangari7014 Před 2 lety

    Hi Brad, I have been following your courses since past 5 years.
    Amazing work here, really helped me brush all the key angular concepts.
    Would love to see a short video on ngrx with angular.

  • @arvilynrogel8781
    @arvilynrogel8781 Před 2 lety +4

    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.

  • @alexanderbarsukov1796
    @alexanderbarsukov1796 Před 3 lety +101

    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 Před rokem

      Exactly my situation. "Angular Corre Deep Dive", terrible experience.

  • @cybercharlatan9424
    @cybercharlatan9424 Před 2 lety +5

    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

  • @bittujacob8776
    @bittujacob8776 Před 3 lety +1

    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.

  • @davidwang5445
    @davidwang5445 Před 2 lety +1

    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!

  • @SSeeiicckk
    @SSeeiicckk Před 2 lety +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!

  • @ebrahimsaed8810
    @ebrahimsaed8810 Před rokem +3

    Best programmer in the world, I really appreciate everything you do, truly learning a LOT from you

  • @StevenLantz
    @StevenLantz Před 8 měsíci +1

    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.

  • @shrutigoyal8323
    @shrutigoyal8323 Před rokem

    I am new to Angular and was looking for some good resources. This is absolutely awesome! It includes step by step explanation along with some of the best practices

  • @vjzb3
    @vjzb3 Před 3 lety +8

    You are so clutch with the timing of this video. Thank you, Brad!

  • @DeanMcCoy
    @DeanMcCoy Před 3 lety +7

    Never hurts to get a refresher on an Angular crash course. 👍

  • @florianwicher
    @florianwicher Před rokem

    I love this tutorial because it is swift but still clear. Exactly what I'm looking for as a backend developer that doesn't need much background on the underlying concepts.

  • @user-fi2ty4bm2n
    @user-fi2ty4bm2n Před 2 lety +16

    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 Před 2 lety +8

      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!

    • @user-fi2ty4bm2n
      @user-fi2ty4bm2n Před 2 lety +1

      Thank you!

    • @fatihersoy7559
      @fatihersoy7559 Před 2 lety +5

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

  • @luizcarlosdequeirozfilho2580

    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 Před 2 lety +1

      Thanks!!!

    • @febobebo9634
      @febobebo9634 Před 2 lety +4

      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 Před 2 lety +1

      As @Febo Bebo said, to be precise you should declare "onDelete(task: Task)"

  • @Liproqq
    @Liproqq Před 2 lety

    really good stuff. I haven't worked with angular in two years and this is perfect for refreshing

  • @CarltonStith
    @CarltonStith Před 3 lety

    Thanks Brad! I’ve been waiting on this course from you.

  • @reezuanrahim6646
    @reezuanrahim6646 Před 3 lety +57

    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 Před rokem +3

      Unfortunately some of us are total beginner

    • @pieflies
      @pieflies Před rokem +2

      @@dantshisungu395 for total beginners, I would recommend doing a lot of JavaScript learning (and also HTML and CSS) before learning Angular.

  • @amazekhashaa7309
    @amazekhashaa7309 Před 3 lety +38

    Yeah i think angular is best with typescript. Angular has a structure like a building. Its on point Brad!

  • @BarakAlmog
    @BarakAlmog Před 2 lety +1

    Magnificent, love it so much! Exactly what I was looking for. You're awesome!

  • @Cpt_Chirp
    @Cpt_Chirp Před rokem

    Thanks. I always find myself back on your channel anytime I need to learn / refresh my memory on a framework. Great videos.

  • @PaulSebastianM
    @PaulSebastianM Před 3 lety +5

    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 Před rokem +2

      By pressing CTRL+D you can also select further elements and then type " to replace all at once.

  • @OverDrive804
    @OverDrive804 Před 3 lety +15

    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 Před 3 lety

      Same here. I was a vue dev before and after learning angular, I’m enjoying it more

  • @cobrakilla8
    @cobrakilla8 Před 5 měsíci

    This is possible the best Angular crash course I have ever watched. You are an amazing teacher, thanks.

  • @SPiiiKTV
    @SPiiiKTV Před 3 lety

    I remember buying his angular course 3 years ago on udemy. Very helpful.

  • @mirkovolkov7636
    @mirkovolkov7636 Před rokem +13

    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 Před rokem +1

      you made that comment 11 months ago, the video was posted 2 years ago.

  • @AussieAmigan
    @AussieAmigan Před 2 lety +5

    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.

  • @argentaegis
    @argentaegis Před 8 měsíci

    The quality and robustness of your tutorial videos is always appreciated.

  • @rahimrad
    @rahimrad Před rokem

    Brad your work is really amazing. You explain and teach things I really want to learn. When it comes to selecting a JS framework, I found that Angular is the option to go with but I didn't go for it because I thought it's based on Typescript; but now at the Intro of this course you stated that using Typescript is optional. It made me feel good, get up and invest my time in working with Angular.

  • @derickmoncado
    @derickmoncado Před 3 lety +3

    FINALLY. Been waiting for this one 🙏

    • @RR-jq1bi
      @RR-jq1bi Před 3 lety

      yes, it took a long time

  • @lvm_azn
    @lvm_azn Před 2 měsíci +3

    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.

  • @FlyFreeOnline
    @FlyFreeOnline Před 3 lety

    i was just watching Angular 2019 from traversy, just got the updated one . Thank you so much

  • @mnauet
    @mnauet Před 3 lety

    None of the Angular courses around can deliver so much value in so short tutorial. Thanks for continuous sharing valuable content. any thing i need, this channel is my first choice to start looking,.

  • @antio1753
    @antio1753 Před 3 lety +3

    FINALLLYYYYYYYYYYY SOME FRESH ANGULAR IN CZcams !!!!!

  • @tradewithtony
    @tradewithtony Před 3 lety +10

    Waoooooh Greetings from Tanzania, Have been waiting for this one.

    • @mpembainc
      @mpembainc Před 3 lety

      React na Angular Developer kutoka Tanzania visiwani (Zanzibar). Nimefurahi kukutana na ww hapa.

  • @MommaRoo36
    @MommaRoo36 Před rokem +1

    Thank you for this wonderful tutorial! You explain things for WHY you are doing them. Things really started to click after your tutorial. Thank you!!!

  • @benji-L
    @benji-L Před 2 lety

    Really excellent tutorial. I learned so much from completing it! Can't wait to start the next one.

  • @b1n0ry92
    @b1n0ry92 Před 3 lety +32

    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  Před 3 lety +8

      I have a Django crash course. It is maybe a year old, ut still relevant

    • @b1n0ry92
      @b1n0ry92 Před 3 lety

      @@TraversyMedia :)

    • @IRgEEK
      @IRgEEK Před 3 lety +1

      @@b1n0ry92 and the Django course just as awesome as all Brad's content. Go get it.

  • @ramiibrahem4386
    @ramiibrahem4386 Před 3 lety +8

    Angular is my favorite frontend framework 🔥
    Thank you very much 💖

    • @jgttech
      @jgttech Před 2 lety

      And probably the only one you know if this is your favorite.

    • @ramiibrahem4386
      @ramiibrahem4386 Před 2 lety +1

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

  • @anshumanSrivastavaHere_I_COME

    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

  • @regendaas
    @regendaas Před 2 lety +1

    Excellent introduction to Angular; very helpful; concise but still complete. Thanks a million.

  • @aissa.bouguern
    @aissa.bouguern Před 3 lety +3

    Very good and well made course! I liked the Subject/Subscription section.
    I worked with React and Vue in many projects, but I think Angular, as a framework, is more elegant and well designed.
    Thank you very much for this video.

    • @asakurayoh3909
      @asakurayoh3909 Před 3 lety

      I have been using Angular for few years now. It’s pretty easy and powerful framework. Also, it’s good for big, complex projects.

  • @user-py1jw3kp4p
    @user-py1jw3kp4p Před 3 lety +1

    just got hired by state farm, but the team uses Angular instead of React, your videos are definitely helpful, really appreciate it!

  • @ckentj
    @ckentj Před rokem

    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.

  • @lakshyarajdash
    @lakshyarajdash Před rokem +4

    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!

  • @kettenbach
    @kettenbach Před 3 lety +3

    Outstanding 🙏❤️😍 I still got so much love for the Big Red A. People shit on because it's a little more challenging. They can't handle the heat of rxjs. Love you bro. 🙏

  • @aleksandranikolov5713
    @aleksandranikolov5713 Před 2 lety

    Best explanation ever. Already payed for 3 courses on udemy looking for nice explanation and didnt understood anything. Thank you! You are the best

  • @romanroman9638
    @romanroman9638 Před 3 lety

    Brad, you are always on time! That's exactly what I was looking for

  • @sameerkale8307
    @sameerkale8307 Před rokem +3

    Great Learning, THANK YOU.

  • @saikumark1224
    @saikumark1224 Před 3 lety +11

    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 Před 3 lety +1

      Go with Vue or React, it is better than angular

    • @saikumark1224
      @saikumark1224 Před 3 lety +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 Před 3 lety

      @@sachin__ak Are the companies hiring for React here?

    • @barryblack8332
      @barryblack8332 Před 3 lety

      @@sachin__ak You mean it's easier to learn.

    • @sachin__ak
      @sachin__ak Před 3 lety

      @@barryblack8332 yep and developer friendly too, vue js is the most simplest to learn

  • @alitswq
    @alitswq Před 2 lety +1

    It helped me a lot because I was familiar with AngularJS. Amazing, on-point tutorial.

  • @KnownTechnical
    @KnownTechnical Před 2 lety +1

    Ultimate this 2 hours of practice gets me the solution of my multiple questions. Super Bro. God Bless You

  • @deefadale
    @deefadale Před 3 lety +11

    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 Před 2 lety +1

      I would like to say I follow, but I don't. Can you point me to some more info on this?

  • @javiersistemas
    @javiersistemas Před 3 lety +6

    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 😀😀🚩🚩🙏🙏💪💪

  • @mohamedchibani9823
    @mohamedchibani9823 Před rokem

    you explain so much better Brad, we need a full course and more projects

  • @P3truts
    @P3truts Před 11 měsíci +1

    Really cool course! Captures everything and in a short time. Definition of crash course!

  • @hemanthkotagiri8865
    @hemanthkotagiri8865 Před 3 lety +3

    Thank you so much for this video! I really appreciate your efforts in educating us!

  • @damienquamme4903
    @damienquamme4903 Před 6 měsíci +5

    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 = "";

  • @codefinity
    @codefinity Před 2 lety +1

    The tip about just throwing the `components` into `ng generate` - Brilliant! 🧠 I tried to move spit around after the fact and set up absolute imports, etc. This way, we get the directory structure we want (a la closer to React) and Angular/VS Code does all of the `import`s with TS. 👏🏾 🤓

  • @georgesngandeu9115
    @georgesngandeu9115 Před 2 lety

    You are a blessing to me, Awesome stuff. I am now up and running with angular

  • @dayernGomez
    @dayernGomez Před 3 lety +3

    love it, i was wating for new angular course of you, keep going excelent course, btw what theme are you using? XD

  • @vladimirjecic3871
    @vladimirjecic3871 Před rokem +7

    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.

    • @aishaghalia1259
      @aishaghalia1259 Před rokem

      Did you use Angular 15 ? or which version exactly ?

    • @vladimirjecic3871
      @vladimirjecic3871 Před rokem

      @@aishaghalia1259 Hi! I used the latest version at that time which was 15.0.1

  • @imxd9698
    @imxd9698 Před 2 lety

    This is pretty much exactly what I was looking for as a professional web engineer. Basic overview of modern ng. Surprisingly easy coming from React.

  • @thebandwagoneffect
    @thebandwagoneffect Před 2 lety

    I like following along with the exact version when I watch tutorials. This reducing the unrecognized errors you encounter from newer version. If you want to do the same Traversy is using angular 11.2.12 with Typescript 4.1.15. I used NVM to change my version of node to 10.13.0 (and then "nvm install-latest-npm" to get to a usable npm version)

  • @bartomiejsadecki8309
    @bartomiejsadecki8309 Před rokem +32

    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 Před rokem +3

      Right?! He started adding to task service and I was like "why is his beginner's tutorial stateless??"

    • @spankyspork5808
      @spankyspork5808 Před rokem

      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 Před rokem +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 Před rokem

      @@stefannikolovski3167 that's a good point. i don't know why i never thought of it

    • @pieflies
      @pieflies Před rokem +2

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

  • @gradientO
    @gradientO Před 3 lety +17

    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 Před 3 lety

      @@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 Před 3 lety +6

      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 Před 3 lety +1

      @@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 Před 3 lety

      This is not a deep dive into angular by any means

    • @punsmith
      @punsmith Před 3 lety +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.

  • @GirishBalanagu
    @GirishBalanagu Před 9 měsíci

    Thanks for amazing crash course video. I kind of revisit when ever I do have doubt on your videos to get some idea how it needs to implement. Kind of rewind concepts when it is urgent. Thank you so much Brad for amazing content ❤

  • @me_gaurav_rana
    @me_gaurav_rana Před 3 měsíci

    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

  • @patrickneggie599
    @patrickneggie599 Před 3 lety +6

    What theme are you using for VS Code? The text looks really clean in these colors. Great video by the way!

  • @PaulSebastianM
    @PaulSebastianM Před 3 lety +14

    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.

    • @Blindbuymovieguy
      @Blindbuymovieguy Před 2 lety

      I am getting an error when I use either task or $event during compiling. I am using the latest version of Angular

    • @raTex199994
      @raTex199994 Před 2 lety

      @@Blindbuymovieguy yea same, did u manage to fix it ?

    • @raTex199994
      @raTex199994 Před 2 lety

      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 Před 2 lety

      I was looking for the people that noticed this as well

    • @BatkoMahnovets
      @BatkoMahnovets Před rokem

      Hate being stuck on the minute 1:05:01. Anyone have an easy fix? Did he do changes in tsconfig.json?

  • @raghibhussain1375
    @raghibhussain1375 Před 2 lety +1

    this was amazing, i was waiting for this since a long time, thanks

  • @emanuelecalabrese6790
    @emanuelecalabrese6790 Před 10 měsíci

    Hello Brad! Love your channel, it helped me with finding my current job. I'd like to see more Angular project, you explain so well and I know that with you I can improve myself more and more. Keep it up ;)

  • @zeinabmoghbel1507
    @zeinabmoghbel1507 Před 3 lety +8

    This course is great, this is the best thing that I can imagine, thank you very much and thank GOD.

  • @MrSudatt
    @MrSudatt Před rokem +11

    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 Před rokem

      FreeCodeCamp has an Angular for beginners course which is 17 hours long.

    • @MrSudatt
      @MrSudatt Před rokem

      @@jannickbreunis thank you very much ...I feel very happy that someOne reply to help...Thanks

    • @andrewshorts1198
      @andrewshorts1198 Před rokem

      @@jannickbreunis That guy doesn't go through the nuances of Angular. He may speak for about 10 secs about providers and move on.

    • @aishaghalia1259
      @aishaghalia1259 Před rokem

      I've only installed Free Solid Icons when asked : Choose Font Awesome icon packages you would like to use. What should I do ?

  • @keithprice1950
    @keithprice1950 Před 2 lety

    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.

  • @nataliavrs
    @nataliavrs Před 3 lety

    Was waiting for this video for so long, thanks!

  • @hipstersantosh9101
    @hipstersantosh9101 Před 3 lety +3

    can you tell me whhat is the theme ? it looks sooo goood!!!?!?

  • @escanorgod
    @escanorgod Před 2 lety +7

    So if you are having trouble with the input fields, try to initialize them like this @Input() text : string | undefined