Component selector usage in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a component selector in Angular?

A component selector is a string that defines how to use a component in HTML. It acts like a custom HTML tag or attribute to place the component in a template.

beginner

How do you use an element selector in Angular?

You use the selector as a custom HTML tag. For example, if the selector is 'app-hello', you write in your template.

intermediate

What is the difference between element and attribute selectors in Angular components?

Element selectors look like custom tags (e.g., ), while attribute selectors are used as attributes on existing tags (e.g., <div app-item>). Both render the component but differ in usage style.

intermediate

Can you use multiple selectors for one Angular component?

Yes, you can define multiple selectors separated by commas. This allows the component to be used in different ways, like both as an element and an attribute.

beginner

Why is it important to choose unique selectors for Angular components?

Unique selectors prevent conflicts with standard HTML tags or other components. This ensures your component renders correctly and avoids unexpected behavior.

Which of these is a valid element selector usage for a component with selector 'app-card'?

A <card-app></card-app>

B <div app-card></div>

C <app_card></app_card>

D <app-card></app-card>

The selector 'app-card' used as an element means writing is correct.

If a component selector is '[appHighlight]', how do you use it in HTML?

A <div appHighlight></div>

B <div [appHighlight]></div>

C <appHighlight></appHighlight>

D <div app-highlight></div>

Square brackets in selector mean attribute selector. Use it as an attribute without brackets in HTML:

.

What happens if two components have the same selector?

A It causes unpredictable rendering issues.

B Angular throws a compile error.

C Angular uses the last declared component silently.

D Only the first component is used, others ignored.

Duplicate selectors cause unpredictable behavior because Angular can't decide which component to render.

How do you define multiple selectors for one Angular component?

A Use an array of selectors in @Component decorator.

B Separate selectors by commas in the selector string.

C Define multiple @Component decorators.

D Use a selector with spaces between names.

Multiple selectors are defined as a single string with selectors separated by commas, e.g., 'app-one, [appTwo]'.

Which selector type allows using a component as a CSS class?

A Element selector

B Attribute selector

C Class selector

D ID selector

Angular supports class selectors like '.my-class' to apply a component as a CSS class.

Explain how to use different types of component selectors in Angular and give examples.

Think about how you write HTML tags and attributes.

Why should Angular component selectors be unique and how can you define multiple selectors for one component?

Consider what happens if two components look the same in HTML.