2024-02-04T08:22:52.024Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3f33f548-a71a-4307-b959-f9abf70f19fb
2685c8ccf9caa59125d2885f5ed81a6250aeaafba8fc307ecc58eea5b207fdf6
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to use the Algolia search platform to implement full text search into an Angular 4 application.
Algolia provides a library called Instant Search JS, which we'll use to implement all kinds of different widgets into our search with very little code.
When you sign up for Algolia, it provides a default index of Hollywood actors.
We'll be using this index in the first video.
Then Then in the second video, we'll create our own custom index with Firebase Cloud Functions.
The first step is to sign up for an Algolia account and get your API credentials.
They have a free tier, which is just limited by usage.
After you sign up, you'll go through a new user tour, And then you'll wanna make note of your search only API key and your app ID.
Inside the Angular project, you'll run npm install instant search j s.
Instant search is an open source library maintained by Algolia.
It takes care of all the front end features like auto complete, pagination, filtering, and a lot more.
In Angular, I'm going to add my API keys to the environment file and specify the get started actors index.
If you wanna use the instant search default CSS, you can add that to the head of the index dot HTML file.
Now we can generate a new component called search UI component.
We start by importing the environment file and the instant search package.
We declare a variable search which will hold the entire configuration for this search feature.
Then we pass it the configuration from the environment file.
And to initialize it, we call search dot start.
At this point, nothing will happen because we don't have any widgets attached to this search instance.
So we'll go ahead and give it a search box widget, and every widget has its own configuration options.
The most important being the container option, which Points to an HTML element that will be replaced by this widget.
So now that we have a place for the user to enter their search, we need another div that will hold the search results.
Bolt.
We can accomplish this with the hits widget, so we just point this to another div with the hits ID.
The component HTML template is just 2 empty divs with the corresponding IDs.
Let's try it out.
We have a bunch of results in JSON format and they're filtered automatically by the instant search autocomplete.
It's working as expected.
It just doesn't look very good.
So we'll use the instant search templating system to modify the appearance of the results.
In the hits widget, we first set the escape hits option to true, then define 2 separate templates for empty and item.
Empty just displays a string and item displays some actual HTML, and you can pass it attributes by using the double curly bracket syntax.
If we go back to the app, we can see the results are now formatted in a much more user friendly way.
This index also has an image path attribute, which It has the actor's image, so we can use that in the template as well to display an image with our results.
You can customize the results based on any information you have saved in the Algolia index.
This gives you the ability to do complex ranking and filtering within your search results.
Now we'll go ahead and add the stats widget.
That'll just give us a simple printout of the number of results and how quickly the search took to execute.
And let's go ahead and add one more widget for pagination.
We just follow the same pattern as before, and magically, our app has pagination.
Pagination would be useful if you expect your search to return hundreds of results at a time.
The last thing I wanna show you is how to access the actual array of hits from inside the component type script.
Instant search has another widget called the analytics widget, which doesn't actually do anything to the user interface, but it does have a function that will return the query as well as the result.
If we pull up the console and developer tools, we can see we're getting The object's back, which has the array of hits as well as a bunch of other information.
This can be useful for debugging as well as sending analytic events to third parties.
That's it for the first episode on Algolia search.
If the video helped you, please like and subscribe.
And if you wanna learn more, consider becoming a pro member for exclusive content as well as 1 on 1 project consulting.
Thanks for watching, and I'll see you in episode 2.

Speaker 0: In this episode, we're going to use the Algolia search platform to implement full text search into an Angular 4 application. Algolia provides a library called Instant Search JS, which we'll use to implement all kinds of different widgets into our search with very little code. When you sign up for Algolia, it provides a default index of Hollywood actors. We'll be using this index in the first video. Then Then in the second video, we'll create our own custom index with Firebase Cloud Functions.

The first step is to sign up for an Algolia account and get your API credentials. They have a free tier, which is just limited by usage. After you sign up, you'll go through a new user tour, And then you'll wanna make note of your search only API key and your app ID. Inside the Angular project, you'll run npm install instant search j s. Instant search is an open source library maintained by Algolia.

It takes care of all the front end features like auto complete, pagination, filtering, and a lot more. In Angular, I'm going to add my API keys to the environment file and specify the get started actors index. If you wanna use the instant search default CSS, you can add that to the head of the index dot HTML file. Now we can generate a new component called search UI component. We start by importing the environment file and the instant search package.

We declare a variable search which will hold the entire configuration for this search feature. Then we pass it the configuration from the environment file. And to initialize it, we call search dot start. At this point, nothing will happen because we don't have any widgets attached to this search instance. So we'll go ahead and give it a search box widget, and every widget has its own configuration options.

The most important being the container option, which Points to an HTML element that will be replaced by this widget. So now that we have a place for the user to enter their search, we need another div that will hold the search results. Bolt. We can accomplish this with the hits widget, so we just point this to another div with the hits ID. The component HTML template is just 2 empty divs with the corresponding IDs.

Let's try it out. We have a bunch of results in JSON format and they're filtered automatically by the instant search autocomplete. It's working as expected. It just doesn't look very good. So we'll use the instant search templating system to modify the appearance of the results.

In the hits widget, we first set the escape hits option to true, then define 2 separate templates for empty and item. Empty just displays a string and item displays some actual HTML, and you can pass it attributes by using the double curly bracket syntax. If we go back to the app, we can see the results are now formatted in a much more user friendly way. This index also has an image path attribute, which It has the actor's image, so we can use that in the template as well to display an image with our results. You can customize the results based on any information you have saved in the Algolia index.

This gives you the ability to do complex ranking and filtering within your search results. Now we'll go ahead and add the stats widget. That'll just give us a simple printout of the number of results and how quickly the search took to execute. And let's go ahead and add one more widget for pagination. We just follow the same pattern as before, and magically, our app has pagination.

Pagination would be useful if you expect your search to return hundreds of results at a time. The last thing I wanna show you is how to access the actual array of hits from inside the component type script. Instant search has another widget called the analytics widget, which doesn't actually do anything to the user interface, but it does have a function that will return the query as well as the result. If we pull up the console and developer tools, we can see we're getting The object's back, which has the array of hits as well as a bunch of other information. This can be useful for debugging as well as sending analytic events to third parties.

