Monsterlessons Academy
Monsterlessons Academy
  • 497
  • 3 626 540
From Good to Great: Optimizing Angular Performance
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses
In this video, we delve into optimizing Angular performance by examining how components are rendered and how often. Learn the impact of OnPush change detection strategy and the Track By function on your app's efficiency. We also highlight common pitfalls to avoid. Perfect for Angular developers aiming to boost their application's performance!
This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.
LOOKING FOR THE VIDEO EDITOR? ➡️ ekaterina.kochergina.business@gmail.com
SERVICES THAT I'M USING
Backblaze unlimited cloud backup ➡️ www.backblaze.com/cloud-backup/personal#afc27g
Free 1 Month Skillshare Membership ➡️ skillshare.eqcm.net/c/5473521/1085653/4650
STUFF I USE
► My imac for home on Amazon - amzn.to/4aLbTBu
► Mac macbook to go on Amazon - amzn.to/4bRVD2m
► My monitors on Amazon - amzn.to/3yEafUQ
► My mouse on Amazon - amzn.to/4ayzXHn
► My keyboard on Amazon - amzn.to/3KkyGZQ
► My monitor arm on Amazon - amzn.to/3wRKvDM
► My speakers on Amazon - amzn.to/44WPWht
► My coffee machine on Amazon - amzn.to/3KjajvH
► My Synology NAS on Amazon - amzn.to/4bWZX0u
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3KjyA4F
► My external SSD drive on Amazon - amzn.to/3Kko5hG
► My external HDD drive on Amazon - amzn.to/44WQ3tp
► My microphone - amzn.to/45191iD
► Audio interface - amzn.to/4axuoJq
► Camera - amzn.to/3yMSH8M
TIMESTAMPS
0:00 Introduction
1:53 Mutating an object
2:52 Does onPush help?
3:33 Does trackBy help?
4:53 Trackby + RxJS
5:29 It is broken now
MOST POPULAR COURSES
► Javascript interview questions ➡️ monsterlessons-academy.com/courses/javascript-interview-questions-coding-interview
► Typescript interview questions ➡️ monsterlessons-academy.com/courses/typescript-interview-questions-coding-interview
► React interview questions ➡️ monsterlessons-academy.com/courses/react-interview-questions-coding-interview-course
► Angular Interview Questions ➡️ monsterlessons-academy.com/courses/angular-interview-questions-coding-interview-2023
► Angular Testing ➡️ monsterlessons-academy.com/courses/angular-testing-unit-testing-angular-and-e2e-testing
► React Testing ➡️ monsterlessons-academy.com/courses/react-testing-unit-testing-react-and-e2e-testing
► Building real project with Angular + NgRx ➡️ monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch
► Building real NestJS API ➡️ monsterlessons-academy.com/courses/nestjs-building-an-api-for-real-project-from-scratch
► Building real fullstack project ➡️ monsterlessons-academy.com/courses/build-fullstack-trello-clone-websocket-socket-io
CONNECT WITH ME!
► TWITTER - monster_lessons
► INSTAGRAM - monsterlessonsacademy
► TIKTOK - www.tiktok.com/@monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacademy/monsterlessonsacademy/tree/testing-track-by
Переглядів: 2 291

Відео

