Building Modern Web Applications Using Angular by Shravan Kumar Kasagoni

Author:Shravan Kumar Kasagoni
Language: eng
Format: epub
Tags: COM051260 - COMPUTERS / Programming Languages / JavaScript, COM051280 - COMPUTERS / Programming Languages / Java, COM051010 - COMPUTERS / Programming Languages / General
Publisher: Packt Publishing
Published: 2017-05-29T07:08:02+00:00

Observable.fromEvent(this.suggestions.nativeElement, 'click')

.map((event: KeyboardEvent) =>

(<HTMLInputElement>event.srcElement).innerText)

.subscribe(res => {

this.searchInputTerm = res;

this.bookTitles = [];

});

}

searchBooks() {

this.bookTitles = [];

this.search.emit(this.searchInputTerm);

}

}

The code for src/books/book-search/book-search.component.html is as follows:

<h3 class="page-title">Books Search</h3>

<div class="search-container">

<div class="books-search-form">

<input type="text" #searchInput class="search-input"

placeholder="Book Title" [(ngModel)]="searchInputTerm">

<button class="btn btn-primary" (click)="searchBooks()">

Search

</button>

</div>

<div class="title-suggestion-list--wrapper">

<ul class="title-suggestion-list" #suggestions

[style.display]="bookTitles.length > 0 ? 'block' : 'none'">

<li *ngFor="let bookTitle of bookTitles">{{bookTitle}}</li>

</ul>

</div>

</div>

Here is the AppComponent hosting BookSearchComponent and BooksListComponent which is the root component of our application.

The code for src/app.component.ts is as follows:

import { Component } from '@angular/core';

import { BookStoreService, Book } from './books/index';

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.