That's it for the first episode on Algolia search. If the video helped you, please like and subscribe. And if you wanna learn more, consider becoming a pro member for exclusive content as well as 1 on 1 project consulting. Thanks for watching, and I'll see you in episode 2.
In this episode, we're going to use the Algolia search platform to implement full text search into an Angular 4 application. Algolia provides a library called Instant Search JS, which we'll use to implement all kinds of different widgets into our search with very little code. When you sign up for Algolia, it provides a default index of Hollywood actors. We'll be using this index in the first video. Then Then in the second video, we'll create our own custom index with Firebase Cloud Functions. The first step is to sign up for an Algolia account and get your API credentials. They have a free tier, which is just limited by usage. After you sign up, you'll go through a new user tour, And then you'll wanna make note of your search only API key and your app ID. Inside the Angular project, you'll run npm install instant search j s. Instant search is an open source library maintained by Algolia. It takes care of all the front end features like auto complete, pagination, filtering, and a lot more. In Angular, I'm going to add my API keys to the environment file and specify the get started actors index. If you wanna use the instant search default CSS, you can add that to the head of the index dot HTML file. Now we can generate a new component called search UI component. We start by importing the environment file and the instant search package. We declare a variable search which will hold the entire configuration for this search feature. Then we pass it the configuration from the environment file. And to initialize it, we call search dot start. At this point, nothing will happen because we don't have any widgets attached to this search instance. So we'll go ahead and give it a search box widget, and every widget has its own configuration options. The most important being the container option, which Points to an HTML element that will be replaced by this widget. So now that we have a place for the user to enter their search, we need another div that will hold the search results. Bolt. We can accomplish this with the hits widget, so we just point this to another div with the hits ID. The component HTML template is just 2 empty divs with the corresponding IDs. Let's try it out. We have a bunch of results in JSON format and they're filtered automatically by the instant search autocomplete. It's working as expected. It just doesn't look very good. So we'll use the instant search templating system to modify the appearance of the results. In the hits widget, we first set the escape hits option to true, then define 2 separate templates for empty and item. Empty just displays a string and item displays some actual HTML, and you can pass it attributes by using the double curly bracket syntax. If we go back to the app, we can see the results are now formatted in a much more user friendly way. This index also has an image path attribute, which It has the actor's image, so we can use that in the template as well to display an image with our results. You can customize the results based on any information you have saved in the Algolia index. This gives you the ability to do complex ranking and filtering within your search results. Now we'll go ahead and add the stats widget. That'll just give us a simple printout of the number of results and how quickly the search took to execute. And let's go ahead and add one more widget for pagination. We just follow the same pattern as before, and magically, our app has pagination. Pagination would be useful if you expect your search to return hundreds of results at a time. The last thing I wanna show you is how to access the actual array of hits from inside the component type script.
Instant search has another widget called the analytics widget, which doesn't actually do anything to the user interface, but it does have a function that will return the query as well as the result. If we pull up the console and developer tools, we can see we're getting The object's back, which has the array of hits as well as a bunch of other information.
google
This can be useful for debugging as well as sending analytic events to third parties. That's it for the first episode on Algolia search. If the video helped you, please like and subscribe. And if you wanna learn more, consider becoming a pro member for exclusive content as well as 1 on 1 project consulting.
youtube
social media
Thanks for watching, and I'll see you in episode 2.
In this episode, we're going to use the Algolia search platform to implement full text search into an Angular 4 application. Algolia provides a library called Instant Search JS, which we'll use to implement all kinds of different widgets into our search with very little code. When you sign up for Algolia, it provides a default index of Hollywood actors. We'll be using this index in the first video. Then Then in the second video, we'll create our own custom index with Firebase Cloud Functions. The first step is to sign up for an Algolia account and get your API credentials. They have a free tier, which is just limited by usage. After you sign up, you'll go through a new user tour, And then you'll wanna make note of your search only API key and your app ID. Inside the Angular project, you'll run npm install instant search j s. Instant search is an open source library maintained by Algolia. It takes care of all the front end features like auto complete, pagination, filtering, and a lot more. In Angular, I'm going to add my API keys to the environment file and specify the get started actors index. If you wanna use the instant search default CSS, you can add that to the head of the index dot HTML file. Now we can generate a new component called search UI component. We start by importing the environment file and the instant search package. We declare a variable search which will hold the entire configuration for this search feature. Then we pass it the configuration from the environment file. And to initialize it, we call search dot start. At this point, nothing will happen because we don't have any widgets attached to this search instance. So we'll go ahead and give it a search box widget, and every widget has its own configuration options. The most important being the container option, which Points to an HTML element that will be replaced by this widget. So now that we have a place for the user to enter their search, we need another div that will hold the search results. Bolt. We can accomplish this with the hits widget, so we just point this to another div with the hits ID. The component HTML template is just 2 empty divs with the corresponding IDs. Let's try it out. We have a bunch of results in JSON format and they're filtered automatically by the instant search autocomplete. It's working as expected. It just doesn't look very good. So we'll use the instant search templating system to modify the appearance of the results. In the hits widget, we first set the escape hits option to true, then define 2 separate templates for empty and item. Empty just displays a string and item displays some actual HTML, and you can pass it attributes by using the double curly bracket syntax. If we go back to the app, we can see the results are now formatted in a much more user friendly way. This index also has an image path attribute, which It has the actor's image, so we can use that in the template as well to display an image with our results. You can customize the results based on any information you have saved in the Algolia index. This gives you the ability to do complex ranking and filtering within your search results. Now we'll go ahead and add the stats widget. That'll just give us a simple printout of the number of results and how quickly the search took to execute. And let's go ahead and add one more widget for pagination. We just follow the same pattern as before, and magically, our app has pagination. Pagination would be useful if you expect your search to return hundreds of results at a time. The last thing I wanna show you is how to access the actual array of hits from inside the component type script. Instant search has another widget called the analytics widget, which doesn't actually do anything to the user interface, but it does have a function that will return the query as well as the result. If we pull up the console and developer tools, we can see we're getting The object's back, which has the array of hits as well as a bunch of other information. This can be useful for debugging as well as sending analytic events to third parties. That's it for the first episode on Algolia search. If the video helped you, please like and subscribe. And if you wanna learn more, consider becoming a pro member for exclusive content as well as 1 on 1 project consulting. Thanks for watching, and I'll see you in episode 2.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
use
use
the
the
Algolia
algolia
search
search
platform
platform
to
to
implement
implement
full
full
text
text
search
search
into
into
an
an
Angular
angular
4
4
application.
application
Algolia
algolia
provides
provides
a
a
library
library
called
called
Instant
instant
Search
search
JS,
js
which
which
we'll
we'll
use
use
to
to
implement
implement
all
all
kinds
kinds
of
of
different
different
widgets
widgets
into
into
our
our
search
search
with
with
very
very
little
little
code.
code
When
when
you
you
sign
sign
up
up
for
for
Algolia,
algolia
it
it
provides
provides
a
a
default
default
index
index
of
of
Hollywood
hollywood
actors.
actors
We'll
we'll
be
be
using
using
this
this
index
index
in
in
the
the
first
first
video.
video
Then
then
Then
then
in
in
the
the
second
second
video,
video
we'll
we'll
create
create
our
our
own
own
custom
custom
index
index
with
with
Firebase
firebase
Cloud
cloud
Functions.
functions
The
the
first
first
step
step
is
is
to
to
sign
sign
up
up
for
for
an
an
Algolia
algolia
account
account
and
and
get
get
your
your
API
api
credentials.
credentials
They
they
have
have
a
a
free
free
tier,
tier
which
which
is
is
just
just
limited
limited
by
by
usage.
usage
After
after
you
you
sign
sign
up,
up
you'll
you'll
go
go
through
through
a
a
new
new
user
user
tour,
tour
And
and
then
then
you'll
you'll
wanna
wanna
make
make
note
note
of
of
your
your
search
search
only
only
API
api
key
key
and
and
your
your
app
app
ID.
id
Inside
inside
the
the
Angular
angular
project,
project
you'll
you'll
run
run
npm
npm
install
install
instant
instant
search
search
j
j
s.
s
Instant
instant
search
search
is
is
an
an
open
open
source
source
library
library
maintained
maintained
by
by
Algolia.
algolia
It
it
takes
takes
care
care
of
of
all
all
the
the
front
front
end
end
features
features
like
like
auto
auto
complete,
complete
pagination,
pagination
filtering,
filtering
and
and
a
a
lot
lot
more.
more
In
in
Angular,
angular
I'm
i'm
going
going
to
to
add
add
my
my
API
api
keys
keys
to
to
the
the
environment
environment
file
file
and
and
specify
specify
the
the
get
get
started
started
actors
actors
index.
index
If
if
you
you
wanna
wanna
use
use
the
the
instant
instant
search
search
default
default
CSS,
css
you
you
can
can
add
add
that
that
to
to
the
the
head
head
of
of
the
the
index
index
dot
dot
HTML
html
file.
file
Now
now
we
we
can
can
generate
generate
a
a
new
new
component
component
called
called
search
search
UI
ui
component.
component
We
we
start
start
by
by
importing
importing
the
the
environment
environment
file
file
and
and
the
the
instant
instant
search
search
package.
package
We
we
declare
declare
a
a
variable
variable
search
search
which
which
will
will
hold
hold
the
the
entire
entire
configuration
configuration
for
for
this
this
search
search
feature.
feature
Then
then
we
we
pass
pass
it
it
the
the
configuration
configuration
from
from
the
the
environment
environment
file.
file
And
and
to
to
initialize
initialize
it,
it
we
we
call
call
search
search
dot
dot
start.
start
At
at
this
this
point,
point
nothing
nothing
will
will
happen
happen
because
because
we
we
don't
don't
have
have
any
any
widgets
widgets
attached
attached
to
to
this
this
search
search
instance.
instance
So
so
we'll
we'll
go
go
ahead
ahead
and
and
give
give
it
it
a
a
search
search
box
box
widget,
widget
and
and
every
every
widget
widget
has
has
its
its
own
own
configuration
configuration
options.
options
The
the
most
most
important
important
being
being
the
the
container
container
option,
option
which
which
Points
points
to
to
an
an
HTML
html
element
element
that
that
will
will
be
be
replaced
replaced
by
by
this
this
widget.
widget
So
so
now
now
that
that
we
we
have
have
a
a
place
place
for
for
the
the
user
user
to
to
enter
enter
their
their
search,
search
we
we
need
need
another
another
div
div
that
that
will
will
hold
hold
the
the
search
search
results.
results
Bolt.
bolt
We
we
can
can
accomplish
accomplish
this
this
with
with
the
the
hits
hits
widget,
widget
so
so
we
we
just
just
point
point
this
this
to
to
another
another
div
div
with
with
the
the
hits
hits
ID.
id
The
the
component
component
HTML
html
template
template
is
is
just
just
2
2
empty
empty
divs
divs
with
with
the
the
corresponding
corresponding
IDs.
ids
Let's
let's
try
try
it
it
out.
out
We
we
have
have
a
a
bunch
bunch
of
of
results
results
in
in
JSON
json
format
format
and
and
they're
they're
filtered
filtered
automatically
automatically
by
by
the
the
instant
instant
search
search
autocomplete.
autocomplete
It's
it's
working
working
as
as
expected.
expected
It
it
just
just
doesn't
doesn't
look
look
very
very
good.
good
So
so
we'll
we'll
use
use
the
the
instant
instant
search
search
templating
templating
system
system
to
to
modify
modify
the
the
appearance
appearance
of
of
the
the
results.
results
In
in
the
the
hits
hits
widget,
widget
we
we
first
first
set
set
the
the
escape
escape
hits
hits
option
option
to
to
true,
true
then
then
define
define
2
2
separate
separate
templates
templates
for
for
empty
empty
and
and
item.
item
Empty
empty
just
just
displays
displays
a
a
string
string
and
and
item
item
displays
displays
some
some
actual
actual
HTML,
html
and
and
you
you
can
can
pass
pass
it
it
attributes
attributes
by
by
using
using
the
the
double
double
curly
curly
bracket
bracket
syntax.
syntax
If
if
we
we
go
go
back
back
to
to
the
the
app,
app
we
we
can
can
see
see
the
the
results
results
are
are
now
now
formatted
formatted
in
in
a
a
much
much
more
more
user
user
friendly
friendly
way.
way
This
this
index
index
also
also
has
has
an
an
image
image
path
path
attribute,
attribute
which
which
It
it
has
has
the
the
actor's
actor's
image,
image
so
so
we
we
can
can
use
use
that
that
in
in
the
the
template
template
as
as
well
well
to
to
display
display
an
an
image
image
with
with
our
our
results.
results
You
you
can
can
customize
customize
the
the
results
results
based
based
on
on
any
any
information
information
you
you
have
have
saved
saved
in
in
the
the
Algolia
algolia
index.
index
This
this
gives
gives
you
you
the
the
ability
ability
to
to
do
do
complex
complex
ranking
ranking
and
and
filtering
filtering
within
within
your
your
search
search
results.
results
Now
now
we'll
we'll
go
go
ahead
ahead
and
and
add
add
the
the
stats
stats
widget.
widget
That'll
that'll
just
just
give
give
us
us
a
a
simple
simple
printout
printout
of
of
the
the
number
number
of
of
results
results
and
and
how
how
quickly
quickly
the
the
search
search
took
took
to
to
execute.
execute
And
and
let's
let's
go
go
ahead
ahead
and
and
add
add
one
one
more
more
widget
widget
for
for
pagination.
pagination
We
we
just
just
follow
follow
the
the
same
same
pattern
pattern
as
as
before,
before
and
and
magically,
magically
our
our
app
app
has
has
pagination.
pagination
Pagination
pagination
would
would
be
be
useful
useful
if
if
you
you
expect
expect
your
your
search
search
to
to
return
return
hundreds
hundreds
of
of
results
results
at
at
a
a
time.
time
The
the
last
last
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
how
how
to
to
access
access
the
the
actual
actual
array
array
of
of
hits
hits
from
from
inside
inside
the
the
component
component
type
type
script.
script
Instant
instant
search
search
has
has
another
another
widget
widget
called
called
the
the
analytics
analytics
widget,
widget
which
which
doesn't
doesn't
actually
actually
do
do
anything
anything
to
to
the
the
user
user
interface,
interface
but
but
it
it
does
does
have
have
a
a
function
function
that
that
will
will
return
return
the
the
query
query
as
as
well
well
as
as
the
the
result.
result
If
if
we
we
pull
pull
up
up
the
the
console
console
and
and
developer
developer
tools,
tools
we
we
can
can
see
see
we're
we're
getting
getting
The
the
object's
object's
back,
back
which
which
has
has
the
the
array
array
of
of
hits
hits
as
as
well
well
as
as
a
a
bunch
bunch
of
of
other
other
information.
information
This
this
can
can
be
be
useful
useful
for
for
debugging
debugging
as
as
well
well
as
as
sending
sending
analytic
analytic
events
events
to
to
third
third
parties.
parties
That's
that's
it
it
for
for
the
the
first
first
episode
episode
on
on
Algolia
algolia
search.
search
If
if
the
the
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
learn
learn
more,
more
consider
consider
becoming
becoming
a
a
pro
pro
member
member
for
for
exclusive
exclusive
content
content
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
in
in
episode
episode
2.
2
success
In this episode of the video, the host discusses using the Algolia search platform to implement full text search into an Angular 4 application. The search platform provides a default index of Hollywood actors and a custom search API key and app ID. The host explains how to use the search function and adds a search widget, analytics widget, and data visualization. The episode ends with a recommendation to becoming a pro member for exclusive content and a reminder to like and subscribe to the video.
Angular 4 Full Text Search with Algolia - Part 1
Learn how to build a full text search frontend in Angular 4 with Algolia and InstantSearch.js. Full Lesson https://angularfirebase.com/lessons/angular-full-text-search-with-algolia-frontend-part-1/

Get your API keys from https://algolia.com