Get to Know the new Angular Output
11:28
Angular Config With JSON Files
12:28
2 жыл бұрын
Angular Standalone Components
12:35
2 жыл бұрын
Пікірлер
@zzzbyyy
@zzzbyyy 16 күн бұрын
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
@CodeShotsWithProfanis
@CodeShotsWithProfanis 16 күн бұрын
Out of curiosity, how does a restore scrolling implementation looks like to other frameworks?
@zzzbyyy
@zzzbyyy 15 күн бұрын
@@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 ...
@zzzbyyy
@zzzbyyy 15 күн бұрын
is this solution will work when I use this.router.navigate() ?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 15 күн бұрын
​@@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.
@hodapro3394
@hodapro3394 23 күн бұрын
can i use this in angular 16 ?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 23 күн бұрын
yeah! :)
@oggenable
@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
@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
@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
@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_mulayim
@alper_mulayim 2 ай бұрын
this is the best explanation Profanis, thank you!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 2 ай бұрын
Glad you liked it :)
@ShivaniShanbhag-j6m
@ShivaniShanbhag-j6m 2 ай бұрын
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
@SebastianDra
@SebastianDra 2 ай бұрын
Great Tutorial! Perhaps you can create a Tutorial how to solve Daily problems with redux devtools / add logging / find bugs etc?
@ZeroInfinityVideo
@ZeroInfinityVideo 2 ай бұрын
For some reason, it is not working for me. Angular 17 app
@praktycznewskazowki6733
@praktycznewskazowki6733 2 ай бұрын
Wtf? You are using directive like normal component?
@HarshitDwivedi-p8m
@HarshitDwivedi-p8m 2 ай бұрын
thanks for great demo 😊. I have one doubt. will this implementation work with Zoneless architecture or with earlier version too?
@dayronalfaro9461
@dayronalfaro9461 3 ай бұрын
This is the video that I was looking for, thx 2 years later
@besretube
@besretube 3 ай бұрын
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!
@urtaav639
@urtaav639 3 ай бұрын
Como conecto esos componentes a un formulario reactivo ?
@Aliana9603
@Aliana9603 4 ай бұрын
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 ❤
@rythmrana1987
@rythmrana1987 4 ай бұрын
perfect
@rythmrana1987
@rythmrana1987 4 ай бұрын
which version of angular is this
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
I am doing that with Angular 18 but it's also compatible with older versions.
@OlehBiblyi
@OlehBiblyi 4 ай бұрын
Thank you, I didn't know about this
@GaryAnthonyScottonGplus
@GaryAnthonyScottonGplus 4 ай бұрын
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: ...)...
@neduj376
@neduj376 3 ай бұрын
Inline Parameters for VSCode
@CodeShotsWithProfanis
@CodeShotsWithProfanis 3 ай бұрын
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,
@CodeShotsWithProfanis
@CodeShotsWithProfanis 3 ай бұрын
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 :)
@rkrao8582
@rkrao8582 4 ай бұрын
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.
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
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
@KartikKKalia
@KartikKKalia 4 ай бұрын
My manager Manish Kumawat is your exact indian version. Super humble and knowledgeable.
@gayathrir1988
@gayathrir1988 4 ай бұрын
useful
@akschauhan7601
@akschauhan7601 4 ай бұрын
Nice
@ScubaShneve
@ScubaShneve 5 ай бұрын
I'm using standalone components and I'm getting this error, "NullInjectorError: NullInjectorError: No provider for _FormGroupDirective!".
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
I will have a look at this error and I'll publish video. Thanks!
@yusufs_solos
@yusufs_solos 5 ай бұрын
Does this library works in React or Vue for example ? , becasue I'm working on web components, its little bit complicated, storybook stencil etc.
@CodeShotsWithProfanis
@CodeShotsWithProfanis 5 ай бұрын
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_solos
@yusufs_solos 5 ай бұрын
Amazing video you are angular hero
@zura8635
@zura8635 5 ай бұрын
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?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 5 ай бұрын
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)
@zura8635
@zura8635 5 ай бұрын
@@CodeShotsWithProfanis thanks for your feedback ❤️
@manthanmachhi8166
@manthanmachhi8166 5 ай бұрын
Smooth one :) Liked it
@rkrao8582
@rkrao8582 5 ай бұрын
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?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 5 ай бұрын
In fact, we are sending the value of a signal to the child component.
@rkrao8582
@rkrao8582 5 ай бұрын
Great information. Do you have plans on adding write ups somewhere on Medium or some other blog?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 5 ай бұрын
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 🤔
@CodeShotsWithProfanis
@CodeShotsWithProfanis 6 ай бұрын
*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; });
@zaferdemir4680
@zaferdemir4680 6 ай бұрын
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.
@sparksGTO
@sparksGTO 6 ай бұрын
Amazing! Thank you very much!
@bantooshgaming9074
@bantooshgaming9074 6 ай бұрын
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.
@Kestrel1971
@Kestrel1971 6 ай бұрын
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 :)
@mohammeddarwish7858
@mohammeddarwish7858 6 ай бұрын
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 !!! !!!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 6 ай бұрын
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.
@Brendan2Alexander
@Brendan2Alexander 6 ай бұрын
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
@CodeShotsWithProfanis
@CodeShotsWithProfanis 6 ай бұрын
Thanks for this. Indeed, the API changed
@camilojosepaterninapertuz1133
@camilojosepaterninapertuz1133 6 ай бұрын
What if i wanna markAsDiry each invalid inputs? How could i do this?
@eduardodavila5213
@eduardodavila5213 6 ай бұрын
Thank you for your content, straight to the point, just what I needed without wasting time, Liked! subscribed!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 6 ай бұрын
Glad you liked it! :)
@ellsonmendesYT
@ellsonmendesYT 6 ай бұрын
as always delivering great stuff, thanks for the effort and time taken to share with us!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 6 ай бұрын
Much appreciated!
@Hanumanthareddy97
@Hanumanthareddy97 6 ай бұрын
Thank you so much 🌈 exactly this is similar to my task
@CodeShotsWithProfanis
@CodeShotsWithProfanis 7 ай бұрын
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
@mikhailratner4649
@mikhailratner4649 7 ай бұрын
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!?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 7 ай бұрын
> 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
@madpwnz
@madpwnz 7 ай бұрын
Thanks for the video mate!
@ANJANALAKMAL
@ANJANALAKMAL 7 ай бұрын
Great explanation. Thanks
@santiagobruno_t1581
@santiagobruno_t1581 7 ай бұрын
thanks!!!!
@invictuz4803
@invictuz4803 7 ай бұрын
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.
@podpison3268
@podpison3268 7 ай бұрын
thanks
@dikendrasiwakotirowansiwak224
@dikendrasiwakotirowansiwak224 7 ай бұрын
Why create different workspace if you can create multiple apps within projects directory in a single workspace ?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 7 ай бұрын
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.
@alinisar2568
@alinisar2568 7 ай бұрын
hi, i have 1 question. how can i keep this api key secure. as application is deployed and its accessible to user.