user-profile.component.ts (675B)
1 import { Component, HostBinding, HostListener, signal, input } from '@angular/core'; 2 3 @Component({ 4 selector: 'button.profile', 5 templateUrl: './user-profile.component.html', 6 styleUrls: ['./user-profile.component.scss'], 7 standalone: true, 8 }) 9 export class UserProfileComponent { 10 userName = 'John Doe'; 11 userEmail = 'john.doe@example.com'; 12 @HostBinding('class.open') isActive = false; 13 14 @HostListener('click', ['$event']) 15 onProfileClick(event: MouseEvent): void { 16 if (!this.isActive) { 17 this.isActive = true; 18 } 19 } 20 21 onClickOutside(clickedOutside: boolean): void { 22 if (this.isActive && clickedOutside) { 23 this.isActive = false; 24 } 25 } 26 }