I’m using Angular 19 with SSR, and I have a dropdown that momentarily displays the wrong value (e.g., the first option or a default) before updating to the correct one. I need the dropdown to show the correct value immediately upon rendering.

Current Behavior:

The dropdown briefly displays an incorrect or default value (e.g., "All categories") for a second. After a moment, it updates to the correct value based on the route parameter or the state.

Expected Behavior:

The dropdown should show the correct value immediately upon rendering without flickering or showing the default value.

/illunix/flickering-issue-angular

Current behavior

I’m using Angular 19 with SSR, and I have a dropdown that momentarily displays the wrong value (e.g., the first option or a default) before updating to the correct one. I need the dropdown to show the correct value immediately upon rendering.

Current Behavior:

The dropdown briefly displays an incorrect or default value (e.g., "All categories") for a second. After a moment, it updates to the correct value based on the route parameter or the state.

Expected Behavior:

The dropdown should show the correct value immediately upon rendering without flickering or showing the default value.

https://stackblitz/github/illunix/flickering-issue-angular

Current behavior

• angular
• angular-signals
• angular-ssr

• Your link is not working, could you please check ? – Raphaël VO Commented Nov 20, 2024 at 16:25
• It works you just need to refresh the page, I don't know why but if stackoverflow redirect to stackblitz it shows it does not exist. Also I've created a bug in Angular because this behavior is not normal, you can take a look here github/angular/angular/issues/58780 @RaphaëlVO – Maks Szokalski Commented Nov 20, 2024 at 17:56
• You are using SSR so your select is being rendered on the server (no JS) before being sent and immediately displayed. Once it hits the browser it hydrates and the logic kicks in. Wrap your select and conditionally render it when, and only when, it's displayed in a browser (using isPlatformBrowser). – Sam Scholefield Commented Nov 21, 2024 at 6:00
• I think the answer of Naren explain better how to handle it, you should defer in this case to render when thing is ready – Raphaël VO Commented Nov 21, 2024 at 10:06

1 Answer 1

The SSR should set the field then become stable and then serve the HTML on the server, this does not happen, until then you can workaround with defer which only renders on the browser, which is as per Sam Scholefield comment.

    @defer {
        <select
        #category
        name="categories"
        [(ngModel)]="selectedCategory"
        style="margin-right: 10px;"
        >
        @for (category of categoriesState.categories; track category;) {
        <option [value]="category.name">{{ category.name }}</option>
        }
        </select>
        <input [value]="selectedCategory()" />
    }