Component decorator and metadata in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Component decorator in Angular?

The @Component decorator marks a class as an Angular component and provides metadata that tells Angular how to process, instantiate, and use the component in the app.

beginner

Name three common metadata properties used inside the @Component decorator.

Common metadata properties include:<br>- selector: the HTML tag to use the component<br>- templateUrl or template: the HTML view for the component<br>- styleUrls or styles: CSS styles for the component

beginner

How does the 'selector' property in @Component metadata affect the component?

The 'selector' defines the custom HTML tag that represents the component. When Angular sees this tag in HTML, it creates and inserts the component there.

intermediate

What is the difference between 'template' and 'templateUrl' in component metadata?

'template' contains inline HTML code as a string inside the component metadata.<br>'templateUrl' points to an external HTML file that contains the component's template.

beginner

Why is metadata important in Angular components?

Metadata tells Angular how to create and display the component, what HTML tag to use, what template and styles to apply, and how to connect the component to the app.

Which decorator is used to define an Angular component?

A @Component

B @Injectable

C @Directive

D @NgModule

The @Component decorator is specifically used to define Angular components.

What does the 'selector' property in @Component metadata specify?

A The CSS styles for the component

B The external JavaScript file for the component

C The HTML tag name to use the component

D The component's class name

The 'selector' defines the custom HTML tag that represents the component.

Which property would you use to link an external HTML file as the component's template?

A styleUrls

B templateUrl

C template

D styles

'templateUrl' points to an external HTML file for the component's template.

Can you use inline CSS styles inside the @Component decorator metadata?

A Yes, using the 'styles' property

B Only with the 'template' property

C No, styles must be in external files

D Only in the main app module

You can use the 'styles' property to add inline CSS styles directly in the component metadata.

What happens if you forget to add a selector in the @Component metadata?

A The component will throw a runtime error

B Angular will use a default selector

C The component will automatically render everywhere

D The component cannot be used in HTML templates

Without a selector, Angular does not know what HTML tag to use for the component, so it cannot be inserted in templates.

Explain the role of the @Component decorator and its metadata in Angular.

Think about how Angular knows what a component is and how to display it.

Describe the difference between 'template' and 'templateUrl' in component metadata and when you might use each.

Consider how you organize your HTML code for components.