Master Angular Component Communication | Input, Output, ViewChild, Subject, Query Params

Added: 2026-05-13

[00:00:02]Fine.

[00:00:03]So, Angular logical scenarios and problem solving. Now, with this series I'm taking some interview questions also and real-time project scenarios also.

[00:00:11]Now, when you work on the real-time projects or in if you focus on the interview also, so component communication is very famous question.

[00:00:19]So, with this they want to check how you will pass the data between one component to another component, right? So, that logic they will check. They want to check your RXJS also. Okay, do you know the subject and behavior subject or replay subject? How does they work?

[00:00:33]Right? Again, routing also because from one component when you navigate to another component, you can pass the data with the query parameter also, right?

[00:00:40]So, various ways are there how you access or how you pass the data from one component to another component based on the relation. Okay? So, I'm just taking an example of the existing project.

[00:00:52]Now, in the existing project once I log in Just a minute.

[00:01:07]Sorry. Okay. So, I'm logging as this one email ID 112233.

[00:01:12]Now, let me show you the login component.

[00:01:15]So, once user log in, I'm we are storing the data into local storage.

[00:01:21]That is login.

[00:01:24]Okay. So, once we log in, we are storing the data into the local storage and wherever we need the logged in data, right? So, in user service, we have a user service which is common and integrated everywhere.

[00:01:37]So, in user service we have created a variable and there on the user service initialization we are reading the data and storing it over here. So, overall application wherever you need the logged in user data, we are accessing like that.

[00:01:50]But, instead of this login is happening in one component and let's immediately after that in another component also you need the logged in data. So, this is one way to do it. You can create a normal variable in your service and then you can read the data into another component by accessing the service or you can store the data into your behavior subject also. So, so many applications are there. Means again, it varies to different different project that someone will store the logged in data into service kind of like this or they will create a function and in which will return the logged in user data or they might store the logged in user data into behavior subject also, right? Why behavior subject? Because it doesn't matter the component was there at the present at the moment or not, it should receive the data, right? So, what we can do? In my this service, I'm creating a uh log sub behavior subject to store the logged in data.

[00:02:43]logged user. I'm adding a name like behavior subject so that we can identify.

[00:02:54]behavior subject What type of data I'm going to store?

[00:02:57]So, I have created class for it so that this type of data we are going to store.

[00:03:02]New behavior subject. So, when we talk about behavior subject like we can do the initialization.

[00:03:08]user model Right? It needs that initialization.

[00:03:13]So or now it's a class, right? So, let's provide a new user model.

[00:03:24]Okay? So, I'm just initializing my behavior subject.

[00:03:27]Now, when you log in, immediately once you get the login data in result.data, you get the actual logged in data. So, that you will store into your behavior subject. So, this.

[00:03:39]your user service.

[00:03:41]logged user behavior subject.next and you will store the logged in user data. So, res.data I'm storing it over here. So, once user log in the logged in user data you are storing into the behavior subject.

[00:03:54]Now, so many times when you are in the interview, they are asking you question he after login you are getting the token. Where you will store that token?

[00:04:02]So, we answer like session storage or local storage. Sometimes we say cookie also. Still, they won't be satisfied.

[00:04:07]So, if they are not satisfied with these three way, you can say he I can store that in a behavior subject or subject.

[00:04:13]And whenever I need the data, I will listen to it and then I will use it.

[00:04:17]Right? Because we are working on the browser technology. We have to store it somewhere. Either on your code level or on the browser level. Somewhere you need to store.

[00:04:26]Right? So, this is also one of the ways how you will store the data.

[00:04:31]Okay? Now, after the login I'm storing the data into my behavior subject. Now, let's say in header component, that is where my navbar is.

[00:04:40]So, in my header component, here I have to show the logged in user data.

[00:04:44]Currently, I have done that with that variable. So, in header component you can see on the page load I'm reading the local storage data. Means that and I'm putting it over here. So, instead of this now, I can access directly the subject behavior subject what I did. Right? So, user service is already injected over here. So, here what I will do this.user service.my behavior subject.

[00:05:12]dot subscribe round bracket result. What type of data I have stored, I know. User model.

[00:05:22]And that I will store into this variable over here.

[00:05:29]is equal to res.

[00:05:31]I will add debugger everywhere so that we can understand the flow.

[00:05:35]Here.

[00:05:36]Then after login also I'm adding a debugger.

