CODEWITHSUNDEEP
angularelasticsearch
SkurSkurrrr
SkurSkurrrr

Reputation: 119

Search in Angular with Elasticsearch

so i am very new to Angular and elastic and i need ur help because i am stuck and couldn't find anything online. So i want to make a search bar which sends a GET request to my elasticsearch database and looks for usernames. I am using Angular for my project and like i said i never used both of them before (university project)

So i have my search service which should use the elastic URL with the search for usernames and a getElasticResult methode which sends the GET request with the searched Text/username:

import { Injectable } from '@angular/core';
import {HandleError, HttpErrorHandler} from '../http-error-handler.service';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {User} from '../timeline/user';
import {Observable} from 'rxjs';


const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})

export class SearchService {

  getElastic = 'http://34.65.42.287:9200/users/_doc/_search?q=username:';
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('TimelineService');
  }
  /** GET elasticsearch result */
  getElasticResult( text: string ): Observable<User> {
    return this.http.get<User>(this.getElastic + text);
  }
}

Then i have a component file which creates the search form and a user to safe the user from the GET request. the getUser method reads the text from the form and calls the getElasticResult method to get the user from elastic and safes it on the newly created user:

import {Component, OnInit, Pipe, PipeTransform} from '@angular/core';
import {SearchService} from './search.service';
import {User} from '../timeline/user';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-search-service',
  templateUrl: './search.component.html',
  providers: [SearchService],
  styleUrls: ['./search.component.css']
})

export class SearchServiceComponent {
  user: User;
  angForm: FormGroup;


  constructor(private searchservice: SearchService, private  fb: FormBuilder) {
    this.createSearchForm();
    console.log('adasd');

  }

  createSearchForm() {
    this.angForm = this.fb.group({
      searchText: ['', Validators.required]
    });
  }

  getUser(text: string): void {
    text = this.angForm.get('searchText').value;
    this.searchservice.getElasticResult(text).subscribe(user => (this.user = user));
  }
}

And now to the HTML part of this service. This is where i have no clue what to do to be honest. I tried making a form with the angForm from the component but i do not really now how to send the inputed data to the component and then to show the found user under the searchbar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form [formGroup]="angForm"  class="form-inline my-5 my-lg-0">
  <input id="searchText" name="searchText" class="form-control" type="text" placeholder="Search for user" aria-label="Post"
         formControlName="searchText" required>
   <p> {{getUser("elon")}}</p>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

</body>
</html>

Here the searchbar: enter image description here

Upvotes: 0

Views: 1096

Answers (1)

thisdotutkarsh
thisdotutkarsh

Reputation: 980

You can implement the following,

In your component.ts file,

getUser() {
 let userName = this.angForm.value.searchText;
 console.log(this.angForm.value, userName);
 this.searchservice.getElasticResult(userName).subscribe(user => (this.user = user))
}

Also,

In your component.html file,

Initialize form element, <form [formGroup]="angForm" (ngSubmit)="getUser()">

Also, in your component.ts file.

import {FormBuilder, Validators} from '@angular/forms';
    export class SearchServiceComponent {
     angForm = this.fb.group({
      searchText: ['', Validators.required]
    });

    constructor(private fb: FormBuilder, private searchservice: SearchService ) { }

    //Code

    }

Upvotes: 1

Related Questions