How do you conditionally render Login/Logout with isLoggedIn in Vue or Angular?

WHAT THIS TESTS: Whether you understand the trade-off between DOM structural changes and CSS visibility toggles, and whether you can pick the right tool based on toggle frequency and component lifecycle costs. Interviewers want to see that you know structural directives destroy and recreate nodes while CSS toggles preserve state but hide visually.

A GOOD ANSWER COVERS: Four things in order. First, the implementation: use v-if and v-else on the two buttons in Vue, or *ngIf with an else template reference in Angular. Second, the behavioral difference: v-if and *ngIf are real conditional rendering that removes the element from the DOM, tears down event listeners, and destroys child components when the condition is false. Third, v-show and hidden keep the element in the DOM at all times and only flip the display CSS property, so the node remains mounted and state is preserved. Fourth, the decision rule: prefer v-if or *ngIf when the condition rarely changes because initial lazy rendering saves cost, and prefer v-show or hidden when toggling is frequent because CSS changes are cheaper than mount and unmount cycles.

COMMON WRONG ANSWERS: Three red flags stand out. One, saying the directives are interchangeable or that you always use one of them out of habit. Two, claiming that v-show or hidden removes the element from the DOM. Three, forgetting that v-if is lazy and will not render anything on initial load if the condition is false, which matters for performance and for avoiding premature data fetching inside hidden child components.

LIKELY FOLLOW-UPS: The interviewer may ask what happens to child component state when you toggle v-if versus v-show. They may also ask how to toggle a whole block without adding a wrapper div, which is where v-if on a template element or ng-container comes in. Another common follow-up is the performance cost of destroying and recreating a complex component tree versus hiding it, or how these choices affect accessibility and focus management.

ONE CONCRETE EXAMPLE: Imagine a dashboard sidebar with a user profile card. If the user clicks a collapse button ten times a minute, use v-show to keep the card mounted and preserve its scroll position and internal form state. If the user only sees the admin panel once per session based on a role check, use v-if so the heavy admin widgets do not initialize until they are actually needed.