Search on Button (not Instant Search) with Angular + Firestore (firebase)

Question

Here I have a website project that will later implement search on buttons (not instant seacrh). I'm new to the Angular framework and firestore. I've searched for various tutorials on YouTube and all of them use instant search on Angular / Firestore. because I don't understand the explanation on the website so I'm always looking for tutorials on YouTube. My question here is:

1. Do you have any resources here for seacrh on button with angular & firestore?
2. Are there any proper tutorials for implementing the search on button on youtube?

I really need a search on the button (not instant search) because all the sources I search always use instant search. please, help me if anyone can make a tutorial for BUTTON SEARCH with an explanation from youtube. Thank you to all of you :)

this is my project url: https://skripsi-pwa-opac.web.app/

enter image description here

question from:https://stackoverflow.com/questions/65645242/search-on-button-not-instant-search-with-angular-firestore-firebase

Answer 1

please put some of your code, but this should be straight forward to do in the three steps below. Here is a ref just Search or CRUD sample with search and save

1. Create a Button inside your angular template. Below you have drop down select like so -- SearchAppComponent.html:

<ul>
    <li class="text" *ngFor="let movies of moviess | async">
        <a href="#" (click)="selectMovies(movies)">{{movies.name}}</a>
    </li>
</ul>
<div>Selected Movies: {{myMovies?.name}}</div>
<button (click)="updateSelectedMovies()">Update Movies</button>

---

2. Your model of whatever you want to search

export interface Movies {
    name: string;
    category: string;
}

---

3. Handle the select or click event, Inside your selectChanges event, or a button click event in you searchappcomponent.ts file

async selectMovies(movies: Movies) {

     const snapshotResult = await this.db.collection('movies', ref =>
        ref.where('name', '==', movies.name)
           .limit(1))
           .snapshotChanges()
           .pipe(flatMap(moviess => movies)); 

        snapshotResult.subscribe(doc => {
            this.myMovies = <Movies>doc.payload.doc.data();
            this.moviesRef = doc.payload.doc.ref;
        });