Functional Guards

Preview — 3 of 10 questions

What does withComponentInputBinding() enable?

javascript

// app.config.ts
provideRouter(routes, withComponentInputBinding())

// Route definition:
{
  path: 'users/:id',
  component: UserDetailComponent,
  resolve: { user: userResolver },
  data: { title: 'User Profile' },
}

// Component — no ActivatedRoute needed:
@Component({ standalone: true })
export class UserDetailComponent {
  // Automatically bound from route params
  @Input() id!: string;

  // Automatically bound from resolver
  @Input() user!: User;

  // Automatically bound from route data
  @Input() title!: string;

  // Automatically bound from query params
  @Input() tab?: string;  // ?tab=settings
}

AIt allows components to bind to each other's @Input() properties directly

BIt makes @Input() properties available in route guards via injection

CIt enables two-way binding between router state and form controls

DIt automatically binds route parameters, query params, and resolver data to matching component @Input() properties

How do named router outlets work?

javascript

// Template with multiple outlets:
@Component({
  template: `
    <router-outlet />                    <!-- primary outlet -->
    <router-outlet name="sidebar" />     <!-- named outlet -->
    <router-outlet name="footer" />      <!-- another named outlet -->
  `,
  standalone: true,
  imports: [RouterOutlet],
})
export class AppComponent {}

// Route configuration:
const routes: Routes = [
  {
    path: 'dashboard',
    children: [
      { path: '', component: DashboardComponent },  // primary
      { path: 'nav', component: NavComponent, outlet: 'sidebar' },
    ],
  },
  // Navigating to multiple outlets simultaneously:
  // this.router.navigate([{ outlets: { primary: 'dashboard', sidebar: 'nav' } }])
];

// routerLink for named outlet:
// <a [routerLink]="[{ outlets: { sidebar: ['nav'] } }]">Open Nav</a>

// Clearing a named outlet:
// this.router.navigate([{ outlets: { sidebar: null } }])

ANamed outlets are independent outlets (<router-outlet name="sidebar">) that are activated by routes with a matching outlet property, allowing multiple components to render simultaneously

BMultiple components render in the same outlet, stacked on top of each other

CNamed outlets are used exclusively for modal dialogs

DNamed outlets replace child routes and cannot be used together

How do you configure scroll restoration with Angular's router?

javascript

provideRouter(routes, withInMemoryScrolling({
  scrollPositionRestoration: 'enabled',  // restore scroll on back/forward navigation
  anchorScrolling: 'enabled',            // scroll to #anchor links
}))

// With ViewTransitions (smooth scroll):
provideRouter(routes,
  withViewTransitions(),
  withInMemoryScrolling({ scrollPositionRestoration: 'top' }),
)

// Custom scroll behavior — scroll to specific element:
@Injectable({ providedIn: 'root' })
class CustomScrollService {
  constructor(private router: Router, private viewportScroller: ViewportScroller) {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
    ).subscribe(() => {
      const fragment = this.router.routerState.snapshot.root.fragment;
      if (fragment) {
        this.viewportScroller.scrollToAnchor(fragment);
      } else {
        this.viewportScroller.scrollToPosition([0, 0]);
      }
    });
  }
}

AAngular automatically scrolls to the top on every navigation — no configuration needed

BAdd scrollRestoration: 'auto' to the browser's History API manually

CUse withInMemoryScrolling() feature in provideRouter(), configuring scrollPositionRestoration and anchorScrolling

DUse @HostListener('scroll') in the root component to save and restore scroll position

Answer all 10 questions (7 more), see explanations for every answer, and track your score.