How to hide the image element before login in AngularDart

Question

I wanted to hide the image element at the left of SIGN IN button in the image, it's an image display before login. How can I do it in AngularDart?

app_component.html

    <div header class="custom-header">
        <img class="icon" [src]="fbService.user?.photoURL">
        <div id="user-name">{{fbService.user?.displayName}}</div>
        <div id="email">{{fbService.user?.email}}</div>
     </div>

app_component.css

.icon {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

Answer 1

<img *ngIf="authService.isLoggedIn" class="icon" [src]="fbService.user?.photoURL">

or

<img *ngIf="authService.isLoggedIn | stream" class="icon" [src]="fbService.user?.photoURL">

if isLoggedIn is a stream.

You would need a global service that provides the isLoggedIn status and is injected to the component that contains the <img ...> element (under the name authService.