[00:05:41]Save.

[00:05:43]Let's save.

[00:05:46]Let's check.

[00:05:49]So, farmer one 112233.

[00:05:53]Let's check it now.

[00:05:56]Let me make it in line.

[00:05:59]So, on click of login, API call will happen.

[00:06:03]Wrong credential. Why?

[00:06:10]Oh, wait. It is going local. Let me change it to the deployed one.

[00:06:17]Local API is not running so I'm using the online now.

[00:06:25]So farmer one 112233.

[00:06:34]I will enable debugger on click of login.

[00:06:37]So, I got the response. So, if you check the res, we got data over here, the logged in user data. Now, that whole data I'm storing into my behavior subject by using next property. So, once you continue immediately you can see in header component subscribe got executed. So, from login component you store data.

[00:06:55]Means see, it's a component communication. Something is happening in login component as soon as that event trigger, you want to notify header component that user is logged in. So, see in the login component you stored some data. Now, in the header component you are able to read that data.

[00:07:12]Right?

[00:07:13]So, immediately this logged in user data is visible.

[00:07:16]So, this is one way of component communication. Now, the login component and the header component doesn't had any relation. They were not parent and child.

[00:07:25]Guys, don't use this.

[00:07:29]Okay? So, my header component and the login component were not having any parent-child relationship. So, whenever you don't have parent-child relationship, so what you do? You can take help of subject and behavior subject. Again, the based on the scenario. Like if you need to access the data when it was emitted, you will go for a subject. If you need uh it should maintain the history also like after some time your component is coming to the DOM, still it should receive the data, you go for a behavior subject, right? The basic difference between subject and behavior subject.

[00:07:58]According to the scenario, we use it.

[00:08:00]Right? So, this is one way.

[00:08:02]Now, next one will be Let me go to farmer component.

[00:08:09]Sorry.

[00:08:11]Products.

[00:08:14]Wait.

[00:08:16]I'm logged in, right?

[00:08:18]Something is wrong.

[00:08:19]I did the log out or what?

[00:08:27]Farmer one 112233.

[00:08:30]Because earlier the test was farmer product. Okay.

[00:08:36]Now, here Okay? So, now once user create successful product, okay? We have to show some model pop-up or let's say some alert box we have to show. Normally, we go for that alert box. So, instead of alert box, we can create a reusable component and there we can show something uh you know, bootstrap alert box something.

[00:08:57]So, bootstrap Where is bootstrap alert?

[00:09:12]Okay.

[00:09:19]Okay? Now, whenever you do the API call, either API call is success or error, we have to show whatever the uh alert or the success messages, right?

[00:09:28]So, now currently we have used Let me see.

[00:09:33]Farmer product.

[00:09:41]Okay? So, see. We are using the normal alert box. So, instead of this normal alert box, what I want, I want to show this alert box where somewhere over here after uh above somewhere place we will find out and here we have to show that you whatever the API call message is there. A product was successfully created or there was some warning or API failed something, right? So, we create a reusable component, okay?

[00:10:05]Let's create a quickly. This is my alert box.

[00:10:10]So, over here reusable component. I'm creating a new component over here.

[00:10:17]In normal application, instead of uh this alert box, we use toaster, right?

[00:10:22]So, currently in this project, I didn't install any third-party library.

[00:10:25]So, alert box we will use.

[00:10:31]So, created component. Now, our alert box HTML will go over here.

[00:10:35]Now, this is the our reusable component which will be there. Now, we will have three types of alert. Let's say success, error, and warning, right? When you do the API call, API call return at least three statuses. Either API call will be success or it will fail or it will return some warning. API call is success, but something warning is there. So, we will go with three. So, different classes are alert success then alert danger. For error, it will be danger and third, it will be warning.

[00:11:13]So, these are the three possible colors we have. Let me show you to what here also.

[00:11:18]See, this is success for green.

[00:11:20]This is warning, the yellow, and the red is the danger. So, these three types of alerts we are going to have. Now, how many inputs we can have, right? So, if you check the HTML first what type of alert it is, so that alert type we will need.

[00:11:34]Here, either it is success or error or warning and the message itself. So, three input we will need. Let's quickly create those.

[00:11:40]At the rate input round bracket alert type. It will be again string type of data, right? Empty.

[00:11:51]Let me copy paste quickly.

[00:11:56]Alert title then alert message.