Unlocking Possibilities: The Magic of Angular Portal and Angular Overlay
Переглядів 1,9 тис.14 годин тому
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses Learn how to use Angular Portal and Overlay from Angular Material to create a custom, reusable modal for any project! In this tutorial, I'll guide you through the steps of setting up these powerful tools and demonstrate their application with a real-world example. Perfect for developers looking to enhance their Angular proje...
Beginner's RxJS Tutorial: Dive Deep with RxJS Crash Course!
Переглядів 2,3 тис.19 годин тому
► 🔥 Get my RxJS Course Here ➡️ monsterlessons-academy.com/courses/rxjs-crash-course-reactivex-from-zero-to-hero This course is great preparation for any RxJS that you may have coming up. Reactive programming needs a lot amount of knowledge, but the best way to prepare for it is a lot of practice! In this course you will learn everything that come from real RxJS projects and reactive programming...
Enhance Your App Security: Supabase Authentication Tutorial
Переглядів 514День тому
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses In this video, I'll walk you through setting up Supabase for authentication in an Angular project. You'll learn how to set up a Supabase project, configure Supabase in Angular, create a Supabase service, and implement Supabase authentication in Angular. By the end of this tutorial, you'll have a fully functional authenticati...
The Great Database Debate: Supabase vs Firebase!
Переглядів 83514 днів тому
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses In this tutorial, I guide you through setting up a Supabase project, creating tables and columns, and integrating Supabase with an Angular application. Watch as we create a Supabase service and add database functionality to an Angular Todo app. Perfect for beginners and experienced developers alike! This video is NOT sponsor...
From Beginner to Pro: Demystifying Angular Change Detection in Depth
Переглядів 3,2 тис.14 днів тому
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses In this video, you will learn Angular change detection in depth. Learn how it works and understand key concepts such as "mark for check" and the differences between `detectChanges` and `markForCheck`. We'll also explore how components are marked as dirty, the role of async pipes in change detection, and the advanced topics o...
Angular Production Deployment with UltaHost Web Hosting VPS Plan
Переглядів 1 тис.21 день тому
Check out UltaHost now: ultahost.com/ In this video, I'll walk you through deploying an Angular application on a VPS using UltaHost's web hosting services. Follow along as we rent a VPS, set it up, configure the necessary environment, and deploy our Angular app for production. Perfect for developers looking to ensure a smooth and efficient deployment process. Some product links are affiliate li...
Handling Errors in React Like a Pro: Best Practices Explained
Переглядів 73221 день тому
Struggling with handling errors in React? 🤔 Don't worry, I've got you covered! In this video, we dive into the most common React error messages and how to fix them. From 'Missing key prop for the element' to 'JSX expressions must have parent element,' we'll walk you through each issue step by step, providing clear explanations and practical solutions. Whether you're a beginner or an experienced...
Unleashing Creativity: The Ultimate React Analog Clock Project
Переглядів 43028 днів тому
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses Learn how to build a stylish analog clock component using React! In this tutorial, I'll guide you through setting up the project, writing the clock logic, and applying CSS styles. Perfect for both beginners and experienced developers looking to enhance their React skills. Let's get coding! This video is NOT sponsored. Some p...
Angular 18 Features: A Game-Changing Evolution
Переглядів 10 тис.Місяць тому
► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/courses Discover the exciting new features in Angular 18 with a deep dive into zoneless Angular applications! In this video, we explore how to configure a zoneless Angular app, the benefits it brings, and the changes it introduces. Learn step-by-step instructions to set up your Angular project without relying on Zone.js and understa...
Circular Dependency in Angular, React, Javascript: Best Practices for Avoidance
Переглядів 1,5 тис.Місяць тому
Circular Dependency in Angular, React, Javascript: Best Practices for Avoidance
Fixing Expression Has Changed After It Was Checked Error in Angular
Переглядів 2,7 тис.Місяць тому
Fixing Expression Has Changed After It Was Checked Error in Angular
Build Angular Calendar Component Yourself - No UI Libraries Needed
Переглядів 3 тис.Місяць тому
Build Angular Calendar Component Yourself - No UI Libraries Needed
Reactive Form Validation in Angular - Do It Right
Переглядів 3,2 тис.Місяць тому
Reactive Form Validation in Angular - Do It Right
New Course Released - RxJS and Reactive Programming
Переглядів 1 тис.Місяць тому
New Course Released - RxJS and Reactive Programming
Resolving Merge Conflicts in Visual Studio Code - The Easy Way
Переглядів 1,2 тис.Місяць тому
Resolving Merge Conflicts in Visual Studio Code - The Easy Way
Working With Git in Visual Studio Code - Pushing to Github Visual Studio Code
Переглядів 897Місяць тому
Working With Git in Visual Studio Code - Pushing to Github Visual Studio Code
Build Custom Interactive Calendar React Without UI Libraries
Переглядів 9772 місяці тому
Build Custom Interactive Calendar React Without UI Libraries
Next Level Web Development: Creating a Single Page Application Without a Framework
Переглядів 1 тис.2 місяці тому
Next Level Web Development: Creating a Single Page Application Without a Framework
Vscode vs Webstorm - Which One Is Better?
Переглядів 4,3 тис.2 місяці тому
Vscode vs Webstorm - Which One Is Better?
React Unit Testing Crash Course - With React Testing Library and Vitest
Переглядів 1,1 тис.2 місяці тому
React Unit Testing Crash Course - With React Testing Library and Vitest
React Virtual List: Revolutionizing List-Making
Переглядів 8242 місяці тому
React Virtual List: Revolutionizing List-Making
Dynamic Nested Forms Angular Explained
Переглядів 3,8 тис.2 місяці тому
Dynamic Nested Forms Angular Explained
React Debugging in Vscode - No Browser Needed
Переглядів 1,2 тис.2 місяці тому
React Debugging in Vscode - No Browser Needed
Can ChatGPT Teach Me How to Code?
Переглядів 1 тис.2 місяці тому
Can ChatGPT Teach Me How to Code?
Super Clean Visual Studio Code Setup - Minimalistic Look
Переглядів 4 тис.2 місяці тому
Super Clean Visual Studio Code Setup - Minimalistic Look
Next JS Authentication With Firebase - Do It Right
Переглядів 5773 місяці тому
Next JS Authentication With Firebase - Do It Right
Neovim Complete Setup - Setting up Neovim From Scratch
Переглядів 3,3 тис.3 місяці тому
Neovim Complete Setup - Setting up Neovim From Scratch
Angular Signal Output - It’s Getting Even Better
Переглядів 3 тис.3 місяці тому
Angular Signal Output - It’s Getting Even Better
Common Typescript Mistakes You Don’t Know About
Переглядів 2,9 тис.3 місяці тому
Common Typescript Mistakes You Don’t Know About

