Skip to content
QuiznExam

Directives (Structural & Attribute) in Angular

Test your knowledge of Angular directives, including structural directives, attribute directives, built-in directives, ngIf, ngFor, ngClass, ngStyle, and custom directives.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. What is a directive in Angular?

    • A. A class that adds behavior or changes the appearance of DOM elements
    • B. A database table
    • C. A TypeScript compiler
    • D. A CSS-only rule
    Show answer

    A. A class that adds behavior or changes the appearance of DOM elements

    Angular directives are classes that can add behavior to elements or modify their appearance and structure.

  2. 2. Which type of Angular directive changes the structure of the DOM?

    • A. Structural directive
    • B. Attribute directive
    • C. Component directive only
    • D. Pipe directive
    Show answer

    A. Structural directive

    Structural directives change the DOM layout by adding, removing, or manipulating elements.

  3. 3. Which directive was traditionally used to conditionally add or remove an element from the DOM?

    • A. ngIf
    • B. ngClass
    • C. ngStyle
    • D. ngModel
    Show answer

    A. ngIf

    The traditional *ngIf structural directive conditionally creates or removes an element from the DOM.

  4. 4. Which traditional Angular directive is commonly used to repeat an element for each item in a collection?

    • A. ngFor
    • B. ngSwitch
    • C. ngClass
    • D. ngStyle
    Show answer

    A. ngFor

    The traditional *ngFor structural directive creates a template instance for each item in an iterable collection.

  5. 5. What does the asterisk (*) syntax traditionally indicate when used with a structural directive?

    • A. The directive is applied through Angular's structural template syntax
    • B. The directive is an attribute directive
    • C. The directive is a pipe
    • D. The directive can only be used in CSS
    Show answer

    A. The directive is applied through Angular's structural template syntax

    The * syntax is shorthand for Angular's structural directive template syntax and is traditionally used with directives such as *ngIf and *ngFor.

  6. 6. Which type of directive is primarily used to change the appearance or behavior of an existing DOM element without changing its structure?

    • A. Attribute directive
    • B. Structural directive
    • C. Module directive
    • D. Route directive
    Show answer

    A. Attribute directive

    Attribute directives modify the behavior or appearance of an existing element, component, or another directive.

  7. 7. Which Angular directive can dynamically apply CSS classes to an element?

    • A. ngClass
    • B. ngFor
    • C. ngIf
    • D. ngTemplate
    Show answer

    A. ngClass

    ngClass allows CSS classes to be added or removed dynamically based on component data.

  8. 8. Which Angular directive can dynamically set inline styles?

    • A. ngStyle
    • B. ngClass
    • C. ngFor
    • D. ngSwitchCase
    Show answer

    A. ngStyle

    ngStyle allows inline CSS styles to be applied dynamically based on component expressions.

  9. 9. Which of the following is an example of an attribute directive?

    • A. ngClass
    • B. ngIf
    • C. ngFor
    • D. ngSwitch
    Show answer

    A. ngClass

    ngClass is an attribute directive because it changes the classes of an existing element rather than changing the DOM structure.

  10. 10. Which Angular decorator is commonly used to define a custom directive?

    • A. @Directive
    • B. @Pipe
    • C. @Service
    • D. @InjectableOnly
    Show answer

    A. @Directive

    The @Directive decorator is used to define a directive class and configure its selector and other metadata.

  11. 11. Which property in @Directive metadata specifies how a custom directive is matched in a template?

    • A. selector
    • B. template
    • C. styles
    • D. providersOnly
    Show answer

    A. selector

    The selector property determines which elements or attributes the directive applies to.

  12. 12. Which Angular directive is traditionally used to display different template content based on a value?

    • A. ngSwitch
    • B. ngClass
    • C. ngStyle
    • D. ngModel
    Show answer

    A. ngSwitch

    The traditional ngSwitch directive works with ngSwitchCase and ngSwitchDefault to conditionally display different template content.

  13. 13. What is the primary difference between structural and attribute directives?

    • A. Structural directives change the DOM structure, while attribute directives modify appearance or behavior
    • B. Structural directives are used only for CSS, while attribute directives are used for databases
    • C. Both types always remove elements from the DOM
    • D. Attribute directives can only be used inside components
    Show answer

    A. Structural directives change the DOM structure, while attribute directives modify appearance or behavior

    Structural directives control whether and how elements are created in the DOM, while attribute directives modify existing elements.

  14. 14. In modern Angular, which built-in control-flow syntax can be used instead of the traditional *ngIf syntax for conditional rendering?

    • A. @if
    • B. #if
    • C. $if
    • D. @condition
    Show answer

    A. @if

    Modern Angular provides built-in control flow syntax such as @if for conditional rendering, alongside the traditional structural directive approach.

  15. 15. In modern Angular, which built-in control-flow syntax is commonly used for iterating over a collection?

    • A. @for
    • B. #for
    • C. $for
    • D. @repeat
    Show answer

    A. @for

    Modern Angular provides the @for block for iterating over collections, replacing many common uses of the traditional *ngFor directive.