[00:12:05]Okay? So, we have three input. Now, based on the alert type, in alert type we are supposed we will uh we will accept either uh success, error, or the warning, right? So, this if alert type string or let's strongly type.

[00:12:26]S U double C, success or error or warning.

[00:12:38]Okay.

[00:12:43]So now, based on the alert type, we have to add these three different classes, right? So, uh one way is by using property binding you can add a class. Another way is, but now here we don't have either or. We have three different classes for three different condition. So, here you can use the other way where we can have multiple classes. So, ng class ng class I will import.

[00:13:11]Whenever you have multiple condition and according to the multiple condition, different different classes you have to add. So, this is the way what normally we use.

[00:13:22]ng class equal to curly bracket.

[00:13:26]First class name. So, first class is this.

[00:13:29]This class you need to add then condition. What will be the condition when you have to add this card? So, alert type equal to equal to what three possible values?

[00:13:42]It will be success.

[00:13:45]So, see this class will get added if this condition gets satisfied.

[00:13:51]Comma second class, its condition. Second class will be this.

[00:13:58]Its condition.

[00:14:05]It will be error.

[00:14:10]Again comma, third class and condition.

[00:14:16]Alert warning, this is your third class and the condition of it will be equal to equal to warning.

[00:14:30]Okay?

[00:14:31]So, based on the alert type we pass from the parent component, it will add the dynamic class. Then here, just a normal interpolation.

[00:14:39]Alert title and here alert message.

[00:14:46]Alert Okay? So, this is our reusable component ready.

[00:14:56]Now, let's say if we talk about this particular component where we are creating the products.

[00:15:04]Okay? So, here where we can show it.

[00:15:09]Okay? So, after this small text, I will show this.

[00:15:15]So, after this paragraph I have hyphen alert.

[00:15:20]We have to import as we must be added automatically.

[00:15:24]Okay? Alert has been added. Now, this parent parent component is your farmer product. From this parent component, you have to send the data to the child component. So, this is component communication. If you have a parent-child relationship, this is one way, right? So, when we talk about component communication, there are multiple there are two possible ways.

[00:15:43]One is if you have if the components are having parent-child relationship by using input and output or by using your view child also. But in view child, you access the data, right? From the child component. So, first let's complete this, then we will see that.

[00:15:59]Okay? Now here we need to pass the three parameters like uh alert type, alert title, and alert message. So, instead of creating three variable, what we can do, we can create a normal object. So, alert object colon any.

[00:16:20]Like this. Now, here we can have alert type colon empty alert message colon empty alert What was the third one?

[00:16:36]Title.

[00:16:38]Okay? So, this object is created. Now, whenever you are doing the API call, either it is fail or success, right?

[00:16:44]According to that, you have to set the values to this object.

[00:16:48]Okay? So, this is my API call. So, this is my success block, right? If it is success, what you will do? So, this dot alert object dot alert type alert title or let's reinitialize complete thing again properly.

[00:17:03]Why it's not okay? We did We have gone with any, so it is not suggesting anything.

[00:17:16]Fine? So, alert type, let's say it is success.

[00:17:20]Message product listing success and alert title success, okay?

[00:17:31]This is for success. If it is in the error, right? So, error alert title also same and let's say from API you are getting the error, right?

[00:17:45]So, you can extract that like if your API is returning specific message, so that also you can pass it over here.

[00:17:52]I'm not sure like my API is returning something or not. So, let's pass static message like error while saving product.

[00:18:07]Okay? So, we according to the API call, it is either it is success or error, we are storing different different data into this object. Now, this variable this object we will pass it over here.

[00:18:19]So, why instead of creating three different variable, create an object and pass it, right?

[00:18:24]Alert message, alert object dot I don't know here also it won't suggest now.

[00:18:29]Alert message. That's why we create class and interface to strongly type everything.

[00:18:36]Then alert title alert message dot same property we have, right? Alert title and third one is type.

[00:19:01]Okay?

[00:19:02]So our reusable component is ready.

[00:19:04]Whatever that parent component expect, we are passing it.

[00:19:08]Let's give it a test.

[00:19:13]Wait, something and huh.

[00:19:17]Now, by default it should not be visible. See, by default also it is coming.

[00:19:23]Alert box is coming. Nothing is coming visible, but wait.

[00:19:26]Alert and strong is coming. One div is missing, right?

[00:19:31]One div is missing.

[00:19:33]Okay, correct only.

