A simple Angular Search UI implementation

The search box is implemented through the Input control:

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-search-input'.templateUrl: './search-input.component.html'.styleUrls: ['./search-input.component.css']})export class SearchInputComponent implements OnInit {
  isSearching = true;

  // Send an event from EventEmitter with type string
  @Output() searchEventEmitter = new EventEmitter<string> (); bookName:string;
  constructor(){}ngOnInit() {
    // this.searchEventEmitter.emit('jerry');}}Copy the code

HTML: Send the value of the Input field (ngModel) through searchEventEmitter. Emit:

In the HTML that consumes this Component:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: