working dropdown

Author: actionanand

src/app/client-tractor/client-tractor.component.html

@@ -18,7 +18,7 @@ <h4>
       <div>
         <span *ngFor="let i of [].constructor(tractor.stars)" class="tractor-container-dropdown-item-rate"> &#x2B50;</span>
       </div>
-      <button class="btn-tractor-buy" style="width:100%">Buy Now!</button>
+      <button class="btn-ng-dropdown btn-tractor-buy" style="width:100%">Buy Now!</button>
     </div>
   </ng-template>
 </app-my-selector>

src/app/client-tractor/client-tractor.component.sass

@@ -2,3 +2,27 @@
 	width: 150px 
 	height: 100px 
 	vertical-align: middle 
+
+.btn-ng-dropdown 
+	display: inline-block 
+	font-weight: 400 
+	text-align: center 
+	white-space: nowrap 
+	vertical-align: middle 
+	user-select: none 
+	border: 1px solid transparent 
+	padding: 0.375rem 0.75rem 
+	font-size: 1rem 
+	line-height: 1.5 
+	border-radius: 0.25rem
+	&:not(:disabled):not(.disabled) 
+		cursor: pointer
+
+	.btn-tractor-buy 
+	color: #fff 
+	background-color: #dc3545 
+	border-color: #dc3545 
+	&:hover 
+		color: #fff 
+		background-color: #c82333 
+		border-color: #bd2130 

src/app/my-selector/my-selector.component.ts

@@ -29,5 +29,6 @@ export class MySelectorComponent<T extends { name: string }> {
   selectOption(option: T) {
     this.picked = option;
     this.selectionChanged.emit(option);
+    this.isDropDownOpen = !this.isDropDownOpen;
   }
 }