Поиск документов. Поиск документов. angular form search

Поиск документов.

Open in new window

Поиск документов.

Создаем компонент.

ng g component document/search

Изменим селектор.

@Component({
  selector: 'app-document-search',

Подключаем в шаблоне.

 <app-document-search></app-document-search>

Шаблон поиска

<form class="form-inline">
  <div class="form-group">
    <input class="form-control" placeholder="Search" aria-label="Search">
    <a class="btn btn-outline-success" type="submit">Search</a>
  </div>
</form>

Привяжем событие клика на кнопке.

<a (click)="SearchSubmit()" class="btn btn-outline-success" >Search</a>

Определим в сервисе медоды для подписки и генерации события.

import {BehaviorSubject} from "rxjs/Rx";

export class DocumentService {

  private _search_emmiter = new BehaviorSubject(null);
  search_subscriber$ = this._search_emmiter.asObservable();

  fireSearchEvent(key: string){
    this._search_emmiter.next(key);
  }

Генерируем событие внутри компонента которому передаем строку поиска.

import { DocumentService } from '../document.service';

...    
constructor(private doc_service: DocumentService) { }
...
SearchSubmit(){
    this.doc_service.fireSearchEvent('testkey');
}

Внедрим сервис на который можно подписаться и подписываемся в компоненте списка.

Подключим модуль работы с формами в модуль поиска.

import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    FormsModule
  ]
})

Определим переменную в компоненте поиска и прокинем ее в функцию клика.

import { Component, OnInit } from '@angular/core';
import { DocumentService } from '../document.service';

@Component({
  selector: 'app-document-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.sass']
})
export class SearchComponent implements OnInit {

  search_key: string;

  constructor(private doc_service: DocumentService) { }

  ngOnInit() {
  }

  SearchSubmit(){
    this.doc_service.fireSearchEvent(this.search_key);
  }

}

Привяжем элемент формы к переменной search_key.

<input [(ngModel)]="search_key" name="search_key" class="form-control" placeholder="Search">

Other topics