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.
