ng2-nested-search - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

package.json

 {
   "name": "ng2-nested-search",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A simple custom pipe for filtering arrays in your angular(2+) projects and get the count of filtered items.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -6,6 +6,10 @@ # ng2-nested-search
 
-![Screen Recording 2021-09-06 at 12 39 44 PM](https://user-images.githubusercontent.com/12426903/132187817-64c11f6e-df6f-440b-98be-a9dc42976f85.gif)
+## Nested Search
 
-![Screen Recording 2021-09-06 at 12 36 50 PM](https://user-images.githubusercontent.com/12426903/132187884-2501cc69-5bb4-470c-88d3-ad991650f61a.gif)
+![Screen Recording 2021-09-06 at 12 36 50 PM](https://user-images.githubusercontent.com/12426903/134805453-7bdec7ba-7100-45af-9113-e2c0d2884535.gif)
 
+## Search on specific properties
+
+![Screen Recording 2021-09-06 at 12 39 44 PM](https://user-images.githubusercontent.com/12426903/134805490-526f1476-a759-4468-810b-76d9e811d6dc.gif)
+
 # How to use
@@ -31,9 +35,10 @@
 
-### initialize the searchText and filterMetadata in your page.ts as follows
+### For enabling nested search, set isNestedSearch to true in the filterMetadata as shown below
 
 ```
-searchText : string = "";
-filterMetadata = { count: 0 };
+    searchName : string = "";
+    searchFamily : string = "";
+    filterMetadata = { count: 0, isNestedSearch : true };
 
-characters = [
+    characters = [
     {
@@ -65,14 +70,23 @@ name : "Daenerys",
 ]
+
 ```
 
-### add the ng2-nested-search component in your page.html as follows (only filtering on name and family in the example)
+### in HTML
 
 ```
-<div style="text-align: center;">
-    <div style="display : inline-block; width : 100%">
-      <input style="width: 100%;" placeholder="Search" [(ngModel)]="searchText"/>
+  <div style="text-align: center;">
+    <div style="display : inline-block; width : 48%">
+      <input style="width: 100%; padding: 13px; border-radius: 4px; border: 1px solid #ccc;" placeholder="Search By Family" [(ngModel)]="searchFamily"/>
     </div>
+    <div style="display : inline-block; width : 48%">
+      <input style="width: 100%; padding: 13px; border-radius: 4px; border: 1px solid #ccc;" placeholder="Search By Name" [(ngModel)]="searchName"/>
+    </div>
   </div>
 
-  <div style="border: 1px solid #ccc;padding: 8px;margin: 8px;border-radius: 4px;" *ngFor="let character of characters | ng2NestedSearch: { 'name' : searchText, 'family' : searchText} : filterMetadata">
+  <div style="padding : 8px 4px 0px 4px;">
+    <span>Total items filtered : </span>
+    <span [innerHTML]="filterMetadata.count"></span>
+  </div>
+
+  <div class="ttct-request" style="border: 1px solid #ccc;padding: 8px;margin: 8px;border-radius: 4px;" *ngFor="let character of characters | ng2NestedSearch: { 'name' : searchName, 'family' : searchFamily} : filterMetadata">
     <div>
@@ -93,23 +107,25 @@ <span style="color: #888;">Name : </span>
 
-### For enabling nested search, set isNestedSearch to true (by default it is false) in the filterMetadata as shown below
+### You may also use a single search box to filter on specific properties only, initialize the searchText and filterMetadata in your page.ts as follows 
 
 ```
-    searchName : string = "";
-    searchFamily : string = "";
-    filterMetadata = { count: 0, isNestedSearch : true };
+searchText : string = "";
+filterMetadata = { count: 0 };
+
 ```
 
-### in HTML
+### add the ng2-nested-search component in your page.html as follows (only filtering on name and family in the example)
 
 ```
-<div style="text-align: center;">
-    <div style="display : inline-block; width : 48%">
-      <input placeholder="Search By Family" [(ngModel)]="searchFamily"/>
+  <div style="text-align: center;">
+    <div style="display : inline-block; width : 100%">
+      <input style="width: 100%; padding: 13px; border-radius: 4px; border: 1px solid #ccc;" placeholder="Search" [(ngModel)]="searchText"/>
     </div>
-    <div style="display : inline-block; width : 48%">
-      <input placeholder="Search By Name" [(ngModel)]="searchName"/>
-    </div>
-</div>
+  </div>
 
-<div style="border: 1px solid #ccc;padding: 8px;margin: 8px;border-radius: 4px;" *ngFor="let character of characters | ng2NestedSearch: { 'name' : searchName, 'family' : searchFamily} : filterMetadata">
+  <div style="padding : 8px 4px 0px 4px;">
+    <span>Total items filtered : </span>
+    <span [innerHTML]="filterMetadata.count"></span>
+  </div>
+
+  <div class="ttct-request" style="border: 1px solid #ccc;padding: 8px;margin: 8px;border-radius: 4px;" *ngFor="let character of characters | ng2NestedSearch: { 'name' : searchText, 'family' : searchText} : filterMetadata">
     <div>
@@ -127,3 +143,3 @@ <span style="color: #888;">Name : </span>
     </div>
-</div>
+  </div>
 ```
@@ -130,0 +146,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16563

increased by4.35%

Number of lines in readme file

152

increased by11.76%

No dependency changes