Merge pull request #30 from hadesdday/vanhieu

#6 - handle enter keypress for keyword input

src/app/shared/navbar/navbar.component.html

@@ -3,7 +3,7 @@
     <div class="overlay-content d-flex justify-content-center">
         <form class="w-100">
             <input mdbInput type="text" class="form-control" placeholder="Tìm kiếm" aria-label="Search" name="keyword"
-                ngModel [(ngModel)]="keyword" [value]="keyword">
+                ngModel [(ngModel)]="keyword" [value]="keyword" (keypress)="search($event)">
             <a [routerLink]="['/search', keyword,'od=0&time=0&title=chinh-tri']"
                 class="button__search btn bg-danger text-center" type="button" (click)="closeSearchBox()"><i
                     class="fas fa-search text-light"></i></a>

src/app/shared/navbar/navbar.component.ts

@@ -1,21 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import slugify from 'slugify';
 import { API_SUB } from 'src/app/_api/apiURL';
 import { FeedModel } from 'src/app/_model/feed.model';
 import { TokenStorageService } from "../../_service/token-storage.service";
 
 declare var $: any;
-
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })
+
 export class NavbarComponent implements OnInit {
   currentUser: any;
   keyword!: string;
   feeds_list!: FeedModel[];
-  constructor(private tokenStorage: TokenStorageService) {
+
+  constructor(private tokenStorage: TokenStorageService, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -30,6 +32,14 @@ export class NavbarComponent implements OnInit {
     });
   }
 
+  search(event: KeyboardEvent) {
+    if (event.code === "Enter") {
+      const url = $(".button__search").attr("href");
+      this.closeSearchBox();
+      this.router.navigateByUrl(url);
+    }
+  }
+
   openSearchBox() {
     $("#search__overlay").fadeIn(500);
     $("input[name='keyword']").val("");

src/app/shared/search/search.component.html

@@ -1,7 +1,7 @@
 <div class="d-flex justify-content-center mt-4">
-    <input type="text" name="keyword1" value="" class="w-50" placeholder="Tìm kiếm" [(ngModel)]="keyword" />
+    <input type="text" name="keyword1" value="" class="w-50" placeholder="Tìm kiếm" [(ngModel)]="keyword" (keypress)="search($event)"/>
     <a [routerLink]="['/search', keyword,get_selected_option()]" type="button"
-        class="btn text-primary bg-danger ml-20"><i class="fas fa-search text-light"></i></a>
+        class="btn text-primary bg-danger ml-20 search__action"><i class="fas fa-search text-light"></i></a>
 </div>
 <div class="row d-flex justify-content-center mt-4">
     <div class="col-md-2 col-sm-12 search__q">

src/app/shared/search/search.component.ts

@@ -29,6 +29,13 @@ export class SearchComponent implements OnInit {
     this.updateOption();
   }
 
+  search(event: KeyboardEvent) {
+    if (event.code === "Enter") {
+      const url = $(".search__action").attr("href");
+      this.router.navigateByUrl(url);
+    }
+  }
+
   load_data() {
     this.activatedRoute.params.subscribe((params) => {
       this.keyword = params['keyword'];