Custom structural directives in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this custom structural directive render?

Given the following Angular structural directive usage, what will be rendered in the browser?

Angular

/* Directive code omitted for brevity */
@Component({
  selector: 'app-root',
  template: `
    <div *appUnless="condition">Show this if condition is false</div>
  `
})
export class AppComponent {
  condition = false;
}

A The text 'Show this if condition is false' is displayed

B Nothing is displayed

C An error occurs because 'appUnless' is not a built-in directive

D The text 'Show this if condition is false' is displayed only if condition is true

💡 Hint

Think about what the directive name 'appUnless' suggests about when it shows content.

The appUnless directive shows its content only when the condition is false. Since condition is false, the content inside the directive is rendered.

📝 Syntax

intermediate

Which option correctly defines a custom structural directive selector?

You want to create a custom structural directive named 'appShowIf'. Which selector syntax is correct?

A "*appShowIf"

B "[appShowIf]"

C "appShowIf"

D "[appShowIf]" and use *appShowIf in template

💡 Hint

Structural directives use a special syntax in templates but their selectors are attribute selectors.

Structural directives are declared with attribute selectors like [appShowIf]. In templates, they are used with the asterisk syntax *appShowIf which Angular desugars to <ng-template [appShowIf]>.

❓ lifecycle

advanced

When is the ngOnChanges lifecycle hook called in a custom structural directive?

Consider a custom structural directive with an @Input() property. When will Angular call ngOnChanges in this directive?

A Only when the input property changes after initialization

B Only once when the directive is created

C Whenever the input property value changes, including the first time it is set

D ngOnChanges is not called in structural directives

💡 Hint

Think about how Angular detects changes to input properties.

Angular calls ngOnChanges whenever an input property changes, including the first time it is set. This applies to structural directives as well.

🔧 Debug

advanced

Why does this custom structural directive cause a runtime error?

This directive tries to create an embedded view but causes an error. What is the likely cause? ```typescript @Directive({ selector: '[appShow]' }) export class ShowDirective { constructor(private templateRef: TemplateRef) {} ngOnInit() { this.templateRef.createEmbeddedView(); } } ```

A Missing @Input property to control rendering

B createEmbeddedView is a method of ViewContainerRef, not TemplateRef

C The selector should be '*appShow' instead of '[appShow]'

D The directive must inject ChangeDetectorRef to create views

💡 Hint

Check which Angular class has the createEmbeddedView method.

The createEmbeddedView method belongs to ViewContainerRef, not TemplateRef. The directive should inject ViewContainerRef to create views.

❓ state_output

expert

What is the output count of items rendered by this custom structural directive?

Given this directive and component, how many

elements will be rendered? ```typescript @Directive({ selector: '[appRepeat]' }) export class RepeatDirective { @Input() set appRepeat(times: number) { this.viewContainer.clear(); for (let i = 0; i < times; i++) { this.viewContainer.createEmbeddedView(this.templateRef, { index: i }); } } constructor(private templateRef: TemplateRef, private viewContainer: ViewContainerRef) {} } @Component({ selector: 'app-root', template: `

• Item {{index}}

` }) export class AppComponent {} ```

A 3 <li> elements with text 'Item 0', 'Item 1', and 'Item 2'

B 1 <li> element with text 'Item 3'

C 3 <li> elements all showing 'Item undefined'

D No <li> elements rendered because of missing context

💡 Hint

Look at how many times the view is created and what context is passed.

The directive creates the embedded view 3 times, passing an index context each time. The template uses {{index}} so it shows 0, 1, and 2 respectively.