Component selector usage in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use the component selector in the template.

Angular

<[1]></[1]>

Drag options to blanks, or click blank then click option'

Aapp-hello

Bhello-app

Cmy-component

Dcomponent-app

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong selector name that does not match the component.

Forgetting to close the tag properly.

The component selector is used as a custom HTML tag. Here, app-hello is the correct selector.

2fill in blank

medium

Complete the code to import the component and add it to the template.

Angular

import { HelloComponent } from './hello.component';

@Component({
  selector: 'app-root',
  template: '<[1]></[1]>'
})
export class AppComponent {}

Drag options to blanks, or click blank then click option'

Aroot-app

Bhello-app

Capp-hello

Dmain-hello

Attempts:

3 left

💡 Hint

Common Mistakes

Using a selector that does not match the imported component.

Not importing the component before using its selector.

The app-hello selector matches the HelloComponent's selector and is used in the template.

3fill in blank

hard

Fix the error in the component usage by completing the selector tag correctly.

Angular

<div>
  <[1]></[1]>
</div>

Drag options to blanks, or click blank then click option'

AhelloApp

BAppHello

CappHello

Dapp-hello

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase or PascalCase instead of kebab-case for selectors.

Mismatching opening and closing tags.

Angular component selectors are case-sensitive and use kebab-case. app-hello is correct.

4fill in blank

hard

Fill both blanks to correctly use the component selector with an input property binding.

Angular

<[1] [title]=[2]></[1]>

Drag options to blanks, or click blank then click option'

Aapp-hello

B'Welcome'

C"Welcome"

Dhello-app

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes without quotes inside the binding.

Using the wrong selector name.

The selector app-hello is used as the tag, and the input property title is bound to the string "Welcome" using quotes.

5fill in blank

hard

Fill all three blanks to use the component selector with input and output bindings.

Angular

<[1] [user]="[2]" (notify)="[3]"></[1]>

Drag options to blanks, or click blank then click option'

Aapp-hello

BcurrentUser

ConNotify()

Dhello-app

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up input and output binding syntax.

Using incorrect selector names.

Forgetting parentheses for event bindings.

The component selector app-hello is used. The input property user is bound to currentUser, and the output event notify is bound to the method onNotify().