Get to Know the new Angular Output
11:28
Angular Config With JSON Files
12:28
2 жыл бұрын
Angular Standalone Components
12:35
2 жыл бұрын
Пікірлер
@besretube
@besretube 11 күн бұрын
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 17 күн бұрын
Como conecto esos componentes a un formulario reactivo ?
@Aliana9603
@Aliana9603 25 күн бұрын
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 28 күн бұрын
perfect
@rythmrana1987
@rythmrana1987 28 күн бұрын
which version of angular is this
@CodeShotsWithProfanis
@CodeShotsWithProfanis 28 күн бұрын
I am doing that with Angular 18 but it's also compatible with older versions.
@OlehBiblyi
@OlehBiblyi Ай бұрын
Thank you, I didn't know about this
@GaryAnthonyScottonGplus
@GaryAnthonyScottonGplus Ай бұрын
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 17 күн бұрын
Inline Parameters for VSCode
@rkrao8582
@rkrao8582 Ай бұрын
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 Ай бұрын
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 Ай бұрын
My manager Manish Kumawat is your exact indian version. Super humble and knowledgeable.
@gayathrir1988
@gayathrir1988 Ай бұрын
useful
@akschauhan7601
@akschauhan7601 Ай бұрын
Nice
@ScubaShneve
@ScubaShneve Ай бұрын
I'm using standalone components and I'm getting this error, "NullInjectorError: NullInjectorError: No provider for _FormGroupDirective!".
@CodeShotsWithProfanis
@CodeShotsWithProfanis Ай бұрын
I will have a look at this error and I'll publish video. Thanks!
@yusufkebbe2909
@yusufkebbe2909 2 ай бұрын
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 Ай бұрын
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).
@yusufkebbe2909
@yusufkebbe2909 2 ай бұрын
Amazing video you are angular hero
@zura8635
@zura8635 2 ай бұрын
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 Ай бұрын
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 Ай бұрын
@@CodeShotsWithProfanis thanks for your feedback ❤️
@manthanmachhi8166
@manthanmachhi8166 2 ай бұрын
Smooth one :) Liked it
@rkrao8582
@rkrao8582 2 ай бұрын
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 Ай бұрын
In fact, we are sending the value of a signal to the child component.
@rkrao8582
@rkrao8582 2 ай бұрын
Great information. Do you have plans on adding write ups somewhere on Medium or some other blog?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 2 ай бұрын
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 2 ай бұрын
*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 2 ай бұрын
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 2 ай бұрын
Amazing! Thank you very much!
@bantooshgaming9074
@bantooshgaming9074 3 ай бұрын
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 3 ай бұрын
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 3 ай бұрын
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 3 ай бұрын
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 3 ай бұрын
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 3 ай бұрын
Thanks for this. Indeed, the API changed
@camilojosepaterninapertuz1133
@camilojosepaterninapertuz1133 3 ай бұрын
What if i wanna markAsDiry each invalid inputs? How could i do this?
@eduardodavila5213
@eduardodavila5213 3 ай бұрын
Thank you for your content, straight to the point, just what I needed without wasting time, Liked! subscribed!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 3 ай бұрын
Glad you liked it! :)
@ellsonmendesYT
@ellsonmendesYT 3 ай бұрын
as always delivering great stuff, thanks for the effort and time taken to share with us!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 3 ай бұрын
Much appreciated!
@Hanumanthareddy97
@Hanumanthareddy97 3 ай бұрын
Thank you so much 🌈 exactly this is similar to my task
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
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 4 ай бұрын
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 4 ай бұрын
> 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 4 ай бұрын
Thanks for the video mate!
@ANJANALAKMAL
@ANJANALAKMAL 4 ай бұрын
Great explanation. Thanks
@santiagobruno_t1581
@santiagobruno_t1581 4 ай бұрын
thanks!!!!
@invictuz4803
@invictuz4803 4 ай бұрын
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 4 ай бұрын
thanks
@dikendrasiwakotirowansiwak224
@dikendrasiwakotirowansiwak224 4 ай бұрын
Why create different workspace if you can create multiple apps within projects directory in a single workspace ?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
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 4 ай бұрын
hi, i have 1 question. how can i keep this api key secure. as application is deployed and its accessible to user.
@joaobentocandidobezerra6486
@joaobentocandidobezerra6486 4 ай бұрын
The first one that gives an actual full view example on signals and http request. Was looking for something like this the whole day, thank you for that!🥰
@giorgoskontis7185
@giorgoskontis7185 4 ай бұрын
Thank you mate!
@pedrofernandes2005
@pedrofernandes2005 4 ай бұрын
outputFromObservable is really nice and useful!
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
Some corrections: In the parent component, we use the `viewchild` to query the child component. The child component might be undefined and that's why we use a condition. Since we know that the child component will be rendered, we can skip the if condition by simply marking the viewchild as required. The code will become: childComponentRef = viewChild. *required* (ChildComponent);
@HoNow222
@HoNow222 4 ай бұрын
just a question: there is any written documentation about this and the other new angular stuff?
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
You can find the docs here: angular.dev/guide/components/output-fn
@HoNow222
@HoNow222 4 ай бұрын
@@CodeShotsWithProfanis thanks
@HoNow222
@HoNow222 4 ай бұрын
this is becoming a little bit too complex
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
Are referring to the outputToObservable and outputFromObservable?
@HoNow222
@HoNow222 4 ай бұрын
@@CodeShotsWithProfanis both..
@CodeShotsWithProfanis
@CodeShotsWithProfanis 4 ай бұрын
In most of the cases we would just have to use the output. In my opinion, the output API is simpler compared to the output decorator. And it's aligned with the signal inputs. The other two utility functions are great tools if we have such a need.
@HoNow222
@HoNow222 4 ай бұрын
@@CodeShotsWithProfanis thank you! just a question: there is any written documentation about this and the other new angular stuff?
@Niachan666
@Niachan666 4 ай бұрын
Good
@OlehBiblyi
@OlehBiblyi 4 ай бұрын
Thanks for the explanation.
@matheusjordan6031
@matheusjordan6031 4 ай бұрын
very helpfull
@leiayuri
@leiayuri 4 ай бұрын
Hi, would you know if I have a component A which extends a directive B. And in comp. a I am in injecting a service A with inject and inside of the constructor I am also calling super and injecting the service A. The question is, am I creating 2 instances os service A? Thanks in advance.
@manmohanchauhanmusicbox
@manmohanchauhanmusicbox 4 ай бұрын
Nice explanation, Which plug-in you are using for Drawing over the VS code ?
@teolag
@teolag 5 ай бұрын
I agree with most others here. Fantastic presentation and a topic that is really difficult to find information about. Hope you will see this and have a good answer. The way you did with formGroupName works fine if the nested component is placed in the root of the form. But if we wrap the nested component in another element, like <div formGroupName='profile'><app-address formFieldName="address" /></div> the profile group will be ignored and the address form group won't be found. Do you know any solution to this issue?