How to use LIKE operator with AngularFire?

rikoroku — Thu, 30 Jul 2020 02:24:14 +0000

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.

DEV Community: rikoroku

How to use LIKE operator with AngularFire?

ng version

codes