Component selector usage in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Angular component usage?

Given the Angular component with selector app-greeting and template <p>Hello, Angular!</p>, what will be the output when used as <app-greeting></app-greeting> in another component's template?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: '<p>Hello, Angular!</p>'
})
export class GreetingComponent {}

A No output, component not rendered

B <p>Hello, Angular!</p>

C <app-greeting></app-greeting>

D Error: Unknown element 'app-greeting'

💡 Hint

Think about how Angular replaces component selectors with their templates.

Angular replaces the app-greeting tag with the component's template content, so the output is the paragraph with 'Hello, Angular!'.

📝 Syntax

intermediate

Which selector syntax is conventional for an Angular component?

Which of the following selector values is conventional for an Angular component?

A '.app-header'

B '[app-header]'

C '#app-header'

D 'app-header'

💡 Hint

Angular component selectors are usually element selectors.

Angular component selectors are typically element selectors like 'app-header'. Class selectors ('.app-header'), ID selectors ('#app-header'), and attribute selectors ('[app-header]') are valid but more commonly used for directives.

🔧 Debug

advanced

Why does this Angular component not render when used as <app-footer></app-footer>?

Given this component code, why does using <app-footer></app-footer> in a template not render anything?

Angular

import { Component } from '@angular/core';

@Component({
  selector: '[app-footer]',
  template: '<footer>Footer content</footer>'
})
export class FooterComponent {}

A The component is missing the @NgModule declaration.

B The template syntax is invalid and causes a runtime error.

C The selector is an attribute selector, so <app-footer> won't match it.

D Angular requires selectors to be class selectors for components.

💡 Hint

Check the selector type and how it matches HTML elements.

The selector '[app-footer]' means the component matches elements with the attribute 'app-footer'. Using element does not have this attribute, so Angular does not render the component there.

❓ state_output

advanced

What is the output when using a component with a selector that matches multiple elements?

Consider this Angular component with selector div[app-highlight]. What will be rendered when used as below?

<div app-highlight>Text 1</div>
<span app-highlight>Text 2</span>

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'div[app-highlight]',
  template: '<div style="color: red;">Highlighted</div>'
})
export class HighlightComponent {}

A

<div style="color: red;">Highlighted</div>
<span app-highlight>Text 2</span>

B

<div style="color: red;">Highlighted</div>
<span style="color: red;">Text 2</span>

C

Text 1
<span app-highlight>Text 2</span>

D Error: Multiple elements matched by selector

💡 Hint

Think about how Angular matches selectors and replaces elements.

The selector 'div[app-highlight]' matches only

elements with the attribute 'app-highlight'. So only the first div is replaced by the component template. The span with the attribute is not matched and remains unchanged.

🧠 Conceptual

expert

Why should Angular component selectors avoid common HTML tag names?

Why is it recommended to use custom prefixes like app- in Angular component selectors instead of common HTML tags like header or footer?

A To prevent conflicts with native HTML elements and ensure Angular renders the component correctly.

B Because Angular does not allow selectors that match native HTML tags.

C To improve performance by reducing the number of DOM elements.

D Because browsers block custom elements without prefixes.

💡 Hint

Think about how browsers and Angular handle native HTML tags versus custom elements.

Using common HTML tags as selectors can cause conflicts because browsers already recognize those tags natively. Using prefixes like 'app-' creates unique custom elements that Angular can safely replace without conflicts.