Standalone component declaration in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a standalone component in Angular?

A standalone component is an Angular component that does not require being declared inside an NgModule. It can be used independently and imported directly where needed.

beginner

How do you declare a component as standalone in Angular?

You add the property standalone: true in the @Component decorator metadata.

intermediate

Can standalone components import other standalone components or Angular modules?

Yes, standalone components can import other standalone components, directives, pipes, or Angular modules using the <code>imports</code> array in the <code>@Component</code> decorator.

intermediate

What is the benefit of using standalone components in Angular?

Standalone components simplify Angular apps by reducing the need for NgModules, making the code easier to read, maintain, and enabling faster compilation.

beginner

Show a simple example of a standalone component declaration in Angular.

Example:<br><pre>import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<h1>Hello, Angular!</h1>`
})
export class HelloComponent {}</pre>

What property must be set to true to make an Angular component standalone?

A standalone

B independent

C moduleFree

D selfContained

The property standalone: true in the component decorator makes it a standalone component.

Can a standalone component be used without declaring it in an NgModule?

A No, it must be declared in an NgModule.

B Only if it imports an NgModule.

C Yes, it can be used directly.

D Only in Angular versions before 14.

Standalone components do not require NgModule declarations and can be used directly.

Where do you specify other components or modules a standalone component uses?

A In the bootstrap array inside NgModule.

B In the declarations array inside NgModule.

C In the providers array inside the component.

D In the imports array inside the @Component decorator.

Standalone components use the imports array inside the @Component decorator to include other components or modules.

Which Angular version introduced standalone components?

A Angular 12

B Angular 14

C Angular 10

D Angular 16

Standalone components were introduced in Angular 14.

What is a key advantage of standalone components?

A They reduce the need for NgModules.

B They require more boilerplate code.

C They cannot import other components.

D They only work with class components.

Standalone components simplify app structure by reducing the need for NgModules.

Explain how to create a standalone component in Angular and why it might be useful.

Think about how Angular components usually need NgModules and how standalone changes that.

Describe how standalone components handle dependencies like other components or Angular modules.

Consider where you specify what a component needs to work.