This is exactly what I was looked for .... I have same problem with scrolling in my app. I feel like everything is so complicated in Angular LOL
@CodeShotsWithProfanis16 күн бұрын
Out of curiosity, how does a restore scrolling implementation looks like to other frameworks?
@zzzbyyy15 күн бұрын
@@CodeShotsWithProfanis Well that's a good question. I have never done this in other frameworks that's why probably thought it's gonna be easy. In reality it's tricky ...
@zzzbyyy15 күн бұрын
is this solution will work when I use this.router.navigate() ?
@CodeShotsWithProfanis15 күн бұрын
@@zzzbyyy yes indeed. It's relatively straight forward with static data, but tricky with dynamic data. I am not sure either how the implementation looks like in other frameworks, but I like that we do not have to manually track the scrolling position. We only need to fetch and use it.
@hodapro339423 күн бұрын
can i use this in angular 16 ?
@CodeShotsWithProfanis23 күн бұрын
yeah! :)
@oggenableАй бұрын
I'm on Angular 18, so having to adjust the code a bit. I'm getting "Error: Dynamic require of "config.json" is not supported" in the browser console when trying to load the config.json file.
@risoledoceАй бұрын
Why did you use firstValueFrom at 12:00? How would I handle it if it were an Observable? Would I need to use a subscribe?
@ddefrancescoАй бұрын
Hi. great video, thx. Does it comply even Angular 18? I'm very new to Angular ecosystem, and search for a procedure to deploy on k8s an angular 18 app along with a Configmap...I followed this (great, in my opinion) tutorial but I'm stuck when I issue ng serve after configuration of EnvironmentPlugin. it keeps yielding 'Error: Schema validation failed with the following errors: Data path "" must have required property 'main'.' Could you advice something: I'm sure that it's just my ignorance of Angular. Ps shed some light... Regards
@CodeShotsWithProfanisАй бұрын
The video demostrates a solution with webPack but angular 18 uses esBuild. I plan to create a video and explain the same using the latest angular versions
@alper_mulayim2 ай бұрын
this is the best explanation Profanis, thank you!
@CodeShotsWithProfanis2 ай бұрын
Glad you liked it :)
@ShivaniShanbhag-j6m2 ай бұрын
Thanks a lot for the video, I am struggling while testing the defer block, the problem is fixture.getDeferBlocks() always returns an empty array, this is when i set deferBlockBehavior: DeferBlockBehavior.Manual
@SebastianDra2 ай бұрын
Great Tutorial! Perhaps you can create a Tutorial how to solve Daily problems with redux devtools / add logging / find bugs etc?
@ZeroInfinityVideo2 ай бұрын
For some reason, it is not working for me. Angular 17 app
@praktycznewskazowki67332 ай бұрын
Wtf? You are using directive like normal component?
@HarshitDwivedi-p8m2 ай бұрын
thanks for great demo 😊. I have one doubt. will this implementation work with Zoneless architecture or with earlier version too?
@dayronalfaro94613 ай бұрын
This is the video that I was looking for, thx 2 years later
@besretube3 ай бұрын
I don't how I can express what I feel right now, you won't understand how much your video helped me after being stuck for more than 24 hours! thanks a lot!
@urtaav6393 ай бұрын
Como conecto esos componentes a un formulario reactivo ?
@Aliana96034 ай бұрын
This is an excellent way of explaining these concepts and their differences! Thank you for the efforts you have put in making this so clear to understand ❤
@rythmrana19874 ай бұрын
perfect
@rythmrana19874 ай бұрын
which version of angular is this
@CodeShotsWithProfanis4 ай бұрын
I am doing that with Angular 18 but it's also compatible with older versions.
@OlehBiblyi4 ай бұрын
Thank you, I didn't know about this
@GaryAnthonyScottonGplus4 ай бұрын
Great video as always, I have never used ngxs before only ngrx. 2 quick questions: In your experience what would make you choose one over the other? ngrx / ngxs What vs code plug-in shows the function parameters names, as I would find it very useful? I hope this makes sense😂 I.e createSelector(selectors: ..., projector: ...)...
@neduj3763 ай бұрын
Inline Parameters for VSCode
@CodeShotsWithProfanis3 ай бұрын
For the VSCode, you can set these properties in your JSON file // This displays the parameter names "typescript.inlayHints.parameterNames.enabled": "all", // This displays the variable types "typescript.inlayHints.variableTypes.enabled": true,
@CodeShotsWithProfanis3 ай бұрын
As of the NGRX/NGXS, I find the NGXS easier to use and has less boilerplate code. I have tried NGXS from small to enterprise applications and it fits great on every occasion :)
@rkrao85824 ай бұрын
This is great and I liked it. One question though! Is it okay to clutter the route file with logic? We also need to account for testing in that case I guess.
@CodeShotsWithProfanis4 ай бұрын
That's a good point! Like we do with resolvers and guards, I would also have that function in a separate file. Like you said, to unclutter the route file
@KartikKKalia4 ай бұрын
My manager Manish Kumawat is your exact indian version. Super humble and knowledgeable.
@gayathrir19884 ай бұрын
useful
@akschauhan76014 ай бұрын
Nice
@ScubaShneve5 ай бұрын
I'm using standalone components and I'm getting this error, "NullInjectorError: NullInjectorError: No provider for _FormGroupDirective!".
@CodeShotsWithProfanis4 ай бұрын
I will have a look at this error and I'll publish video. Thanks!
@yusufs_solos5 ай бұрын
Does this library works in React or Vue for example ? , becasue I'm working on web components, its little bit complicated, storybook stencil etc.
@CodeShotsWithProfanis5 ай бұрын
The components which are part of this library won't work in React or Vue. We would need to work with Web Components to have components working on any framework. We can convert an Angular component into a Web Component. For more read this angular.dev/guide/elements#using-custom-elements I had a bit of a hard time though making a custom element working in a React app. I am not sure if things have changed since I tried that (it was something like 1.5 years ago).
@yusufs_solos5 ай бұрын
Amazing video you are angular hero
@zura86355 ай бұрын
Great Video! However I have a question... What do you think about sending /get-profile request to the API and storing user data using behaviour subject? Wouldn't that be as good?
@CodeShotsWithProfanis5 ай бұрын
Yes, that would work nicely as well. In fact, you can interact with a behaviourSubject (or a signal ;) ) and have this in sync with your storage (localStorage or sessionStorage)
@zura86355 ай бұрын
@@CodeShotsWithProfanis thanks for your feedback ❤️
@manthanmachhi81665 ай бұрын
Smooth one :) Liked it
@rkrao85825 ай бұрын
Hi Great video. So is it okay to send Signal as input to child component. Are there any gotchas to be keep in mind if I do so? For instance here in your example Say parent component has users as signal and sending down to input as signal?
@CodeShotsWithProfanis5 ай бұрын
In fact, we are sending the value of a signal to the child component.
@rkrao85825 ай бұрын
Great information. Do you have plans on adding write ups somewhere on Medium or some other blog?
@CodeShotsWithProfanis5 ай бұрын
Glad you liked it! I write my articles in Angular Love angular.love/en/author/fanis-prodromou. Hmm, perhaps I could write one for Signal Queries too 🤔
@CodeShotsWithProfanis6 ай бұрын
*Code Update* When I handled the UpdateComplete action at kzbin.info/www/bejne/d6uYk4GMZrunnsU I got fooled by Copilot and accepted the wrong code :( When we are dealing with the state, we should NOT mutate the state. We should produce a new state instead. This is the correct code const updatedTodoItems = state.todos.map((item) => { if (item.id === id) { return { ...item, completed: !item.completed, }; } return item; });
@zaferdemir46806 ай бұрын
I've always found state management complicated. I also know everyone hates it. NGXS does not appear to have eliminated this complexity.I prefer to use @ngrx/signals and I am very satisfied. Thank you for showing me that I was not wrong in my choice.
@sparksGTO6 ай бұрын
Amazing! Thank you very much!
@bantooshgaming90746 ай бұрын
Thankyou very much for the very informative video. This is what I have been looking for. But I have a question I have the same setup I am using the shared library in different workspaces. Locally everything works fine and I can see the shared library component in different workspaces but when deplying it "it doesnt work". It gives the error" NG0203: inject() must be called from an injection context such as a constructor," Could you please let me know if you have any soluition to this problem. I am using angular v18 using standalone components.
@Kestrel19716 ай бұрын
I'm new to Angular and I've been banging my head against the wall for about three days trying to figure this out; this made it crystal clear. Fantastic video. Thanks :)
@mohammeddarwish78586 ай бұрын
this is great, but how does this work when I'm reading from json file ? I mean how to save the component : () => ... and read it from json config file , if we save it json, when we return back the json then the import will be string !!! !!!
@CodeShotsWithProfanis6 ай бұрын
I am not sure which flow you are following to persist/get the JSON, but based on what you described, it seems to me that you might need to JSON.parse your JSON.
@Brendan2Alexander6 ай бұрын
Very helpful. Tho was just implementing ThrowError and it is now changed so it has to be like this: ThrowError(()=> err). But otherwise the same
@CodeShotsWithProfanis6 ай бұрын
Thanks for this. Indeed, the API changed
@camilojosepaterninapertuz11336 ай бұрын
What if i wanna markAsDiry each invalid inputs? How could i do this?
@eduardodavila52136 ай бұрын
Thank you for your content, straight to the point, just what I needed without wasting time, Liked! subscribed!
@CodeShotsWithProfanis6 ай бұрын
Glad you liked it! :)
@ellsonmendesYT6 ай бұрын
as always delivering great stuff, thanks for the effort and time taken to share with us!
@CodeShotsWithProfanis6 ай бұрын
Much appreciated!
@Hanumanthareddy976 ай бұрын
Thank you so much 🌈 exactly this is similar to my task
@CodeShotsWithProfanis7 ай бұрын
Angular Content Projection: Everything You Need to Know kzbin.info/www/bejne/mWrFaJ-Zn92IftE Angular ng-template: The Complete Guide to ng-template kzbin.info/www/bejne/m3SWhGyDq5Wti5o
@mikhailratner46497 ай бұрын
Interesting...I would never go to such lengths as you showed in the version prior to v18. I would just create a second Input and have an if else statement. However, the v18 version actually looks quite nice. If I understood corrctly, the actual content is by default linked to ng-content and Angular does the rest, which makes it much more concise. I wonder if there are better uses / examples which are more closely to real life. E.g. would it make sense to have some loading spinner as default content!?
@CodeShotsWithProfanis7 ай бұрын
> the actual content is by default linked to ng-content and Angular does the rest Yeah, that's correct. Some real-life scenarios could be: - You can have an image placeholder if content is missing - You can have some default buttons (call to actions) if content is missing
@madpwnz7 ай бұрын
Thanks for the video mate!
@ANJANALAKMAL7 ай бұрын
Great explanation. Thanks
@santiagobruno_t15817 ай бұрын
thanks!!!!
@invictuz48037 ай бұрын
It looks like formGroupName is an actual Angular directive now which automatically does what the ngOnInit is doing in this video, so you don't have to manually assign the child FormGroup instance. You do have to use ViewProvider in the child to provide ControlContainer to the view for the formGroupName directive to work within the child.
@podpison32687 ай бұрын
thanks
@dikendrasiwakotirowansiwak2247 ай бұрын
Why create different workspace if you can create multiple apps within projects directory in a single workspace ?
@CodeShotsWithProfanis7 ай бұрын
There are cases where companies decide not to have a mono-repo. A case of that is that they do not want to share with outsource companies their core business.
@alinisar25687 ай бұрын
hi, i have 1 question. how can i keep this api key secure. as application is deployed and its accessible to user.