Subjects in RxJS | Observables | Angular 12+

in this lecture let's learn what are subjects in rxjs and where and when do we use it a subject is a spatial type of observable that allows values to be multicasted to many observers in simple terms we use subjects for cross component communication let's understand what we mean by that so in this web page we have two components this is the first component and this is the second component in the first component we have a text box and a click button and in the second component we have an h3 element now these two components are not related to each other in any way these components does not have a parent child relationship now what we want is whenever a user enters something in this text box and clicks on this click button we want to pass this value from this component this first component to this second component and then we want to display this value here instead of this procademy okay so here we want to perform cross component communication between two components which are not related to each other by passing a value from first component to the second component now we have already seen how to achieve this using services and event emitter okay so let's try to achieve this scenario first by using services and event meters and then we will talk about subjects so let's go to vs code and here you can see in this project i have created two new components component one and component two if i open the html file of component one here we have one div element and inside that we have an input element of type text and a button element and that's what you're seeing in the web page then in the component 2 if i go to html file of component 2 here we have a development and inside that we have this h3 element which is displaying this text you entered and then this hard coded value procademy now instead of displaying this hard coded value we want to display the value which the user will enter inside this text box okay so for that what we are going to do is in the component 2 class we are going to create a property let us call it maybe entered or input text which is going to be of type string and to this input text we want to assign the value which the user will enter in the text box okay and let's also bind this in the view template so instead of displaying this procademy let's use string interpolation and let's display the value which is assigned to this input text property currently to this input text property we have not assigned any value okay so if i go to the web page in the web page you should notice that after this text you entered we don't see any value that's because to this property we have not assigned any value but when a user enters something in this text box let's say maybe procademy and when clicks on this click button in that case this value should get assigned to this input text property all right now let's close this component to class and also this html file and now let's open component 1. and let's go to component one class and here again let's create a property let's call it maybe entered text it is also going to be of type string now to this enter text property also we want to assign the value which the user will enter inside this text box okay and we can simply achieve this by using two-way data binding so let's bind this property to this input element for that let's use two-way data binding here and to this let's assign this property okay this enter text property now in order to use this ng model we also need to import forms module from angular slash forms so let's do that okay let's save the changes and let's close this appmodule file now on this button element let's bind click event and to this click event let's assign a method and let's call this method may be on button click and let's go ahead and let's create this method inside compound component class okay and for now we simply want to log the value which is assigned to this enter text property okay so let's say this dot entered text just to check if the two-way data binding is working properly or not okay so let's save the changes let's go to the web page let's open developer console and let's clear everything here and let's enter something in this text box so let's enter maybe procademy let's click on this button so that procademy has been logged so now whatever value we are entering inside this text box that is getting assigned to this entered text property now what we want is we want to pass that value which is assigned to this entered text property from component 1 to component 2 class so to this class and then we want to assign that value to this input text property okay so for that what we are going to do is we are going to create a service so inside this app folder let's create a new service let's call this service may be data service okay and here let's create and export a class and let's call this class data service let's also decorate this class with at injectable decorator okay all right now inside this service class let's create an event and let's call this event maybe data emitter okay and to create an event we use event emitter class and this event emitter we should get it from angular slash go and this event is going to emit a data of type string so let's specify that and then let's use parenthesis like this so here we are creating an event we are creating a custom event now let's create a method which will raise this event and let's call this this method maybe raise data emitter event okay and this method is let's say going to receive an argument let's call it data and it is going to be of type string and from within this method let's raise this event so let's say this dot data emitter dot emit okay and this event will emit the data which we are receiving as an argument for this raised data emitter event method all right so in this data service class we have an event and a method which is raising that event now let's inject this service in the app component class so let's go to appcomponent.ts here let's first create a constructor for this constructor let's specify a private parameter let's call it maybe data service which is going to be of type data service class okay and in order to use it we also need to import it okay so in this parameter we will receive an instance of this data service class now we also need to tell angular how to provide an instance of this data service class right so for that we need to specify the provider's property and inside the square brackets we can specify the class for which we want the instance in this case it is data service class okay now this comp one component and comp 2 component both of these components are the child component of this app component so when the angular will inject an instance of this data service class in this app component the same instance will also get injected for comp one component class and comp2 component class right so let's go to component component class and here in the constructor let's specify a private parameter let's again call it data service so in this data service we will receive the instance of the data service class and we also need to specify the type so that will be data service okay now what we want is instead of logging the value which is stored inside this entered text property we want to send that data to this data service class for that let's first access this data service in this data service class we have raised data emitter event right and this event is expecting a value for this data parameter this parameter so for that parameter let's pass the value which is stored inside this entered text property so let's say this dot entered text okay so now when this event will be raised this data emitter event will be raised it will emit the value which the user will enter in this text box all right so now what we can do is we can go to com2 component class and here we can simply subscribe to that event okay so for this constructor also let's specify a private parameter let's call it data service which is going to be of type data service and now let's access this data service so let's see this dot data service dot and let's access this event which is data emitter and here let's subscribe to that event okay and we have learned that this subscribe method takes a next callback function and this callback function receives the value which the observable emits so here let's specify this value parameter okay so inside this value we will receive the value which this event will emit and now what we want is we want to assign that value to this input text property so here let's say this dot input text equals value with this let's save the changes let's go to the web page okay let's clear everything here and here let's enter some value so let's say procademy and let's click on this click button and you will notice that that value is now being displayed in the comp 2 component if i enter some other value let's say iphone and when i click that iphone is being displayed in the comp 2 component so here we are successfully able to pass the data from one component to another component using service and event emitter so here for that we are using this data service class and this event emitter now we can achieve the same thing using subject so instead of using event emitter we can also use subject for that let's create a new subject for that we use new keyword followed by subject constructor okay and in order to use this subject we also need to import it from rxjs and this subject is going to return an observable right so let's assign that observable to a property or a variable for that let's use the same name this data emitter name and to this let's assign this observable which this subject will return okay so this is the first change which we need to do and the second change which we need to do is instead of emitting we need to use next method because now this data emitter is not an event it is a subject so we cannot call this emit method on this data emitter instead we need to call next method okay and here we also need to specify the type of data which the observable returned by this subject will emit so here we want to emit a data of type string okay let's save the changes let's go to the web page and this application should still be working so if i say procad me and if i click on this click button it has displayed procademy in the comp 2 component if i enter something else let's say mobile and click on this click button that is being displayed here so in this way using subject we can perform cross component communication and that's why in the definition of this subject you will notice that it is also mentioned that subjects are like event emitters okay so a subject is a special type of observable that allows values to be multicasted to many observers here using this subject we are only passing data from one component to another component but we can also pass this same data into multiple components okay so we can use subjects for cross component communication and this is all about observables now one more thing which i want to mention here is that while developing an angular application we are rarely going to create our own observables but it's not like we are not going to deal with observables at all we are simply not going to create our own observables but we may use some methods which returns an observable and that's why it is very important that you understand how an observable works and with this section i hope the concept of observables is clear to you alright so this is all from this lecture thank you for listening and have a great day

Channel: procademy

Views: 30,140

Keywords: subject, observable, RxJS, Angular, Angular tutorial, complete angular course

Id: CKyMb3kXN_A

Length: 16min 13sec (973 seconds)

Published: Fri Mar 04 2022