[00:19:36]But alert is there.

[00:19:39]Yeah, let's give it a test. Okay? So, by default this should not be available.

[00:19:44]We should control the like e once API call is success or error, when we have to show it. That we should control. So, we can create a variable and that will decide we have to show it or not.

[00:19:54]So, or we can use this variable only.

[00:19:57]Because in this variable, if the alert type is empty, we don't have to show it.

[00:20:00]If the property any property will have the value, means we have to show it. So, like that we will do. So, instead of creating one more variable, we can use the same logic. So, if if this property alert type is not empty, not empty, then only we will render our alert component.

[00:20:21]So, Okay? So, by default that alert component is not rendered now. Now, let's try to create.

[00:20:33]So, why it's not expired or what?

[00:20:38]Why it's not working again? I don't know.

[00:20:41]Farmer only.

[00:20:43]I'm logged in as Peach 19.

[00:20:48]Okay.

[00:20:49]So, now over here, let's say I'm creating capsicum. Let's say up till something available quantity 5 6 kg.

[00:20:57]Available by date next Thursday.

[00:21:01]Status available.

[00:21:02]Now, on click of save, let's add a debugger into our API call also.

[00:21:09]Product component name farmer product.

[00:21:19]1 2 3 farmer in our top tiers.

[00:21:29]Yeah.

[00:21:30]Our save and the error block success and the error block.

[00:21:34]On click of save now.

[00:21:38]Okay, API call is success. We got the data. Now, we are storing that into our object. The details success, error, whatever, right?

[00:21:47]And this object when then we are passing it, means in HTML we have used this object only to show and hide. Right? So, our alert box should be visible.

[00:21:57]See, success product listing success.

[00:22:01]Right?

[00:22:02]If the error is there, if it goes to the error block, let's mean what we can do to fail the API call, I will make the I won't pass the exact object. I will pass the empty object. Okay?

[00:22:19]Let me break over here.

[00:22:23]I'm doing now.

[00:22:26]In service, I will pass the empty object.

[00:22:29]Here, I will pass the empty object. Okay? So, my API should break. I will get 400 invalid body.

[00:22:37]Let's check.

[00:22:40]It doesn't matter what I pass now.

[00:22:43]On click of save, check payload. Okay, this error is coming from my interceptor.

[00:22:50]So, see error block got executed. And in the error block, we are setting some different data into our error object.

[00:22:58]We'll see.

[00:22:59]Getting it? So, according to what data you are passing, your component is displaying that much information. Okay?

[00:23:05]And again, after some set time out, you can reset this message also, because you know, whenever you work on application, your toaster or something gets visible for some particular time. So, you can use set time out, and you can again reset your object so that this will be right. So, product component product component is our parent component, and this is the child component. So, from parent to child, right? With the help of input and output. And again, vice versa. If from child you want to get some data to the parent component, you send it along with the output. So, this is your one way of doing communication by using input and output. Other ways, if you don't have the parent-child relationship, your subject or behavior subject, and then you send the data across the component.

[00:23:50]Now, third way is view child.

[00:23:52]Now, view child we can categorize as the uh way of component communication, because when you create the view child of the component instance, you are able to access the data. So, whatever data you have in child, let's create that.

[00:24:08]So, in farmer product component, here we are accessing here we are using alert component. So, let's create a view child for alert component.

[00:24:18]So, at the rate view child.

[00:24:22]What view child you are creating? Alert component view child you are creating.

[00:24:27]Okay?

[00:24:28]Alert component instance.

[00:24:32]Data type will be again alert component itself.

[00:24:34]We cannot initialize it, so not. Okay? So, we created a view child.

[00:24:41]Now, let's say when we save, after save, after some time I want to access the data.

[00:24:49]Like let me undo the code what we did in service, otherwise the page will break.

[00:24:56]Control Z, so it will pass the object whatever we want to pass. So, now my success block will execute. Now, here in set time out, or immediately over here also, I want to check what data I'm going to get in my uh what the in my alert component I have three variables.

[00:25:14]Those are input, but nothing but variables also, right? Alert type and message. So, I can check that data over here.

[00:25:20]Values is equal to this. dot alert component instance. dot So, all the component from your child component you will be able to access from over here. All the properties, whatever you have in your child component, you will be able to access it. See now over here, debugger.

[00:25:48]Okay, on click of save.

[00:25:54]Now, here you can see alert component.