КОМЕНТАРІ

  • @youngoose7
    @youngoose7 15 годин тому

    where is the previous todo app project to follow this course? cannot find it.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy 13 годин тому

      Here you go ua-cam.com/video/uyTC0Skvvls/v-deo.htmlsi=spWpGQOOvHS0LcsO

    • @youngoose7
      @youngoose7 12 годин тому

      @@MonsterlessonsAcademy thanks for the quick response! appreciate

  • @the-boss-98
    @the-boss-98 22 години тому

    why are u not using the new @for syntax?

  • @Edgars82
    @Edgars82 День тому

    using new @for syntax flow Angular enforces to use trackBy as it is required and if someone starts learning Angular it should do it with latest version so this should not be an issue.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy День тому

      It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

  • @yufgyug3735
    @yufgyug3735 День тому

    important tips, however worth noting that angular 17 (i think) introduced new template syntax with required track by, which makes this obsolete

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy День тому

      It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

  • @pareshsolanki929
    @pareshsolanki929 День тому

    Can you make video on how to target dynamically created classes in Material UI

  • @oleksiipopov5143
    @oleksiipopov5143 День тому

    thank you

  • @ChessPuzzlesVideo
    @ChessPuzzlesVideo День тому

    Well explained. But in real-time application, we pass object to child component because we need to access multiple properties of that object.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy День тому

      Sure. Which works just fine until you get to the point where performance is really important and you want to avoid renders.

    • @Marshall86MT
      @Marshall86MT 15 годин тому

      Which strategy would you use in this case? ​@@MonsterlessonsAcademy

  • @enverusta7811
    @enverusta7811 День тому

    Thank you so much, it was really helpful

  • @izacaqsha3480
    @izacaqsha3480 День тому

    How about the new "for" In angular v18, do we need to optimize it too in some kind of way like trackby?

    • @Brendan2Alexander
      @Brendan2Alexander День тому

      Trackby is required in v18

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy День тому

      You mean @for control flow in html? It is there starting from Angular 17 and all same rules are applied there as well as trackby.

    • @izacaqsha3480
      @izacaqsha3480 22 години тому

      @@MonsterlessonsAcademy yes sir, I see, thanks

  • @Brendan2Alexander
    @Brendan2Alexander День тому

    Really helpful thank u! Please don’t start a channel about making ice cream, because I will become so fat!😂

  • @AndreyKarpovich
    @AndreyKarpovich День тому

    Inacuraccy on 6 min: the first implemented hook during comp creation (after class constructor) is ngOnChanges, it could grab inputs if comp has. After that ngOnInit In the question about data-sharing are missed event emmiters (from child to parent components) and also we can pass some data when routing between components + with usage of injection tokens

  • @adeshfakooa8048
    @adeshfakooa8048 День тому

    Hello, Can I ask what code editor you are using? Thank you

  • @diego_sabbagh
    @diego_sabbagh День тому

    sorry dude, this video is PRETTY BAD. too many things are off. 1) typescript is not angular. there was not a single question about angular. naming the video "angular interview questions" just to get some clicks is LAME 2) i'm pretty sure that one is not the elvis operator. in other programming languages Elvis has indeed both of his eyes ( ?: ) and the operator is for something else 3) enums are NOT good. typescript itself discourages the use of enum. Matt Pocock made the point very clear a while ago. also a quick google search can give you an idea

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy День тому

      1. It''s a first section of the course which I say at the beginning. 2. You are wrong and you could google it before writing your comment. 3. I don't care what one developer said. Lots of projects use them with success.

    • @diego_sabbagh
      @diego_sabbagh День тому

      @@MonsterlessonsAcademy you answers are even lamer lol 1) still wrong title. click bait. it's so easy to set a proper title that it's obvious you set it wrong on purpose 2) yes, quick search. exactly as i suggested you on point 3: first result on google is the wikipedia page, exposing again your mistake. you could have checked yourself but i guess we know already your approach: en.wikipedia.org/wiki/Elvis_operator 3) a lot of projects work fine with bad practices too. this doesnt mean they suddenly become best practices. not caring of what community and official doc say it's something that tells a lot of you. i guess you'll reply with even lamer answers (if possible), so i probably stop here. generally speaking, i appreciate the effort that people like you put on the sharing/teaching work. nonetheless, you should take bad feedbacks as opportunities to improve instead of trying (and failing) to justify yourself. i'll let you have the final word on that. have a nice day and good luck with your channel bye

  • @mohsenarshad1588
    @mohsenarshad1588 День тому

    The only video on the internet that explaining directives and component in a way that everyone can understand. Thanks a lot man 😍

  • @TheVidrestart
    @TheVidrestart День тому

    hey! I followed the guide, Lazy shows that fzf is installed, but when using any command, I get the error: [Fzf-lua] 'fzf' is not a valid executable, aborting. Please make sure 'fzf' is installed. Can you help me please? thanks

    • @TheVidrestart
      @TheVidrestart День тому

      hmm, after installing none-ls.nvim and mason, everything broke :( a lot of “filed to install” errors, etc., very disappointing - I did everything exactly according to the guide.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy День тому

      You need to install fzf on your machine.

  • @carlossolrac84
    @carlossolrac84 2 дні тому

    it is a shame i cant add this video to my favorite's list. idk why youtube marks these videos as 'for kids', which removes this feature.

  • @Vaivis
    @Vaivis 2 дні тому

    Thank you

  • @RAHULCOC-x5f
    @RAHULCOC-x5f 2 дні тому

    Could you please create a tutorial regarding authentication in angular SSR 😢

  • @MrRorypam
    @MrRorypam 2 дні тому

    Simple and Basic way to create react library using Vite. Thanks lot in explaing in simple way

  • @olgafroggy
    @olgafroggy 3 дні тому

    Do you still use classes?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy 2 дні тому

      Right now no. But there are quite old projects which still use classes and most devs don't want to work with them so they are paying more money.

  • @DianaBichelashvili
    @DianaBichelashvili 3 дні тому

    Thank you very much for such an amazing tutorial , highly appreciated ! very helpful for beginner

  • @abhinav2554131
    @abhinav2554131 4 дні тому

    Very well explained in just an hour i went from zero to being confident, however could you also suggest how to unit test the components?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy 2 дні тому

      I cover everything about components testing including real project testing in the full course

  • @adarshsingh3012
    @adarshsingh3012 4 дні тому

    Nice video 👍

  • @jonathanjohnson2785
    @jonathanjohnson2785 4 дні тому

    Danke❤

  • @mrlindaring
    @mrlindaring 4 дні тому

    Brilliant! Thank you.

  • @NadaII
    @NadaII 5 днів тому

    You deserve more subscribers. Keep posting!

  • @g-luu
    @g-luu 5 днів тому

    Have you figured out a way to make inline templates highlighting for angular ?

  • @vladwolf444
    @vladwolf444 5 днів тому

    Is there similar material on working with DI in Angular?

  • @zura8635
    @zura8635 5 днів тому

    when i try to run command "docker-compose build" it tells me that there is no configuration file provided: not found. how do i fix it? at 31:15

  • @sameerdas3672
    @sameerdas3672 5 днів тому

    I have always wondered how Angular Material Dialog works under the hood. Now I am very much clear about the concept. Never knew that portal exists in angular. Thanks a lot for the tips and tricks.

  • @Pooja7Priya
    @Pooja7Priya 5 днів тому

    I recently embarked on a project that required implementing Firebase Authentication with Angular17, and despite multiple attempts to get assistance from ChatGPT, I struggled to piece everything together. Thankfully, I stumbled upon this video, and it was a game-changer! courtesy - chatGPT😉

  • @ovuokeaghwotu2389
    @ovuokeaghwotu2389 5 днів тому

    This is very helpful. Can you do a video on reusable dropdowns with Angular CDK?

  • @user-rn7rw9df9p
    @user-rn7rw9df9p 6 днів тому

    Hello MLA, completely unrelated to the video, but I just want to say thank you for the tips, guides, and tutorials you put out. I'm a 2nd year computer science college student and your videos really helped me out a lot with my angular project I just finished today, and now its my favorite framework to use, despite my peers disliking it from having a smaller community compared to frameworks like React, lmao. Keep up the good work. love your videos, man.

  • @Monicaslessons-vt7hs
    @Monicaslessons-vt7hs 6 днів тому

    big thanks its really usefull for me

  • @ugochukwuumerie6378
    @ugochukwuumerie6378 6 днів тому

    Awesome lesson

  • @skywizard3319
    @skywizard3319 6 днів тому

    2x speed team

  • @brightokoro7073
    @brightokoro7073 6 днів тому

    Nice work

  • @hamza201183
    @hamza201183 6 днів тому

    I see Angular Material many times in the enterprise. I would be happy to have a series of videos or even a course about Angular Material from you, Oleksandr.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy 6 днів тому

      I already did that in few videos but I will add an idea about the course to the list ua-cam.com/video/itq4KHN8buM/v-deo.htmlsi=Mqo8980aXRxnU5zV ua-cam.com/video/ZfWCr8BzYHY/v-deo.htmlsi=1ds_Jdh-ZgjP3cZZ ua-cam.com/video/pgVn7I6UEoY/v-deo.htmlsi=kmMmjVSLh3yNggeC

  • @berlinjohns
    @berlinjohns 6 днів тому

    Can you make a tutorial for Angular reusable Form fields!

  • @potatopower2144
    @potatopower2144 6 днів тому

    Would the full course be enough to put RxJS on my resume?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy 6 днів тому

      If you can apply knowledge from the course later on your interview then yes.

  • @andreyfomin9487
    @andreyfomin9487 6 днів тому

    I'm very curious, what book is behind you?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy 6 днів тому

      That's a book that I wrote like 6 years ago about Vue. www.amazon.com/Mastering-Vue-js-Oleksandr-Kocherhin-ebook/dp/B0795RQP1L/ref=sr_1_1?crid=ZUJP9GDBHLWN&dib=eyJ2IjoiMSJ9.KrDqnwz7OkB2C3hP1LujjveQ3x8t3YGtqcfSRnoszjA.7fNkTZ6EGgSmBiSasm6BfnV1upOd4YPauZTjjitF-qY&dib_tag=se&keywords=oleksandr+kocherhin&qid=1718884994&sprefix=oleksandr+kocherhin%2Caps%2C175&sr=8-1

  • @kirklimbu
    @kirklimbu 7 днів тому

    ng b doesnot build the project if we set up below configuration in project.json or angular.json file, Why??---> "prerender": true, "ssr": { "entry": "server.ts" }

  • @alizakeri-wn7in
    @alizakeri-wn7in 7 днів тому

    Simple and precise , lovely

  • @kirklimbu
    @kirklimbu 7 днів тому

    Nice and informative video

  • @Dadaadad268
    @Dadaadad268 7 днів тому

    Hi there. I can't see where you get lastPage.articleCount from in the getNextPageParam function. It doesn't even show as part of the object intellisense when you type lastPage. So I can't get this to work!

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy 7 днів тому

    WATCH NEXT: Change Detection in Angular - You Project Is 20x Slower! - ua-cam.com/video/-tB-QDrPmuI/v-deo.htmlsi=ohe2O1_-nPxAZ_57

  • @alexejks8468
    @alexejks8468 7 днів тому

    one more way to use signals

  • @ShighetariVlogs
    @ShighetariVlogs 8 днів тому

    Subscribed, thank you for making this kind of content! I’m sure you help many developers refresh previous knowledge and polish up our skills!

  • @programmistka_v_amerike
    @programmistka_v_amerike 8 днів тому

    Thank you for your great work!