Title: Angular / Routing

Q: What does the following code do?::
```
bootstrapApplication(PhotoAppComponent, { //<1>
  providers: [
      {provide: BACKEND_URL, useValue: 'https://photoapp.looknongmodules.com/api'}, //<2>
      provideRouter([/* app routes */]), //<3>
  ]
  });
```
A: - Bootstraps the application with `PhotoAppComponent`
- Creates the config value BACKEND_URL that `PhotAppComponent` can use
- Configures the routes.

Q: In the `bootstapApplication` function, how can you configure routes?::
A: Pass in the routes to the `provideRouter` function.

Q: What does the `loadComponent` function do?::
```
export const ROUTES: Route[] = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/panel.component').then(mod => mod.AdminPanelComponent)
  },
  ];
```
A: It configures the admin route to lazy load the component.

Q: Which function can you use to lazy load a standalone component?::
A: `loadComponent`

Q: What does `loadChildren` do in the following code?::
`{path: 'admin', loadChildren: () => import('./admin/routes').then(mod => mod.ADMIN_ROUTES)},`
A: `loadChildren` lazy loads all components defined in ADMIN_ROUTES.

Q: Explain in detail the following code-::
```
import { NgModule } from '@angular/core'; //<1>
import { Routes, RouterModule } from '@angular/router'; //<2>
const routes: Routes = []; //<3>
@NgModule({ //<4>
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]<br>})
export class AppRoutingModule { } //<5>
```
A: - Imports `NgModule`.
- Imports `Routes` and `RouterModule`.
- Adds routes array.
- Configures `NgModule` decorator.
- Exports the `AppRoutingModule` class

Q: Explain in detail what does the following code do:-::
```
const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  ];
```
A: Defines the routes for first-component and second-component.

Q: What is routerLink and router-outlet?::
```
<a routerLink="/first-component" routerLinkActive="active">First Component</a>
<a routerLink="/second-component" routerLinkActive="active">Second Component</a>
<router-outlet></router-outlet>
```
A: - `routerLink` attribute adds the route.
- router-outlet is where the view renders.

Q: In what order should you add routes?::
A: - Static Path
- Empty Path - default route.
- Wildcard Path - not found route.

Q: Which route should be last by default?::
A: The wildcard route.

Q: How can you add a wildcard route to your routes definition?::
A: `{ path: '**', component: <component-name> }`

Q: In the providers array, in the provideRouter method, how will you enable input binding with routing?::
A: `providers: [provideRouter(appRoutes, withComponentInputBinding()),]`

Q: What are eager-loaded modules?::
A: These are loaded at application startup.

Q: How do you declare eager-loaded modules?::
A: In the imports array of another module.

Q: What are lazy-loaded modules?::
A: These are loaded on demand due to in-app navigation.

Q: How do you declare lazy-loaded modules?::
A: In the routing module.

Q: Why does Angular use `Zone.js`?::
A: To detect any changes to the application state.

Q: Which library helps angular detect changes to an application's state?::
A: `Zone.js`

Q: What events does Zone.js listen for and capture in an angular application?::
A: `setTimeouts`, `setIntervals`, network requests, and event listeners.

Q: What does `runOutsideAngular` do?::
```
ngOnInit() {
    this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
    }
```
A: It excludes the passed in function for change detection.

Q: What does angular do on each change detection cycle? (2 steps)::
A: - Evaluates all template expressions in all non-onPush components of the application.
- Executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks of each component.

Q: Which lifecycle hooks does each change detection cycle execute?::
A: - `ngDoCheck`
- `ngAfterContentChecked`
- `ngAfterViewChecked`
- `ngOnChanges`

Q: Why should you make sure that the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks execute quickly?::
A: Because these methods run after every change detection cycle.

Q: A component has `OnPush` change detection strategy, When does change detection run for this component?::
A: The component receives new inputs.

Q: Which command generates an application with routing enabled?::
A: ng new routing-app --routing --defaults

Q: What is a `RouterOutlet`?
A: It is an angular component that acts as a placeholder that Angular dynamically fills based on the current router state.

Q: What are named `RouterOutlets`?
A: They are router outlet components that have the optional name property set.
`<router-outlet name='left'></router-outlet>`

Q: How can you define a route object to use a named `RouterOutlet`?
A: `{path: <base-path>, component: <component>, outlet: <target_outlet_name>}`

Q: How do you provide bootstrapApplication with routing?
A: In the providers option, call the `provideRouter` function providing the `appRoutes`.