Custom structural directives in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a custom structural directive in Angular?

A custom structural directive changes the structure of the DOM by adding or removing elements based on logic you define. It controls how elements appear or disappear.

beginner

Which Angular decorator is used to create a structural directive?

The @Directive decorator is used to create a structural directive. You add a selector without an asterisk (*) because the asterisk is a template syntax sugar, not part of the selector.

intermediate

What is the role of TemplateRef and ViewContainerRef in a custom structural directive?

TemplateRef represents the template to be added or removed. ViewContainerRef is the place in the DOM where the template is inserted or removed.

beginner

How do you use the * prefix in Angular templates with structural directives?

The * prefix is shorthand telling Angular to treat the element as a structural directive. It expands the directive to wrap the element's template.

intermediate

What happens if you call viewContainer.clear() inside a structural directive?

Calling viewContainer.clear() removes all inserted views from the DOM, effectively hiding or removing the elements controlled by the directive.

Which Angular class lets you insert or remove elements in a structural directive?

A ElementRef

B TemplateRef

C ViewContainerRef

D Renderer2

ViewContainerRef controls where and how views are inserted or removed in the DOM.

What does the asterisk (*) before a directive name in a template mean?

A It makes the directive a component

B It marks the directive as structural

C It disables the directive

D It binds the directive to a service

The * prefix tells Angular to treat the directive as structural, changing the DOM layout.

Which decorator is used to define a custom structural directive?

A @Directive

B @Injectable

C @Component

D @NgModule

@Directive is used to create directives, including structural ones.

In a custom structural directive, what does TemplateRef represent?

A The place to insert elements

B The host element

C The directive's class

D The template to be rendered

TemplateRef represents the template content that can be added or removed.

What is the effect of calling viewContainer.createEmbeddedView(templateRef)?

A It inserts the template into the DOM

B It updates the component's state

C It changes the directive's selector

D It removes the template from the DOM

This method inserts the template into the DOM at the location of the view container.

Explain how you create and use a custom structural directive in Angular.

Think about how the directive controls DOM elements by adding or removing templates.

Describe the difference between TemplateRef and ViewContainerRef in the context of structural directives.

One is about the content, the other about where to put it.