How to search for elements and change the array? Angular

Question

I need your help. I have a service called articleService and home.component. In home.component I try to display all articles. The fact is that I try to filter by article: enter text into the input and I was shown articles that have a similar title (title) or have similar content (summary). I have no errors in this code, but it does not work at all when I enter text in the input. Please tell me how to do a search and the items are displayed in order, the one-match article in the title is higher than the one-match article in the description. Thank you very much

home.component.ts

import {ArticleModel} from "../../model/articleModel";
import {FormControl, FormGroup} from "@angular/forms";

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

export class HomeComponent implements OnInit {

   articles: ArticleModel[];
   article = new FormControl('');

   searchArticlesForm: FormGroup = new FormGroup({
     article: this.article
   })

   constructor(private articleService: ArticleService) { }

   ngOnInit(): void {
     this.articleService.getArticles().subscribe(value => this.articles = value);
   }

   searchArticle() {
    this.articleService.findArticlesByNameAndContent(this.searchArticlesForm.value, this.searchArticlesForm.value)
   .subscribe(value => this.articles = value);
   }
}

home.component.html

<form [formGroup]="searchArticlesForm">
   <input type="text" formControlName="article" (change)="searchArticle()">
</form>
<div *ngFor="let article of articles" class="different_article">
  <div class="article_title">{{article.title}}</div>
  <div class="article_text">{{article.summary | slice:0:100}}...</div>
</div>

article.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {map, Observable, tap} from "rxjs";
import {ArticleModel} from "../model/articleModel";

@Injectable({
   providedIn: 'root'
})

export class ArticleService {

   private url = 'https://api.spaceflightnewsapi.net/v3/'
   constructor(private httpClient: HttpClient) {}

   getArticles():Observable<ArticleModel[]> {
      return this.httpClient.get<ArticleModel[]>(this.url + 'blogs?_limit=75');
   }

   findArticlesByNameAndContent(title: string, summary: string):Observable<ArticleModel[]> {
     return this.httpClient.get<ArticleModel[]>(this.url + 'blogs?_limit=75').pipe(
    tap(x => console.log(x)),
    map(articles => articles.filter(article => article.title.includes(title) || article.summary.includes(summary))));
   }
}

Answer 1

I guess the problem is here:

searchArticle() {
  this.articleService.findArticlesByNameAndContent(this.searchArticlesForm.value, this.searchArticlesForm.value)
    .subscribe(value => this.articles = value);
}

Remember that formGroup.value returns an object with the key/value pairs of the formControls and you are expecting string parameters in your method.

If you change this call

  findArticlesByNameAndContent(this.searchArticlesForm.value, this.searchArticlesForm.value)

for this one

  findArticlesByNameAndContent(this.searchArticlesForm.value.article, this.searchArticlesForm.value.article)

should work.

   ngOnInit(): void {
     this.articleService.getArticles().subscribe(value => this.articles = value);
     this.searchArticlesForm.valueChanges.subscribe(() => {
      this.searchArticle();
     });
   }

This is a quick solution, of course can be improved!