Reading data with behavior subjects

- [Instructor] Let's say in our thermostat app, we want to display an icon depending on what temperature it is. If it's below 50 degrees, we'll show a snowman. From 51 onward, we'll show the sun. We can absolutely subscribe to temperature changes and react to them. But we don't necessarily have to do that to display a new weather icon to the user. BehaviorSubjects are a type of observable that allow you to get a current value from a subject. In this example, we're initializing the temperature to 72. To go over the qualities of BehaviorSubjects, the initial value is passed to our subscription function when we subscribe to them. It always starts with a default value and are generally the most intuitive to use. They also work like any other subject, except we don't have to subscribe to keep track of the latest value but we can still subscribe to it if we want to. If all we care about is what the current temperature is, the BehaviorSubjects are an ideal choice. In our app, we'll subscribe to an observable to display the sun if the weather is warm and a snowman if the weather is cold. Let's see what that looks like in code. Here we are in our code editor. If we're going to use BehaviorSubjects, we'll need to import that from RxJS. I'll do that here. BehaviorSubject from rxjs. Next, I'll create a BehaviorSubject as a class variable. I'll name it temperatureSubject. I'll do it below this image source right here. It's normal convention to add a dollar sign to the end of your temperatureSubjects or any type of subjects to let others know that this is a subject. We'll give it a type of number and initialize the value to 72 degrees. Scrolling down, we have the setTemperature function. Let's pass in the temperature we get from the user to our temperatureSubject. This.temperatureSubject.next. This.inputTemperature. Oh, I put this in our OnInit function. Let's move this back down to our setTemperature function. Now we'll need to subscribe to the temperatureSubject and handle those new data points. We'll do that here in the ngOnInit function. This.temperatureSubject, and we'll subscribe to it here and pass in an arrow function. We'll get the temperature and handle in the subscription function. If the temperature is larger than 40 degrees, we'll show a picture of the sun. Otherwise, we'll show a picture of a snowman. imageSrc with a SNOWMAN_IMAGE. We'll now need to display the temperature in our HTML file. We could do that here. In our app.component.html, we can update our template to display the temperature to the user. We can display the value of the BehaviorSubject here. We'll reference the temperatureSubject and get the temperature from the .value field. To see our code in our browser, we'll first need to install the dependencies using npm install. Great. Now we can build our application using ng serve. So in our weather app, we have our BehaviorSubject default to 72 degrees, which displays the sun. If we set the temperature down lower to 30 degrees, we'll see a picture of a snowman, and then if we set it back up higher to maybe 82 degrees, we'll see another picture of the sun. But if we're not interested in the immediate value of the BehaviorSubject, we can use another type of observable that's just called a subject. We'll learn more about that in the next video.