How to wait for an API call in canActivate auth guard in angular | Angular | Learn Smart Coding

[@DavidAddoteye]

Your video has saved me a lot of time. Thank you

[@learnsmartcoding]

I am glad you liked it. Don't forget to subscribe to my channel to get more videos!

[@petarcholakov9748]

Thank you for this video. I struggled with this issue for couple of hours, but it is now resolved. Thanks!

[@learnsmartcoding]

Glad it helped!

[@amirdelfan7866]

this might not be enough when the backend api is too slow. you might want to add a filter after the pipe to check if the current user is undefined other wise it could happen that your code concludes false negatives

[@learnsmartcoding]

Hi Amir, Thank you for taking the time to watch this video and provide your suggestions. This video is just an example of how to wait for the backend api call-in guard. Also, the route gets activated only after receiving a response from the invoked api call irrespective of how long it takes to finiah. In case of api failure, the result will be considered false, and the route will be rejected.

[@echelon3410]

Thank you so much for your help !

[@learnsmartcoding]

I'm glad you liked it and it was useful.

[@davidc0812]

thanks dude. this was helpful.

[@renithkumar105]

You saved me, this is very useful

[@learnsmartcoding]

Glad to hear that!

[@tannynogales7080]

Wow, that was very useful.. Can you please explain the same with interceptors?

[@learnsmartcoding]

Thank you for watching the video. The concept in this video is to wait for data and check some permissions before we allow users to go to different routes. Interceptor is to intercept the outgoing request and do some action, both are two different topics. I will cover some more HTTP Interceptor videos. kzbin.info/www/bejne/fWWlaX-odrBmmtk

[@dennispitadeniya2479]

thanks for this, really helpful

[@learnsmartcoding]

Glad to hear it!

[@ricardoalvespaula]

Even using pipe, the guard do not wait for the api call here. Any ideas?

[@learnsmartcoding]

Hi Ricardo, Thank you for trying it out. Actually, Guard will wait for an API. Please check API that you are call or any other function that you are calling is observable. Also, this is now changed to function from Angular 16+, I will provide new videos soon on this part with latest code. Happy coding!

[@rezanrasoul2286]

how can I resolve that if I send the jwt tooken direct from the backend as httpOnly?

[@learnsmartcoding]

Hi Rezan, Thank you for posting your question. This video is all about how you can wait for a API call to complete before a route is activated. Meaning, the response from API is required to determine whether route can be activated or not. sending jwt token on a outgoing API call is handled by http interceptor. Please explain your question little bit more to understand your requirment so that I can help answering it. Thanks, LearnSmartCoding

[@rezanrasoul2286]

@@learnsmartcoding Thank you for the reply. In the example, you are fetching all the user, so you are using the Map Operator, but I want to make the guard wait for the response. If the login information is correct, it will redirect it to the control panel.

[@learnsmartcoding]

Hi Rezan, I gave just an example of how to wait for an api call. Basically, in my example, the guard will wait until the api is sending a response (as per your need) once you receive the response, you can validate and decide whether to redirect to a particular route or allow it to go to the requested route. Based on your comment, I see you are trying to send credentials to an api, and checking the sent credentials are right or wrong and then put them to login screen. Is that what you are trying to do?

[@rezanrasoul2286]

@@learnsmartcoding Yes i solved after I tried and saw your video carefully thanks a lot, but can you make a video how can we send a file and json data together, fx. in register form, I want to send a profile picture and json data from angular material dialog in same request to the sever

[@learnsmartcoding]

Hi Rezan, I just published the video you asked for. Please take a look at the recent two videos for more details. Hope you will like it! Regards, LearnSmartCoding

[@giovaneflorek4467]

valeu indianinho, salvou a family

[@elgrego3849]

thanks bro

[@gunasekaran1217]

Hi, Awesome one. Can i get the source code ?

[@learnsmartcoding]

Thanks for watching. The source code details are mentioned in the description. Also, all the source code are available at github.com/learnsmartcoding

[@umeshshelke725]

@@learnsmartcoding I am not able to find the code there . could you please share exact link ?

[@learnsmartcoding]

@Umesh - Thanks for letting me know about the missing code. I just updated the repo in Github. Latest code is available at github.com/learnsmartcoding/angular-beginners-course-shopping-app The specific code you are looking at is here github.com/learnsmartcoding/angular-beginners-course-shopping-app/tree/main/src/app/core/guards I would suggest to download the entire branch and explore the working feature. Please let me know if you have any questions. Thanks, Learn Smart Coding

[@umeshshelke725]

@@learnsmartcoding brother can you please make video on session expire warning pop-up in angular and .core ?

[@learnsmartcoding]

@@umeshshelke725 - sure, noted. Will publish this video shortly. Are you intrested in Azure?

[@triloksingh8596]

Every time api call while create product . How to solve Every time call api issue like permission api

[@learnsmartcoding]

Hi Trilok, I would like to help you resolve your need. Please help me understand better what exactly you need or what issue you are facing.

[@triloksingh8596]

@@learnsmartcoding unit testing and state management are very confusing topics. Please make any video