- [Instructor] It's time to add
our final component to our application.
To do that I'm going to go to this gist right here
that I've prepared for you
just to get some of the boot strap code for my template.
So I'll click on this raw button here
and I'm going to select all of this and copy all this code
and switch back into my app
and I'll go to the components folder, make a new file.
This is going to be called search appointments.view
and it's going to be template
and I'll just paste it in there for right now.
Than I'll need to do the script part just to make sure
that I can bring this in so I'll add a script.
I already have the font awesome icon tags in here
so I'll need to make sure that I import that.
Let's go ahead and make this window bigger here.
All right we'll need to give this a name
and we'll go ahead and add a data section here.
And here we're going to need a variable
to hold the search that we're typing.
I'll call it search term and set it up here
to be an MT value to begin with.
So we also need to make sure that we are importing
the font awesome icon component.
And that should be most of the code we need for this icon.
So let's go back into the app.view file.
And we'll need to import this new component.
We need to make sure
that it is registered here as a component.
And we'll also need to make sure that we are calling it.
So this is going to go between
@appointment and appointment list.
Let's go ahead and save that.
Take a look at our application
and you'll see that we have
most of the components set up here
and there is a set of drop down icons.
So this drop down functionality
is brought to you by Bootstrap.
We'll be programming how this works in the next few videos.