Angular Components Beginner's Guide

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024

ความคิดเห็น • 126

  • @Fireship
    @Fireship  6 ปีที่แล้ว +74

    Angular components take a long time to master, but hopefully this video helps speed up the process. Let me know if you have questions in the comments.

    • @shahzaibchoudary5493
      @shahzaibchoudary5493 6 ปีที่แล้ว

      Angular Firebase which text editor is this

    • @NehaSingh-il3uq
      @NehaSingh-il3uq 4 ปีที่แล้ว

      can you make one on smart and dumb components

    • @number1neek
      @number1neek 4 ปีที่แล้ว +1

      I know this video is 2 years old but Wanted to let you know that this is an excellent format. Exactly what I was looking for. Thanks!

    • @halivudestevez2
      @halivudestevez2 3 ปีที่แล้ว

      @@shahzaibchoudary5493 VSCode

    • @saroj_kumar
      @saroj_kumar 3 ปีที่แล้ว +4

      I don't think this was beginners guide 😂😂

  • @glzr_io
    @glzr_io 5 ปีที่แล้ว +215

    It feels like you're making videos for people who have an exam on the topic in the next 2 hours

    • @danaililiev1404
      @danaililiev1404 5 ปีที่แล้ว +1

      Are you complaining tho ?

    • @glzr_io
      @glzr_io 5 ปีที่แล้ว +5

      @@danaililiev1404 Nah I love it

    • @khpeiris
      @khpeiris 4 ปีที่แล้ว +5

      Exactly, I have an exam tomorrow 😂

    • @faridul.hassan
      @faridul.hassan 4 ปีที่แล้ว +2

      Yes, I have also an exam tomorrow :)

    • @WhyThatGame
      @WhyThatGame 3 ปีที่แล้ว +6

      It has been some time I don't code and I have an interview for an Angular position tomorrow 😅

  • @limitlesskode
    @limitlesskode ปีที่แล้ว +16

    I think Jeff is using some sort of magic to enforce the understanding of complex topics in easy steps. I mean this could be a straight 6 hour tutorial for some other TH-camr and you might not even get everything. Thanks Jeff ❤

  • @espertistamileitista655
    @espertistamileitista655 4 ปีที่แล้ว +15

    Nice video. I'm a backend developer and I wanted to start learning Angular. I was expecting to only understand what a component is and I ended up by knowing the existance of directives and very interesting stuff that I didn't have idea about. All in less than 15 minutes! Thank you :)

  • @halivudestevez2
    @halivudestevez2 3 ปีที่แล้ว +26

    Much better than 1-2 hours suffering "quick start" tutorials. Thank you for making it!

    • @reidysmeidy5772
      @reidysmeidy5772 2 ปีที่แล้ว +3

      Lol 2 hour tutorials turn into 8 hour tutorials for me.

  • @TheAkiller101
    @TheAkiller101 4 ปีที่แล้ว +253

    This is how you learn angular when you have a 2 day deadline

    • @brentonungerii6896
      @brentonungerii6896 3 ปีที่แล้ว +11

      Funny enough, I have a 2 day deadline!

    • @podemosllegara790anti-tikt4
      @podemosllegara790anti-tikt4 3 ปีที่แล้ว +1

      @@brentonungerii6896 unbelievable

    • @_guru
      @_guru 3 ปีที่แล้ว +8

      I have 2 hours not Kidding

    • @frag.mp3
      @frag.mp3 3 ปีที่แล้ว +1

      @@_guru How did it go?

    • @_guru
      @_guru 3 ปีที่แล้ว +7

      @@frag.mp3 I got an internship offer :D

  • @sabufer
    @sabufer 4 ปีที่แล้ว +2

    So much knowledge in one short video - great job!

  • @GabrielLima-og5qd
    @GabrielLima-og5qd 5 ปีที่แล้ว +5

    You sir, have the BEST videos about Angular here in TH-cam. I could watch your channel all day. Keep the good work.
    Ps: do more video about Vanilla Js.

  • @Andrew-ht7rf
    @Andrew-ht7rf 4 ปีที่แล้ว

    This video was the best part of 2020 so far.

  • @simeongeorgiev4536
    @simeongeorgiev4536 6 ปีที่แล้ว +21

    I like your tutorials a lot. They are really beginner friendly. I will recommend them to my friends, because they haven't used js framework yet.

    • @Fireship
      @Fireship  6 ปีที่แล้ว +4

      Thank you, my goal is for this channel to be useful for all levels of Angular expertise

  • @elenaperez6327
    @elenaperez6327 4 ปีที่แล้ว

    Great video! Usually I have to speed up youTube tutorials but not this one. Awesome!

  • @will_abule
    @will_abule 6 ปีที่แล้ว +1

    The is the best components tutorial ever! Thanks jeff

    • @Fireship
      @Fireship  6 ปีที่แล้ว +1

      Glad you liked it Will - thanks!

  • @bharath9836
    @bharath9836 6 ปีที่แล้ว

    this guy will produce best angular videos!!!

  • @HankyUSA
    @HankyUSA 3 ปีที่แล้ว

    AngularDart needs videos like this.

  • @Jubinmail
    @Jubinmail 3 ปีที่แล้ว

    A beginner guide I didn't know I needed.... (I think Lazy loading should be touched upon for beginners as well...it's a trap not using it, you wouldn't know you need it until your app gets huge).

  • @Colstonewall
    @Colstonewall 6 ปีที่แล้ว +6

    I know this is a beginners guide, but at some point I'd love to see you get into stuff like Renderer2 and similar things that we don't see in tutorials very often. Thanks!

    • @Fireship
      @Fireship  6 ปีที่แล้ว +3

      That'd be cool, I might make a handful of mini-video like 3 minutes long that cover topics like tis

    • @Colstonewall
      @Colstonewall 6 ปีที่แล้ว

      Thanks. I was trying to figure out the best way to simply create an HTML element dynamically in Angular, and the answer(s) were obscure. I came across Renerer2, yet I'm still not sure if this is the best way. . .These are the type of things you don't see in tutorials very often.

  • @shegsdev
    @shegsdev ปีที่แล้ว

    Angular been doing stunts many years ago before its little brothers came into the scene.
    Even after 5 years, I enjoyed watching this.

  • @shaswata56
    @shaswata56 2 ปีที่แล้ว

    OMG! I've never learned so much in this short time!

  • @matadorso
    @matadorso 6 ปีที่แล้ว +1

    you're one of the best teachers out there ;)

  • @shreyabisen4729
    @shreyabisen4729 5 หลายเดือนก่อน

    Thanks for the explanation!

  • @wes443
    @wes443 6 ปีที่แล้ว

    I would like to see you do a comparison video of Angular and React and your opinions on which you prefer and why.

  • @joelvilleneuve7037
    @joelvilleneuve7037 4 ปีที่แล้ว +1

    This is like a 3 hour course done in 13 minutes.
    me likey.

  • @carltongordon
    @carltongordon 6 ปีที่แล้ว +6

    Hey Jeff i loving this bigginner guide, Question could you do a playlist for beginners to attract new viewers?

    • @Fireship
      @Fireship  6 ปีที่แล้ว +4

      Yes, I am going to update my playlists right now :)

    • @carltongordon
      @carltongordon 6 ปีที่แล้ว

      Awesome!!!!

  • @tapiwalouis9264
    @tapiwalouis9264 3 ปีที่แล้ว

    This is a really good video, helped me understand quite a number of things 👏🏽👏🏽👏🏽👏🏽👏🏽

  • @belmiris1371
    @belmiris1371 6 ปีที่แล้ว

    You make it look so easy. Thanks for the video!

  • @webdevlog
    @webdevlog 4 ปีที่แล้ว +1

    Great video, was looking for a way to learn the basics of Angular and learn more on what it's about. Thank you very much sir :)

  • @analuzMA
    @analuzMA ปีที่แล้ว

    This was great, thank you!

  • @mohamednaleem2988
    @mohamednaleem2988 6 ปีที่แล้ว +1

    Awesome tutorial, its very useful for me and also easy to understand.

  • @minhtrunggiang6819
    @minhtrunggiang6819 5 ปีที่แล้ว

    This video is so good for me! Thanks!

  • @Eltopshottah
    @Eltopshottah 2 ปีที่แล้ว

    Thank you fireship

  • @ritesisright
    @ritesisright 3 ปีที่แล้ว

    This is great stuff!!!

  • @AndreiStroescu
    @AndreiStroescu 5 ปีที่แล้ว +3

    No way this is for beginners. You need to know quite a lot of concepts in order to just get to use Angular.
    Otherwise, it's very helpful. Thanks.

  • @bhaktiverma6974
    @bhaktiverma6974 2 ปีที่แล้ว

    Great video ....

  • @KDOERAK
    @KDOERAK 3 ปีที่แล้ว

    a great overview

  • @kleffy
    @kleffy 6 ปีที่แล้ว

    Awesome tutorial. Please can I get the full length of the background music?

  • @pandarzzz
    @pandarzzz 6 ปีที่แล้ว

    Thank you for sharing this informative video! 🐻🖐🏻

  • @yonoseespanol
    @yonoseespanol 4 ปีที่แล้ว

    Love your videos. Also I'm inspired by how much hard work pays off. Question: Do you use a special UI for Windows?

    • @arjunsonip
      @arjunsonip 2 ปีที่แล้ว

      He's using Linux distro with KDE desktop environment

  • @julioochoa7236
    @julioochoa7236 3 ปีที่แล้ว

    First... Thanks for your video.. is great.
    One question: What is the google extension name that you are using to inspect angular?
    Best Regards.

  • @ehsanset6709
    @ehsanset6709 5 ปีที่แล้ว

    very helpful. Thank you.

  • @javascript_developer
    @javascript_developer 4 ปีที่แล้ว

    NICE ONE. I liked it

  • @pipofighter
    @pipofighter 3 ปีที่แล้ว +3

    Did anyone understood how he passed down the data from the Home to the Boat component at the end ?
    It appears he clearly skipped steps.
    He just created the child components, deleted the content of the Parent components while adding a simple :
    That just does not work for me, where is the rest! :(

  • @RoshanKumar-yr1jf
    @RoshanKumar-yr1jf 6 ปีที่แล้ว

    Hello brother... I love your teachings... It's very productive...
    I just wanted to ask what all events can we use use in directive and can we handle custom events. Also please let me know how can we pass value to that directive.
    Thanks a lot.

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Thank you! You can bind to any DOM event, the full list is here: developer.mozilla.org/en-US/docs/Web/Events

    • @RoshanKumar-yr1jf
      @RoshanKumar-yr1jf 6 ปีที่แล้ว

      Angular Firebase: Thanks for the reference...
      Also can you suggest me on passing values to the directives?

  • @jmcalaramo
    @jmcalaramo 4 ปีที่แล้ว

    Currently, we're studying Angular and Java. I'm a bit confused towards angular.
    So my understanding of Angular is this. Angular is the 'logic' behind the website/application and html is the face of it. Right?
    Or am I missing something?

    • @imjustadev
      @imjustadev ปีที่แล้ว

      Angular has both structure and logic. And yes, also styles

  • @jordanwhittle8713
    @jordanwhittle8713 6 ปีที่แล้ว +7

    I just got an ad with Stephen fry on it and I thought "hmm I'll actually watch this advertisement"... But the ad was only 4 seconds long or so - Oh well

  • @leonardocoutinho8469
    @leonardocoutinho8469 6 ปีที่แล้ว

    Nice video congrats, who the hell clicked on the unlike button ? I dont understand

  • @arpanbanerjee8584
    @arpanbanerjee8584 5 ปีที่แล้ว +1

    hi! thanks for the video . Can u pls tell me what plug in u r using in chrome ? i do not see so many features in my developers option? for example u can see the component tree?

  • @yourpersonaldatadealer2239
    @yourpersonaldatadealer2239 6 ปีที่แล้ว +4

    Can I please ask how you did the animation at the start of your video? Thanks!

    • @Fireship
      @Fireship  6 ปีที่แล้ว +1

      Adobe AfterEffects with the help of some prebuilt animations

    • @yourpersonaldatadealer2239
      @yourpersonaldatadealer2239 6 ปีที่แล้ว

      Angular Firebase Awesome. And thanks for your content!

  • @joelvilleneuve7037
    @joelvilleneuve7037 4 ปีที่แล้ว

    also noice I just set up a react native app to link up to firebase and rather liked firebase. Hopefully this implies I can do the same from my angular app.

  • @carlosmundaray8351
    @carlosmundaray8351 6 ปีที่แล้ว +1

    excelente explicación :)

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Gracias Carlos!

  • @dehn_1
    @dehn_1 ปีที่แล้ว

    in the last part of the video, shouldn't the boat component ts file have a boat property with an @Input() decorator in order to receive data from its parent component? like this: @Input() boat: any

  • @Colstonewall
    @Colstonewall 6 ปีที่แล้ว

    I noticed you sorta touched on a problem I was having around 10:09 where you said basically "don't touch the DOM with things like document.querySelector(#title);" So, is this code ok on different platforms? const section = this.el.nativeElement.querySelector('#sec');

  • @deanadams5812
    @deanadams5812 ปีที่แล้ว +1

    Hello, not sure if this is still active but once you have set up your angular cli and you add a new component it takes you to the angular page from your previous video on angular cli basics.
    Am I supposed to remove any code before adding this new component?

    • @nartarkan1557
      @nartarkan1557 ปีที่แล้ว

      I deleted the app.component.html code and wrote the home component selector in it

  • @yourpersonaldatadealer2239
    @yourpersonaldatadealer2239 6 ปีที่แล้ว

    I've noticed that I can't use the 'publish.twitter.com' code to embed a timeline into my angular app. Research showed that this was possibly due to CORS. I got it working with a single tweet using ngx-tweet but still no luck with a timeline. It might make a good video topic for you to do sometime as many people like myself seem to be struggling with this.

  • @blklgnd
    @blklgnd 2 ปีที่แล้ว

    Fucking great, that's how you teach programming, damn!

  • @susruthikanaparthi9502
    @susruthikanaparthi9502 5 หลายเดือนก่อน +1

    i got an error ba adding components too the app.html withot components its working. someone please explin me what was the issue?

  • @alex-karpov-dev
    @alex-karpov-dev 6 ปีที่แล้ว

    Awesome!

  • @noel_1668
    @noel_1668 4 ปีที่แล้ว

    Is there anyway, to render an image automatically by code , if you only have the link (without hardcoring the link)

  • @Zengo777
    @Zengo777 2 ปีที่แล้ว

    Cool a real LL918 - after all the time

  • @SubhrajitSadhukhan
    @SubhrajitSadhukhan 3 ปีที่แล้ว

    Makes sense. Now I'll move on and learn React.

  • @sergeymigel4680
    @sergeymigel4680 4 ปีที่แล้ว

    thanks!

  • @tinkuv3321
    @tinkuv3321 2 ปีที่แล้ว

    How can we convert a component into a product where other apps can use it.

  • @willgriner8965
    @willgriner8965 ปีที่แล้ว

    can anyone point me to a video explaining how to setup vs code for angular? as well as all the files he has setup? I have no idea how to set up files like his and it seems to be important

  • @manjurulislamkhan4722
    @manjurulislamkhan4722 3 ปีที่แล้ว

    14 min of fireship and traversy >= 140 min of others

  • @mateja176
    @mateja176 6 ปีที่แล้ว

    Are you using Linux if so which distribution?

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      I'm using Kubuntu 16.04, but will be upgrading to 18 soon.

  • @MrArmorcat
    @MrArmorcat ปีที่แล้ว +1

    While I like the straight forware approach I feel like this video is a bit too hard to understand if you don't know the fundamental terminologies used in this video :(

  • @funleague
    @funleague 3 ปีที่แล้ว +2

    I like your tutorial but I hate JavaScript !

  • @Munirs1998
    @Munirs1998 5 ปีที่แล้ว +8

    Way too fast!. Good content though, Maybe just grab a coffee and do it slowly next time :) Thanks

  • @jcv71
    @jcv71 3 ปีที่แล้ว +1

    Not bad at all, but waay too fast for beginners

  • @f33lthepkfromprins
    @f33lthepkfromprins 7 หลายเดือนก่อน

    ????

  • @Animal1may
    @Animal1may 4 ปีที่แล้ว

    Shit

  • @RiasGremoryIsLife
    @RiasGremoryIsLife 6 ปีที่แล้ว

    Ik hou zo kanker veel van coderen

  • @jessh4016
    @jessh4016 ปีที่แล้ว

    This is a terrible explanation.

  • @jhonathanmartini9829
    @jhonathanmartini9829 2 ปีที่แล้ว

    gay accent