[Solved] How do you correctly define a standalone component in Angular? — Ans: @Component({ selector: 'app-example', standalone: true, template: 'Example' })... | Angular

Angular - Standalone Components

How do you correctly define a standalone component in Angular?

A@Component({ selector: 'app-example', standalone: false, template: 'Example' }) export class ExampleComponent {}

B@Component({ selector: 'app-example', standalone: true, template: 'Example' }) export class ExampleComponent {}

C@Component({ selector: 'app-example', template: 'Example' }) export class ExampleComponent {}

D@NgModule({ declarations: [ExampleComponent], standalone: true }) export class ExampleModule {}

Step-by-Step Solution

Solution:

Step 1: Use @Component decorator
The component must be decorated with @Component.
Step 2: Set standalone to true
Adding standalone: true in the decorator makes it a standalone component.
Step 3: Provide template or templateUrl
The component must have a template or templateUrl defined.
Final Answer:
@Component({ selector: 'app-example', standalone: true, template: '
Example
' }) export class ExampleComponent {} correctly declares a standalone component.
Quick Check:
Standalone components require standalone: true in @Component [OK]

Quick Trick: Standalone components need 'standalone: true' in @Component [OK]

Common Mistakes:

Master "Standalone Components" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

How do you correctly define a standalone component in Angular?