5 Tips for Using Angular More Efficiently

These are the top 5 Angular tips that I came up with after reflecting on my most valuable lessons and epiphanies about Angular, TypeScript and Angular project structure. These are practical tips and tricks that will teach you how to best utilize services and components while minimizing the amount of written code.
CONTENTS:
TIP #1 - 1:58
Example - 3:25
TIP #2 - 4:34
Example - 5:13
TIP #3 - 7:43
Example - 9:04
TIP #4 - 11:11
TIP #5 - 13:31
Example - 16:38
To learn more about the example app in this video:
masteryportfolio.com
Angular in 2 Minutes:
• ANGULAR explained SIMP...
Why I chose Angular:
• Angular is BETTER than...
MY GEAR
Sony ZV 1
amzn.to/2DXxrRV
Fifine Condenser Recording Microphone
amzn.to/2E7bboc
#programming #webdevelopement #angular

Пікірлер: 44

  • @akilmontrope2431
    @akilmontrope24314 жыл бұрын

    What kind of backend would you suggest? Would you use Nestjs or Firebase?

  • @neverbenbetter8225

    @neverbenbetter8225

    4 жыл бұрын

    I’m using Firebase. I started using it because it was free, but I really like it and the NoSQL database structure has really been good for my project. Also, Angular and Firebase are both Google products and Angular Fire is the officially endorsed library for using Firebase in Angular projects. I will definitely make a video about Angular Fire in the near future (especially since the documentation for AF is not the best. I think supplementing with some videos is a good idea.)

  • @neverbenbetter8225

    @neverbenbetter8225

    4 жыл бұрын

    But to be fair, I haven’t tried another backend yet so I can’t exactly compare.

  • @blabla-kk8bl

    @blabla-kk8bl

    3 жыл бұрын

    Django is the best

  • @wolfisraging
    @wolfisraging3 жыл бұрын

    seriously man, the best angular practices I've found yet. Thanks a ton. I bet if you start some coding playlist (like tutorials or projects and stuff) you'd definitely get a whole lot of subscribers. And I would love to see that. :)

  • @neverbenbetter8225

    @neverbenbetter8225

    3 жыл бұрын

    Thank you. This is encouraging and gives me ideas.

  • @tahaqazi5595
    @tahaqazi5595 Жыл бұрын

    This is an amazing video. I’ve seen people do a lot of low level videos on starting a project or a todo website, but there are barely any videos on how to actually manage a decent project, What are best practices and how to plan a project even? This is all great advice. Need literally all of it as I was struggling with getting past the beginner-intermediate level stuff.

  • @DrJimmyBob
    @DrJimmyBob3 жыл бұрын

    Excellent video. You deliver good information quickly and you're examples do a great job of grounding the concepts. Keep it up!

  • @neverbenbetter8225

    @neverbenbetter8225

    3 жыл бұрын

    That’s encouraging. Thank you so much!

  • @saidalachgar8837
    @saidalachgar8837 Жыл бұрын

    Good explanation with a well arranged presentation, thank you 🙏

  • @kishorkadavil550
    @kishorkadavil5503 жыл бұрын

    Great tutorial. You definitely deserve more...

  • @MrCristianocampos
    @MrCristianocampos Жыл бұрын

    Great tips!

  • @thesweetvishu
    @thesweetvishu3 жыл бұрын

    good one...

  • @chrisfelix9065
    @chrisfelix90652 жыл бұрын

    Your videos, not just this one deserves a love not just a like ❤️

  • @giorgimerabishvili8194
    @giorgimerabishvili81943 жыл бұрын

    Just discovered this great channel! Thank you!

  • @neverbenbetter8225

    @neverbenbetter8225

    3 жыл бұрын

    Thank you so much. I hope you enjoy what’s ahead.

  • @rembautimes8808
    @rembautimes88082 жыл бұрын

    Thanks for this video, just subscribed

  • @DASsoulstryker
    @DASsoulstryker Жыл бұрын

    Starting to watch ur vids, not many people talking about angular

  • @ianvink
    @ianvink2 жыл бұрын

    Can you provide the source code? I'd love to look thru the example. Excellent video.

  • @saiprathap9550
    @saiprathap9550 Жыл бұрын

    Hey hi 👋 it's amazing 🤩 tips , can u plz make videos on state management in Angular ngrx & when to go for it

  • @frontend3409
    @frontend3409 Жыл бұрын

    AD3. 10:45 so every new subscription in parent component you should set to the same this.anotherSubscription property?

  • @NuncNuncNuncNunc
    @NuncNuncNuncNunc Жыл бұрын

    There a few ways to be even more efficient. First, use angular's built-in AsyncPipe. I think most of the unsubscribe issues brought up here will be eliminated. This will especially eliminate the need for a superclass just to unsubscribe. That superclass can be dangerous because it relies on child classes to call the super method of life cycle hooks if the child overrides them. Second, use a data service instead of a data component. Each of the components using the data service can, in their ngOnInit method, map the common data to the form they need with RxJS pipe/map. Again no subscription needed just use the new observable with an AsyncPipe in the template. This pattern will also eliminate the need to have special functions like @6:30 to update data as it can all be handled in the map function.

  • @hansschenker
    @hansschenker3 жыл бұрын

    You could also choose angular Templates to do the different Form Types (event type ...) and when the user select an event type you load that Template! see: kzread.info/dash/bejne/ZIeiuNqJla3Kp6g.html

  • @durairajrajendiran9725
    @durairajrajendiran9725 Жыл бұрын

    Hi @NeverBenBetter Hi this is Durairaj Rajendiran, if I use data services and receive data through subscription of observables. If I unsubscribe what will happen? Is the connection only closed or data also cleared from the stack?

  • @BetoShiver
    @BetoShiver Жыл бұрын

    Thanks for this. Tip 3# is gold! can you please share the source code for hat unsubscriber class?

  • @piresashwin
    @piresashwin3 жыл бұрын

    Thank your for these amazing tips. Will it be possible to explain in more details the DataWidget component ideas as well as the applications of it. I have a question. If a parent has to pass data which is being used by 2 child components. will the observable/service make calls to the API twice? For E.g. DataComponent D1, D2, D3 -> Widget 1 Tracking: D1, D2 -> Widget 2 Tracking D1,D3 D1,D2,D3 - Are fetched using REST APIS Will D1 Rest API be Called for Widget 1 and Widget 2?

  • @neverbenbetter8225

    @neverbenbetter8225

    3 жыл бұрын

    There is only ever one instance of a service (unless it is a component service, in which case it is attached to the individual components and “lives” with the component. You have to specify component services as such, so otherwise there is only ever one.) As a result, everything in the service’s constructor will only execute once. So for example, if you retrieve data from your backend, even if that data is used by two or a thousand components, there will only be one call. I am always using my services to subscribe to data streams. That means a transaction is occurring anytime a change is made on the server. Because the subscription is in the service, I am being very efficient by doing this. On the other hand, if I subscribed to those streams in my components, that would be disastrous for my server fees. If I had a thousand components and EACH component independently retrieved changes as they were made... I bet you see where I am going. I hope I answered your question. Thanks for the specific idea for a new video. I will add it to the queue!

  • @piresashwin

    @piresashwin

    3 жыл бұрын

    @@neverbenbetter8225 Thanks for the reply. I am incorporating your tips in my current application. It would be great if you can make a video explanation for the same.

  • @user-bc1qs7rj9v
    @user-bc1qs7rj9v Жыл бұрын

    Can you please share the example of all 5 tips?

  • @YouTikki
    @YouTikki Жыл бұрын

    18:59 Here you use getter functions - but aren't these run each time Angular does change detection? Wouldn't that mean that they're essentially called all the time?

  • @ToJak91

    @ToJak91

    Жыл бұрын

    If they are used from the template, yes. And they are pretty hard to spot when you're just looking in the code aswell.

  • @MyName-ur3ir
    @MyName-ur3ir Жыл бұрын

    thanks for this stream! would love to see source code.

  • @zebcode
    @zebcode3 жыл бұрын

    Please could you consider breaking this up into chapters? I know how to lazy load modules but I want to hear the other ideas without having to try and find them by scanning the video timeline.

  • @neverbenbetter8225

    @neverbenbetter8225

    3 жыл бұрын

    Noted. I will keep this in mind, moving forward.

  • @zebcode

    @zebcode

    3 жыл бұрын

    @@neverbenbetter8225 any chance you could apply it to this video retospectily?

  • @Semma_Bore
    @Semma_Bore4 жыл бұрын

    Can you make a video on unsubscribe technique which you used..

  • @neverbenbetter8225

    @neverbenbetter8225

    4 жыл бұрын

    hari prasad thanks for letting me know that’s something you would be interested in. Yes. I can do that.

  • @Semma_Bore

    @Semma_Bore

    4 жыл бұрын

    @@neverbenbetter8225 Yeah.. That was interesting because i am using a little complex way of unsubscribing.

  • @CodingAbroad
    @CodingAbroad Жыл бұрын

    Soon we’ll stamp out React. Angular will take the world

  • @timelimitexceeded0
    @timelimitexceeded02 жыл бұрын

    Can see a lot of bootstrap 😂😂

  • @BrutalHumorSocial
    @BrutalHumorSocial Жыл бұрын

    They're not called "life-style hooks" 🤣

  • @robottrainer
    @robottrainer2 жыл бұрын

    Actually, the best practice is to make any data transfer into a service component. Also, you don't extend classes for just a function, you extend a class for the variable inheritance you use, like a button. You will extend the button class to add button types for ex. Another point, for your unsubscribe, it's highly suggested to push to a subject, not unsubscribe the subscription raw, you destroy them on page change, you don't want to destroy all the subscriptions like what he did. You could have also avoided all the super nonsense, with just inputs and outputs between components, which would have saved you more lines of code, and useless function tests you didn't need to write. Lastly, you didn't need to worry about async changes, if you just used ngonchanges lifecycle hook with inputs between components, subscribe to that to refresh the data displayed on the view. You basically just wrote an es6 typescript app using angular default webpack config, change title xD.

  • @neverbenbetter8225

    @neverbenbetter8225

    2 жыл бұрын

    What is wrong with “unsubscribing raw”?