Angular intermediate

Question 1

Create a new Angular app with name “Demo” having routing enabled and css syling as scss

Answer 1

ng new demo
–routing
–style=scss

Question 2

create a dashboard module having two components:
dashboard & stats

Answer 2

ng g m dashboard
ng g c dashboard/dashboard
ng g c dashboard/stats

Question 3

List the configuration parameters of NgModule along with their purpose

Answer 3

1. declarations: Components, Directives and Pipes owned by this module.
2. imports: other Modules on which it depends
3. exports: which components/directives/pipes this module exposes
4. providers: services scoped to this module

Question 4

Why do we import CommonModule in a standalone component?

Answer 4

• For using structural directives like *ngIf, *ngFor
• For using attribute directives like ngClass, ngStyle
• For using built-in pipes like date, async etc.

Question 5

to inject HttpClient in your component, which module do you need to import?

Do we need to import it in every component?

Answer 5

HttpClientModule

However, we can use
providers: [provideHttpClient()]
in the bootstrapApplication() appconfig parameter in main.ts file. Then, we don’t need to import HttpClientModule in every component.

since version 17

Question 6

How do you lazy-load Dashboard module in app-routing.module.ts?

Answer 6

Inside app-routing.module.ts:
{
path: “dashboard”, loadChildren: () => import(./dashboard/dashboard.module)
.then(m => m.DashboardModule)
}

Define DashboardRoutingModule and in @NgModule, use
imports: [RouterModule.forChild(routes)],

Import DashboardRoutingModule inside DashboardModule

Question 7

How do you lazy-load ProfileCardComponent in app.routes.ts?

Answer 7

{
path: ‘profile’,
loadComponent: () =>
import(‘./profile-card/profile-card.component’).then(m => m.ProfileCardComponent)
}

Question 8

Explain two usecases when you used effect with signals in Angular.

Answer 8

1. syncing signal state with local storage
   effect(() => { localStorage.setItem(‘chartType’, chartType());
   });
2. refetch data when user changed category filter

Question 9

Explain how computed() works for derived state?

Answer 9

const total = computed(() => price() + gst());

Question 10

Benefit(s) of using input() signal over the @Input() decorator

Answer 10

No need to handle reactivity manually using ngOnChanges hook.

For simple binding without reactivity, use @Input()