I got this weird stuff going on and I can’t understand why

                {{!loggedIn}}
                <div class="flex gap-4" *ngIf="!loggedIn">
                    <button
                        [routerLink]="['/auth', 'register']"
                        class="cursor-pointer rounded bg-primary-100 px-4 py-2 text-primary-400 hover:bg-primary-50"
                    >
                        Get Started
                    </button>
                    <button
                        [routerLink]="['/auth', 'login']"
                        class="cursor-pointer rounded bg-primary-100 px-4 py-2 text-primary-400 hover:bg-primary-50"
                    >
                        Login
                    </button>
                </div>

Then I have

   ngOnInit () {
    this.loggedIn = false
    this.authStateService.subscribe(val=> {
        this.loggedIn = val.isAuthenticated;
    })
}

the result looks like this:

This is the bootstrap:

import { provideHttpClient, withFetch } from '@angular/common/http'
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'
import { provideClientHydration } from '@angular/platform-browser';
import { provideServerRendering } from '@angular/platform-server'
import { appConfig } from './app.config'

const serverConfig: ApplicationConfig = {
    providers: [
        provideServerRendering(),
        provideClientHydration(),
        provideHttpClient(withFetch()),
    ],
}

export const config = mergeApplicationConfig(appConfig, serverConfig)

Question is: why is it rendered, when it shouldn’t be?