Building an Angular Search Bar with Angular Autocomplete: A Step-by-Step Tutorial
Building an Angular Search Bar with Angular Autocomplete: A Step-by-Step Tutorial

In this post you will learn how to implement a search bar inside Angular.

Finished project

Project

Here I already prepared several things. First of all we have an API localhost:3004/articles which returns for us an array of objects with id, slug and title.

I already created an interface for our future article that we want to search.

// src/app/article.interface.ts
export interface ArticleInterface {
  id: string;
  slug: string;
  title: string;
}

This is exactly the format of our article that we get from the backend.

Secondly I prepared ArticleService which gets articles from the API.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ArticleInterface } from './article.interface';

@Injectable()
export class ArticlesService {
  constructor(private http: HttpClient) {}

  getArticles(searchValue: string): Observable<ArticleInterface[]> {
    return this.http.get<ArticleInterface[]>(
      `http://localhost:3004/articles?title_like=${searchValue}`
    );
  }
}

Here we have a getArticles method and the most important part is that we must provide a searchValue inside in order to make API call. As we implement searching by specific string it makes a lot of sense.

Fetching article

The first thing that we need to implement is fetching of the articles inside AppComponent.

export class AppComponent implements OnInit {
  searchValue = ''
  articles: ArticleInterface[] = [];

  constructor(
    private articlesService: ArticlesService,
  ) {}

  ngOnInit(): void {
    this.fetchData();
  }

  fetchData(): void {
    this.articlesService.getArticles(this.searchValue).subscribe((articles) => {
      this.articles = articles;
    });
  }
}

Here we injected articlesService in our AppComponent and we are fetching data on initialize. Inside fetchData method we call getArticles method and provide an empty searchValue inside.

Creating form for search bar

Now we need to create a form for our search bar. For this we want to use Reactive Forms as the best solution to create forms in Angular.

export class AppComponent implements OnInit {
  ...
  searchForm = this.fb.nonNullable.group({
    searchValue: '',
  });

  constructor(
    ...
    private fb: FormBuilder
  ) {}

  onSearchSubmit(): void {
    this.searchValue = this.searchForm.value.searchValue ?? '';
    this.fetchData();
  }
}

Here we defined our searchForm with just searchValue and onSearchSubmit function. Inside it we assign searchValue from the form and call fetchData again.

Preparing HTML

Now we must write markup for our search bar. I already prepared all CSS that we need for search bar so we don't need to spent time writing it.

// src/app/app.component.css
.container {
  margin: 0 auto;
  width: 500px;
  margin-top: 50px;
}

.searchBar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchBarClear {
  margin-left: 10px;
  cursor: pointer;
}

.searchBarInput {
  heigth: 30px;
  width: 300px;
  font-size: 16px;
}

.articlesTable {
  margin-top: 80px;
  text-align: center;
}

.article {
  margin: 10px 0;
}

Now let's write markup for our search bar.

<div class="container">
  <form
    [formGroup]="searchForm"
    class="searchBar"
    (ngSubmit)="onSearchSubmit()"
  >
    <input
      type="text"
      placeholder="Search..."
      formControlName="searchValue"
      class="searchBarInput"
    />
  </form>
  <div class="articlesTable">
    <div class="article" *ngFor="let article of articles">
      {{ article.title }}
    </div>
  </div>
</div>

Here we binded a searchForm to the form that we created and provided an input inside. Also we rendered a list of our articles from the articles property.

Let's check if it's working.

Finished project

As you can see we can search for articles on the backend by making an API call every single time when our form is submitted.

And actually if you want to improve your Angular knowledge and prepare for the interview I highly recommend you to check my course Angular Interview Questions - Coding Interview 2023.

📚 Source code of what we've done