feat: refactor Button component to use host selector and update usage in NewTicket and Header components

Author: aimxnaim

06-cmp-deep-dive/01-starting-project/src/app/dashboard/shared/button/button.component.css

@@ -1,26 +1,25 @@
-button {
-    display: inline-block;
-    padding: 0.65rem 1.35rem;
-    border-radius: 0.25rem;
-    font-size: 1rem;
-    text-align: center;
-    cursor: pointer;
-    background-color: #691ebe;
-    color: white;
-    border: none;
-  }
-  
-  button:hover {
-    background-color: #551b98;
-  }
-  
-  .icon {
-    display: inline-block;
-    margin-left: 0.5rem;
-    transition: transform 0.2s ease-in-out;
-  }
-  
-  button:hover .icon {
-    transform: translateX(4px);
-  }
-  
+:host {
+  display: inline-block;
+  padding: 0.65rem 1.35rem;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  text-align: center;
+  cursor: pointer;
+  background-color: #691ebe;
+  color: white;
+  border: none;
+}
+
+:host:hover {
+  background-color: #551b98;
+}
+
+.icon {
+  display: inline-block;
+  margin-left: 0.5rem;
+  transition: transform 0.2s ease-in-out;
+}
+
+:host:hover .icon {
+  transform: translateX(4px);
+}

06-cmp-deep-dive/01-starting-project/src/app/dashboard/shared/button/button.component.html

@@ -1,8 +1,6 @@
-<button>
-    <span>
-      {{ buttonTitle() }}
-    </span>
-    <span class="icon">
-      →
-    </span>
-</button>
+<span>
+  {{ buttonTitle() }}
+</span>
+<span class="icon">
+  →
+</span>

06-cmp-deep-dive/01-starting-project/src/app/dashboard/shared/button/button.component.ts

@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 
 @Component({
-  selector: 'app-button',
+  selector: 'button[appButton], a[appButton]',
   standalone: true,
   imports: [],
   templateUrl: './button.component.html',

06-cmp-deep-dive/01-starting-project/src/app/dashboard/tickets/new-ticket/new-ticket.component.html

@@ -6,6 +6,6 @@
       <textarea name="request" id="request" rows="3"></textarea>
     </app-control>
     <p>
-        <app-button buttonTitle="Submit"></app-button>
+      <button appButton buttonTitle="Submit"></button>
     </p>
 </form>

06-cmp-deep-dive/01-starting-project/src/app/header/header.component.html

@@ -12,7 +12,7 @@
           <a href="/">Management</a>
         </li>
         <li>
-          <app-button buttonTitle="Logout"/>
+          <button appButton buttonTitle="Logout"></button>
         </li>
       </ul>
     </nav>