Continuing with our exercises on floating action buttons, in this exercise, we're gonna modify our application to enable users to mark certain dishes as their favorites. And we would have a provider that will enable us to keep track of the favorites and then also retrieve the list of favorites when required. In this exercise, we're going to add in the support for keeping track of the favorites and then also use a floating action button to enable the user to mark a specific dish as his or her favorite. So let's go ahead to use FABs along with a favorite provider in this exercise. In order to keep track of a user's favorite dishes, we're gonna add in a new provider into our Ionic application called favorite. So to do that, at the prompt, type ionic g provider favorite and then add in the new provider to our application. Once the provider is added, we'll go to our application and start working on that new provider. So let's open the favorite.ts file for our provider. And then within this file, we're going to add in the support for keeping track of our favorites. At this point, I'm going to simply use a - an array within my favorite provider to keep track of the favorites. Obviously, if you are going to develop a real application, you want to be able to keep track of the favorites of a specific user on the server side. But right now, we don't have the ability for authenticating a user, nor do we have the ability to store the favorites on a server. We're gonna add in that kind of support in the last course of this specialization. But for the moment, I'm gonna keep track of the favorites of a user right within the FavoriteProvider by using an array where we will keep track of the IDs of the favorite dishes of a user. So after adding in this variable called favorites, which is an array of any type, within the constructor I'm going to add in the initialization for the favorites as an empty array. And we will add in two methods into this FavoriteProvider; one called as addFavorite, obviously, where id would be the ID of the dish which needs to be added to their favorite and the second method that I'm going to add in is called isFavorite, which will be used to check if a given dish is a user's favorite. Now, the isFavorite will return a Boolean value; the addFavorite also will return a Boolean value to confirm that the dish had been added to their favorites. So in here, we will say this.favorites.push and then we'll push the ID into the array. And that's about it - and then return true. So with this method, we are able to now push the favorites to the favorites array. Later on, we can modify this method to be able to do the same action on a server side, but the interface to the component will remain exactly the same as we defined here. For the isFavorite method, I'm going to take advantage of an array method called as some. The some method checks to see if a specific dish is in the array or not. So to do that, I am just going to check an element of the array to see if that element is the same as the ID that has been supplied as the parameter. And this will return either true or false. If this condition turns out to be true, then it'll return true; otherwise, it'll return false. So this is an easy way of checking to see whether a specific dish is already among the favorites for the user. With these changes, we have updated the favorites. Now, we're gonna make use of this FavoritesProvider in our DishdetailPage. There we will allow the user to select a dish as his or her favorite and also be able to display this information. Going to dishdetail.ts file here, I'm going to inject the FavoriteProvider into the DishdetailPage. And so let me first import the FavoriteProvider into the DishdetailPage and then we will go ahead and inject that as a service. So we'll say private favoriteservice and this is the FavoriteProvider. In addition, I'm also going to introduce another variable called favorite, which I will initialize as false. Now, what I will do is whenever the DishdetailPage is constructed, I will check to see if this dish is already the user's favorite dish. So, I'll say this.favoriteservice.isFavorite and then we'll check with the dish ID; this.dish.id. So this way, the variable favorite here will keep track of whether this particular dish is the favorite of the user or not. We'll also add another function here called addToFavorites, which we can invoke from the template in order to add a specific dish to the favorite. So just to verify, I will do a console log of the dish ID and then I'll say this.favorite equal to this.favoriteservice.addFavorite and then pass in the dish ID as a parameter to that method here. So with this, we will be able to add the dish to the favorites and the addFavorite method will return a Boolean to confirm that the addition is - is successful and so that will be assigned to the favorite variable here. Now, going to the dishdetail.html page, I'm going to add in a floating action button here. Now here, we will add in two different floating action buttons, depending upon whether the dish is already a user's favorite or not. We will display one of these two buttons. So I'll say ion-fab bottom right and I'll say hidden. So this particular button will be displayed only if the dish is not already the user's favorite. And so here I will introduce a ion-fab button and then when this is clicked, I will initiate a call to addToFavorites method, what we have already introduced and the button here. Now, you must be wondering why this ion-fab is assigned to a button and included inside an ion-fab. This outer ion-fab is just used as a container for a fab button here. So if we use it this way, then this button will be at a fixed location in the view. If we just include a button ion-fab - just this part - then this button will be scrollable; so as the view scrolls, the button will also scroll. But in this case, I want this button to be fixed at the bottom right corner of my view, so that's the reason why we enclose this inside an ion-fab here. So this particular button, I will display only when this dish is not already the user's favorite. So in this case, I will use heart-outline as the icon for this button here. So as you see, this button will be displayed when the user has not yet selected this dish as his or her favorite. But suppose the dish is already selected as the favorite? Then in that case, I will use a different button. So in this case, I will say *ngIf. So you notice that this button, the upper button, will be displayed if this dish is not already the user's favorite; the lower button will be used as a floating action button if this dish is already the user's favorite. So that is where I'm using the ngIf and the hidden to decide which button to display. And if the dish is already the user's favorite, I'm going to use a heart, which is a filled heart, to use as the icon for this button. And also when this button is clicked, I will do nothing - I just want that button to just show that this dish is already selected as the favorite by the user. So with this, we have added in the floating action button into our view here. So let's save all the changes and then go and take a look at our application. Going to our application in the browser, let me bring up the menu. And from the menu, let me select a dish. So when I select a dish, you can see that, at the bottom here, you have this floating action button with a unfilled heart. If I click on this, then you notice that the heart turns from unfilled to filled to indicate that this dish has been selected as the favorite by the user. In addition, this dish would have been added into the favorites by calling the addFavorite method of the FavoriteProvider. Now going back, we can go to another dish and then you see that this is not added to the favorite. We can always return to that dish and you will see that the dish will be always marked as the favorite because we have already selecting that dish as our favorite dish. So this is one way you can keep track of the favorite dishes of a user by using the favorite factoring and also provide a floating action button to enable the user to select a particular dish as his or her favorite. With this, we've completed this exercise. This is a good time for you to do a get commit with the message FAB favorite.
