My name is Fanis Prodromou, I am a Google Developer Expert for Angular and a Senior Front End Developer. In this channel, I am sharing my Angular knowledge for all skill levels.
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).
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?
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)
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?
*Code Update* When I handled the UpdateComplete action at ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Az5bNV1Vthc.html 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; });
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.
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.
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 :)
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 !!! !!!
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.
Angular Content Projection: Everything You Need to Know ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-c9b7lcjxUHo.html Angular ng-template: The Complete Guide to ng-template ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eC3S9Mv0zU8.html
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!?
> 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
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.
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.
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!🥰
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);
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.
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.
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?
Nice video, awesome, only one thing is missing in the whole video. If you could explain how to filter observable data by entering some value in input files and use the async pipe. This means filtering an observable data without a subscription. Hope I could helped in understanding. 1. input field -> accepts user input. 2. Observable data gets filtered and displayed on a browser with async pipe in html without any subscription in ts file.
