import { Component } from '@angular/core';
import { AuthService } from '../auth/auth.service'
import { BehaviorSubject } from 'rxjs';
import { User } from '../auth/user';
@Component({
selector: 'app-user-details',
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent {
user:BehaviorSubject<User | null> = this.AuthService.LoggedUser$;
constructor(private AuthService: AuthService) { }
}
<div class="user-details">
<img src="assets\images\user.png" width="200" height="0" class="img-fluid rounded" alt="User Image">
<h1>{{(user | async)?.name}}</h1>
<h3>{{(user | async)?.quote}}</h3>
<div class="social">
<a href="https://www.linkedin.com/in/adel-a-abdelkader/" target="_blank">
<i class="bi bi-linkedin"></i>
</a>
<a href="https://github.com/THEPEACEMAKER" target="_blank">
<i class="bi bi-github"></i>
</a>
</div>
</div>
.user-details {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 5px;
border: 1px solid #e6e6e6;
background-color: #eee;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 50%;
margin: 20px auto;
font-size: 100px;
font-family: Futura;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(245, 245, 245, 0.5) 3px 5px 1px;
}
.social {
display: flex;
}
.social a {
width: 20px;
height: 20px;
font-size: 2.5rem;
text-decoration: none;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: #f5af19;
cursor: pointer;
opacity: 0.6;
}
Legend
Html element with directive