AyyazTech
AyyazTech
  • Видео 496
  • Просмотров 1 647 516
Angular 17: Component Refreshing Strategies | Reload component
To read Articles visit AyyazTech.com
In this video, I covered three methods to reload a component in Angular 17, including using the router, RxJS subjects, and a conditional variable. I demonstrated each method with detailed explanations and code examples.
=====================
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!
=====================
Cha...
Просмотров: 343

Видео

Passing Objects via Query Parameters in Angular 17 Tutorial
Просмотров 22821 день назад
Visit Blog: AyyazTech.com for written tutorials / articles. In this video, I explored how to pass objects in query parameters in Angular 17 by serializing objects into JSON strings and navigating between components based on the serialized data. The process involved setting up routes, creating components, and handling query parameters effectively. Hey everyone! Before we dive into today's video,...
How to do caching in Angular 17?
Просмотров 47128 дней назад
In this video, I demonstrated how to implement caching in Angular 17 using services, observables, interceptors, and local storage to optimize Angular apps efficiently. Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) t...
How to call function of another component in Angular 17+?
Просмотров 615Месяц назад
Visit Blog Article: www.ayyaztech.com/blog/how-to-call-a-function-from-another-component-in-angular-17 Above URL is the written version of this tutorial. Source code is also provided in above article. In this video, I demonstrated two methods on how to call a function of another component in Angular 17 . The first method involves accessing a function from a child component and the second method...
How to Integrate Google AdSense with Next.js Using Environment Variables
Просмотров 331Месяц назад
Article on Blog: www.ayyaztech.com/blog/how-to-integrate-google-adsense-with-nextjs-using-environment-variables Article on Medium Blog: ayyazzafar.medium.com/how-to-integrate-google-adsense-with-next-js-using-environment-variables-2961b6f8d512 In this video, I demonstrated how to add Google AdSense to a Next.js project using environment variables. I showed step-by-step the process of obtaining ...
How to navigate with query params in Angular 17?
Просмотров 249Месяц назад
Blog Articles: AyyazTech.com Visit blog to read written versions of AyyazTech tutorials. In this video, I demonstrated how to navigate with query parameters in Angular 17, covering topics such as installing dependencies, creating components, setting up routes, and accessing query parameters. Chapters: 00:00 Introduction to navigating with query params in Angular 17 03:05 Installing Angular 17 a...
How to navigate Back and Forward in Angular 17?
Просмотров 217Месяц назад
Visit AyyazTech.com blog to read written versions of AyyazTech videos. I will guide you through navigating back and forward in Angular 17 using Angular router and location service. Follow along as we set up routes, create navigation links, and implement back and forward buttons for seamless navigation experience. Chapters: 00:07 Introduction and importance of navigation in Angular 17 00:52 Crea...
How to navigate to Child Route in Angular 17?
Просмотров 252Месяц назад
Visit AyyazTech.com blog for articles of tutorials on AyyazTech channel. I dived into Angular 17 in this video tutorial, focusing on navigating to child routes. Understanding child routes is crucial for building complex applications and providing users with a seamless experience. Chapters: 00:00 Introduction to Child Routes in Angular 17 00:51 Creating Parent and Child Components 01:24 Defining...
How to navigate to another page in Angular 17?
Просмотров 744Месяц назад
Visit Blog from AyyazTech.com In this video, I covered a comprehensive guide on how to navigate to another page in Angular 17 including router links, router outlets, parameters, programmatic navigation, query parameters, guards, and more. Source Code: github.com/ayyazzafar/angular_17_tutorials_code/tree/navigate_to_another_page Chapters: 00:00:00 Introduction and setting up Angular 17 project 0...
How to loop through object in Angular 17?
Просмотров 255Месяц назад
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!...
How to add headers in HTTP requests in Angular 17? | Interceptors
Просмотров 480Месяц назад
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!...
How to handle HTTP errors in Angular 17?
Просмотров 541Месяц назад
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!...
Mastering Index in Angular 17: *ngFor and @for Loops
Просмотров 238Месяц назад
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!...
How to get previous route in Angular 17?
Просмотров 252Месяц назад
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!...
How to get ID from URL in Angular 17? | Realtime Extraction
Просмотров 190Месяц назад
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!...
How to get query params in Angular 17?
Просмотров 436Месяц назад
How to get query params in Angular 17?
How to Get Current Date in Angular 17 - Step by Step Guide
Просмотров 202Месяц назад
How to Get Current Date in Angular 17 - Step by Step Guide
How to get current URL in Angular 17?
Просмотров 311Месяц назад
How to get current URL in Angular 17?
Exporting Excel Files in Angular: A Step by Step Guide
Просмотров 162Месяц назад
Exporting Excel Files in Angular: A Step by Step Guide
Angular Event Emission: Communicating Data Between Parent and Child Components
Просмотров 168Месяц назад
Angular Event Emission: Communicating Data Between Parent and Child Components
How to encode URL in Angular 17?
Просмотров 293Месяц назад
How to encode URL in Angular 17?
How to Rename Angular Components Easily?
Просмотров 255Месяц назад
How to Rename Angular Components Easily?
How to Use Array Filter in Angular (in 8 minutes)
Просмотров 277Месяц назад
How to Use Array Filter in Angular (in 8 minutes)
Creating a Content Repurpose Agent with LangChain | Step-by-Step Guide
Просмотров 1302 месяца назад
Creating a Content Repurpose Agent with LangChain | Step-by-Step Guide
Creating LangChain API with LangServe - Step by Step Guide
Просмотров 6442 месяца назад
Creating LangChain API with LangServe - Step by Step Guide
Building a Chatbot with GPT4ALL and LangChain: A Step-by-Step Guide
Просмотров 6982 месяца назад
Building a Chatbot with GPT4ALL and LangChain: A Step-by-Step Guide
Creating Your First Chatbot with LangChain and OpenAI: A Step-by-Step Tutorial
Просмотров 8542 месяца назад
Creating Your First Chatbot with LangChain and OpenAI: A Step-by-Step Tutorial
How to force push to GitHub?
Просмотров 922 месяца назад
How to force push to GitHub?
How to fork a GitHub repository?
Просмотров 1952 месяца назад
How to fork a GitHub repository?
Export GitHub Issues to Excel with GitHub CLI Tool
Просмотров 1792 месяца назад
Export GitHub Issues to Excel with GitHub CLI Tool