[00:25:56]Wait, how come alert component is?

[00:25:59]Okay.

[00:26:00]Now, so we faced an issue. Your view child is coming undefined. Why it is coming undefined? See, is your alert component visible?

[00:26:10]Right now, no.

[00:26:11]Because this variable value get changed. If the condition of the visibility is like in this property in this object, this property is not empty, then only. So, my alert component is not rendered yet, and you are trying to access it. So, by default obviously it will be undefined, right? So, we have to read that into after set time out. We'll let's give it some time, then it will render.

[00:26:34]Let's say after 2 second we will try to access the value.

[00:26:38]Then it will be rendered, and our view child won't be undefined.

[00:26:42]This I will add it over here.

[00:26:55]Save.

[00:26:59]So, my alert component is visible now.

[00:27:01]After 2 second my set time out got executed. See, now the view child has the data. So, whatever the variable, whatever the data you have in your child component, you are able to access.

[00:27:12]Okay? Now, we this is just an example.

[00:27:16]Why we will access why we will access data from the child component into the parent component? Consider you have a very big form.

[00:27:24]Okay?

[00:27:25]You have a very big form. Let's say here you have some button. Where is master?

[00:27:31]Let me log in as super admin.

[00:27:33]In super admin, we have something like that.

[00:27:36]Admin.

[00:27:40]Master component. So, here you can see we have two tabs, role and category. If I click on the particular tab, let's say particular component is getting rendered. If I click on this, particular component is getting. My parent component is master component. On in master component, I'm rendering role component and the category component.

[00:27:57]So, now let's say here at the top you have to show how many records are there in role, and how many records are there in category in the parent component. So, this API call is happening in your child component. So, by creating the view child of it, you can access how many, you know, array.length is there. So, you can access that, and you can show that value will over here.

[00:28:21]Getting it? So, consider this section is in your parent component. And here you have a requirement that you have to show, you know, let's say total category something. And just like that here, total roles. Okay? Now, category component is different, right? And your role component is different.

[00:28:51]Okay? So, from both of the component in both of the component, you are making the API call to get all category and get all role. So, once that data is there, by using the view child, you will be able to read the data from child component, and then total you will show it over here something.

[00:29:09]So, this is that example how we can why we need to create a view child of child component also, and how we extract the data.

[00:29:16]Okay? This is the real time scenario what you can understand.

[00:29:20]So, this is another way. So, subject behavior subject is one way, input output is another way, right?

[00:29:27]View child is third way. One more way is while navigation, you know? So, if you have a query parameter, means you have a component with which accept to query parameter. So, let's say you have a list component where you just have a list.

[00:29:41]But on click of edit, you are navigating to a different component. So, while navigating, you will pass something like this. Let's say edit product {slash} 0 or 32 or something.

[00:29:53]So, this is how we send the parameter also. So, while routing, you can pass the data along with your query parameter. And then you read the data by using activated route {dot} params and then you subscribe to it and you get the data.

[00:30:08]Right? So, these are the four ways that are there by which we can achieve component communication.

[00:30:15]According to the relation, if parent-child relationship is there, input-output and view child.

[00:30:21]If parent-child relationship is not there, subject behavior subject or the routing.

[00:30:26]So, these are the four different ways how we achieve component communication.

[00:30:31]Fine?

[00:30:35]Yeah. Anyone having any question now?

[00:30:46]This is interview question, so you should know and even though you don't get the chance to implement everything in your company's project, create a personal project and implement over there.

[00:30:57]But if you have it already done it properly in your project, then you will feel more confident. And again, if you are using it while day-to-day work, so while doing the interview preparation, you don't have to again waste the time to learn that because you know it. You are using it, so you will be confident while answering.

[00:31:14]Right? So, those people who are actually using it, their answer will look different. And if you have just by heart the answer, your answer will look obviously will look different. Okay?

[00:31:23]So, have it practical ready if you are giving interviews.

[00:31:28]Clear, everyone? Anyone having any question?

[00:31:41]Okay.

[00:31:42]Fine. So, I'm going to record a couple of more scenarios today. I will share half an hour before. Like filter pipe or you know, server-side pagination, something I will pick up whichever API I have been ready.

[00:31:57]And we will or stepper also, something we will check.

[00:32:00]Okay?

[00:32:01]I will share the details in group. You can join it again.

[00:32:05]Fine. Thank you all. Thanks for joining.