How to use LIKE operator with AngularFire?

I will show you a way, what how to use LIKE operator with AngularFire.

This post is based on this.

ng version

Angular CLI: 9.0.2
Node: 12.16.0

Package                           Version
-----------------------------------------------------------
@angular-devkit/core              9.0.2
@angular/cli                      9.0.2
@angular/fire                     6.0.0-rc.1

codes

src/app/models/user.model.ts

export class User {
  id: string;
  name: string;
  createdAt: Date;
}

src/app/services/user.service.ts

import { Injectable } from "@angular/core";
import { AngularFirestore } from "@angular/fire/firestore";
import { User } from "src/app/models/user.model";

@Injectable()
export class UserService {
  constructor(private firestore: AngularFirestore) {}

  findUsers(name: string) {
    // 'users' is a name of users collection on Firestore
    return this.firestore.collection<User>('users', ref => { return ref.orderBy('name').startAt(name).endAt(name+'\uf8ff') }).snapshotChanges();
  }
}

src/app/components/user/user.component.ts

import { Component, OnInit } from "@angular/core";
import { UserService } from "src/app/services/user.service";

@Component({
  selector: "app-user",
  templateUrl: "./user.component.html",
  styleUrls: ["./user.component.scss"]
})
export class UserComponent implements OnInit {
  constructor(private uService: UserService) {}

  ngOnInit(): void {}

  search() {
    this.uService.findUsers("A part of the user name you want to find").subscribe(data => {
      console.log(data)
    });
  }
}

Above codes are now working completely.

I hope that this post helps you for using LIKE operator with AngularFire.

If you got some problems. Don't be confused. Please share me with information about errors. I will teach you how to fix it.

Thank you for reading.

Blog

How to use LIKE operator with AngularFire?

rikoroku

ng version

codes

Join Our Newsletter. No Spam, Only the good stuff.

Related