Комментарии

  • @juliancapponi4788
    @juliancapponi4788 День назад

    Hello, very good video! Starting with angular 16, in the chrome debug, the "this" context inside an async function always turns out to be undefined. What is the reason?

  • @kashanghori2959
    @kashanghori2959 День назад

    I have 7 Different Themes, Colors Basically. which I used on my angular application , can I added the 7 colors pallete and switch between dark/light as well, in your example you only switched dark/light theme between all the 7 colors ,

  • @reshmajadhav7579
    @reshmajadhav7579 День назад

    in email, I am getting values like this.form.value.from_name and so on...not getting the values which i have entered in the input field.

  • @vantuancnc
    @vantuancnc 3 дня назад

    How to use Input() and output(), model() in Angular 17.3? please.....

  • @jlonso1840
    @jlonso1840 3 дня назад

    works

  • @SonRayS
    @SonRayS 3 дня назад

    thx for you!

  • @urm0m
    @urm0m 3 дня назад

    Hey there! AMAZING tutorial but i have a problem. With your source code the profile API responds with 401 Unauthorized. Can you check it out please?

  • @virtualvibe4324
    @virtualvibe4324 4 дня назад

    Helpful 10Q You!

  • @advance5189
    @advance5189 5 дней назад

    To my mind, using navigate inside guards is kinda bad practice. Guards run while navigation is happening. If you call navigate again, you're forcing the route to abort navigation and start a new one. Instead, I'd consider returning an UrlTree here

  • @weixiangng8279
    @weixiangng8279 5 дней назад

    Great video, how about passing data from one component to another component? Like child to child if that is possible.

  • @mohammadinamullah8197
    @mohammadinamullah8197 6 дней назад

    Quick question, how do we achieve JavaScript functionalities (for example, dropdowns) etc.,

  • @MillieM2018
    @MillieM2018 6 дней назад

    thanks, that is the exact example I want to do: get the filter from query string parameters and display filtered data

  • @gatishmehta2039
    @gatishmehta2039 6 дней назад

    Very helpful! Thankyou😊

  • @juliendesrosiers1637
    @juliendesrosiers1637 7 дней назад

    Thank you!

  • @_spot1843
    @_spot1843 7 дней назад

    What if I want to compile all models at once? Like, for relationship fields. Do I make an entire file just for compiling the models or the application will auto-compile all the models if each of them has an route handler?

  • @redo2694
    @redo2694 7 дней назад

    Ive watched many of your videos and they have helped me a lot in my Angular journey and i just wanted to say thank you for all the effort you put into making this content for us 😭👍🏻👍🏻

  • @nazmulislamananto
    @nazmulislamananto 8 дней назад

    I needed to add 'IdentitiesOnly yes' at the end of the config file for each of the hosts. Otherwise, everything went as told.

  • @thebocksters2756
    @thebocksters2756 8 дней назад

    What is this harry poter music on background...

  • @john_yeager
    @john_yeager 8 дней назад

    Anyway to attach CKeditor in my own textarea? And not create his own div

  • @shabihashmi1891
    @shabihashmi1891 9 дней назад

    Thankyou! Solve my problem

  • @jboconne
    @jboconne 9 дней назад

    HI, I liked your video of using radio buttons in Angular 17. I need to build a function that checks all radio buttons in a single column contained in a table. I will have a 'select all' radio button in the table header for three columns consisting of radio buttons. The table header radio button will be mutually exclusive for the three columns of the table. When clicking column 1 'select all' radio button, it selects all radio buttons in column 1 and unselects all previously selected radio buttons in column 2 and column 3. When clicking column 2 'select all' radio button, it selects all radio buttons in column 2 and unselects all previously selected radio buttons in column 1 and column 3. When clicking column 3 'select all' radio button, it selects all radio buttons in column 3 and unselects all previously selected radio buttons in column 1 and column 2. I have jQuery installed in my Angular app, so It can use it or plain vanilla JavaScript. I already have functionality to make each table row mutually exclusive for the three radio button columns so I expect that the 'select all' radio button when selected will inherit the same functionality for each table row. Is this something you have tried before or if not, could you make a tutorial using this functionality for me? Thanks so much. Jeff

  • @shantanushukla1178
    @shantanushukla1178 10 дней назад

    Thank you so much sir 🙏🙏🙏

  • @kira7mm
    @kira7mm 10 дней назад

    can't see your screen words ...They are soo smalll

    • @AyyazTech
      @AyyazTech 10 дней назад

      Sorry for that. can you please tell me that what exactly was too small ? vscode or browser's font ?

    • @kira7mm
      @kira7mm 10 дней назад

      @@AyyazTech Browser Font!

    • @AyyazTech
      @AyyazTech 9 дней назад

      @@kira7mm Oh okay. I am sorry about that. In future I will zoom the Browser font + vscode font as well so that It could be easy to read for the viewers. Thank you for pointing out this video.

  • @alishoaib3932
    @alishoaib3932 10 дней назад

    Its not a good approch to call API directly in component.You should create service for api call and then inject that service in ur component

  • @kiranmahajan172
    @kiranmahajan172 10 дней назад

    not the perfect way

  • @eduardointech
    @eduardointech 11 дней назад

    Thank you!

  • @khanriza
    @khanriza 11 дней назад

    The CLEANEST video on the subject. Cheers

  • @rabefialyjonathan3309
    @rabefialyjonathan3309 11 дней назад

    thanks , you helped me a lot

  • @mitterkit
    @mitterkit 11 дней назад

    17:40 toLocaleString takes 2 arguments. The first is the locale, the second are the options. As for the options, you are looking for: minimumFractionDigits doc.text(`Total Sales: $${this.dataService.totalSales.toLocaleString(undefined, {minimumFractionDigits: 2})} `, 10, yPos); // format a number with commas as thousands separators

  • @51Lucia1995
    @51Lucia1995 11 дней назад

    could you please show how this works for Angular 17 as well? That would be great.

  • @youssefrespo6325
    @youssefrespo6325 12 дней назад

    Thank you for this tutorial, excellent work.

  • @lembefuti
    @lembefuti 12 дней назад

    I've been using Hidemyacc to manage several accounts hassle-free. The distinct browser fingerprints make it easy to keep my accounts safe from bans and scrutiny.

  • @apumondal1946
    @apumondal1946 13 дней назад

    It's really helpful

  • @senthamarai_kannan.
    @senthamarai_kannan. 13 дней назад

    good one.

  • @AAJohnsonCODES-SKILLS
    @AAJohnsonCODES-SKILLS 14 дней назад

    Excellent.

  • @senthamarai_kannan.
    @senthamarai_kannan. 14 дней назад

    Without publishing i cannot use in another angular project? am i right ?

  • @ismaelkf
    @ismaelkf 15 дней назад

    what about react witha database?

  • @zona7822
    @zona7822 15 дней назад

    Thank you man your video help so much....... great job

  • @grootscreationz4271
    @grootscreationz4271 15 дней назад

    Thankyou very much

  • @rafaelmiralha5577
    @rafaelmiralha5577 16 дней назад

    thanks man, I'm a beginner in Angular it helps me a lot !!

  • @GuyGallant4321
    @GuyGallant4321 16 дней назад

    I liked your video. I have been generating pdf for the last 12 months. Everything works ok😀 Recently I upgraded to Angular 18, using standealone components, using lazy routed components. The generation of pdf still works. However when I try to access another web page in a different route, it cannot load the any other web pages. Somehow the URL has been modified. I suspect that Html2canvas modified the url?? Have you seen any problem that is similiar?

  • @GuyGallant4321
    @GuyGallant4321 16 дней назад

    I like your video. I am generating a pdf using very similar code in Angular 18. It has been working very well for the last 12 months. However for Angular 18 I converted to standalone components with lazy load. The generation of a pdf still works properly. The problem that occurs is that unloaded chunks cannnot be lazy loaded. This seems to be because the actual URL now reflects the url of where the pdf was created rather then the required domain url. I suspect that Html2Canvas is changing the URL somehow? Does this problem seem familiar?

  • @DigitalAdapt
    @DigitalAdapt 17 дней назад

    I deployed my Angular project with firebase CLI but when I navigate to the specific domain, I only see this : Welcome Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary! How to fix this issue. How to fixed this? Because I deployed this app following what you teach in project.

  • @MadarDoraeMon
    @MadarDoraeMon 17 дней назад

    lAZY loading is based on Module, what about lazy loading for the standalone component !:: in the routing and in the import array ! and i am thinking about the use cases , ! i means if creating the new application by default the application is standalone structure , so now onwards are the application is going to be standalone component only ! , i means what will be cases to use standalone and module !! and exporting the components and module, and libraries !! moreover i want to understand the application design !! this is my goal but i understand my own things , but i want to learn from the experts what there opinions on it ! and what angular says about !!

  • @MadarDoraeMon
    @MadarDoraeMon 17 дней назад

    If i was found you as my team leader or senior , definitely i will be on the top , but what i got the Leader who is converting components to application then application to libraries and so on !! , now i do not know what they are doing ! . i Founds so many things which were very wrong and applying in production Any tips for getting the Jobs !! having 2 years Exp and sitting at home unemployed from 9 Month is getting hard now ! i do not know what is going wrong , but taking a year to get a job is worst i mean totally worst it make thinking leaving IT behind and go back to previous work as plumber and electrician loosing hope as developer ! INSHA ALLAH KUCHH ACHHA HO !!

  • @MadarDoraeMon
    @MadarDoraeMon 17 дней назад

    32:20 will it be applicable for the shadow dom enabled component , ! or there again we need to copy past this scss

  • @MadarDoraeMon
    @MadarDoraeMon 17 дней назад

    The Problems is !!: I required , button on each page but for each componnet need import this !!, and i do dnot like this ! . Is there way for it !

  • @emmadurepos7513
    @emmadurepos7513 18 дней назад

    please add more tutorials