Assignment #20 - Working with the Keyed Component

     This is another challenge lab.
     
     
     Here I will give you keyed.component.html, and ask you to
     write the code behind and the Http service methods
     
     Here is keyed.component.html:

     <div *ngIf="category">
         <h3>{{category.name}}</h3>
     </div>
     <div *ngIf="keyedHumor">
         <h4>{{keyedHumor.key}}: {{keyedHumor.message}}</h4>
     </div>
     <div class="dropdown">
         <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Select a key</button>
         <ul class="dropdown-menu">
             <li *ngFor="let key of keys | async">
                 <a class="dropdown-item"  (click)="findKeyed(key)">{{key}}</a>
             </li>
         </ul>
     </div>
 
 
 	please note:  Bootstrap using jQuery internally to support dropdowns and other user actions
 	
 	so please check your angular.json file to make sure you are using the correct verion
 	of the Bootstrap script in architect -> build -> scripts:
 	
 	It may say:
 	
 	"scripts": [
	      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    	]
    	
 	It should say:
 	
 	"scripts": [
		"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    	]
    	
    	
    	--------------------------------------------------------------------------
    	
    	Your assignment is to make the HTML code work...
    	
    	Suggestions:
    	
    	1) make sure every field used by the view is in the code behind
    	
    	2) make sure every User action on the view has a matching method in the 
    	    code behind
    	    
    	3) make sure you know what URL you need to call the HumorREST Web Service
    	    you may want to test this is Browser to see the results