Angular Data Binding Basics Quiz

Explore key concepts and scenarios involving data binding in Angular through easy, focused questions. This quiz covers essential details to solidify your understanding of how binding works and is applied in Angular applications.

1. One-way Binding in Angular

   Which approach best represents one-way data binding in Angular for displaying variable values?

   1. {{ variable }}
   2. { variable }
   3. [variable]
   4. [(variable)]

   Explanation: {{ variable }} is used for one-way binding from component to template, outputting the variable value. [variable] is not a correct Angular syntax, [(variable)] is for two-way binding, and { variable } is not a valid Angular binding syntax.

2. Two-way Binding Syntax

   What is the correct syntax for two-way data binding in Angular?

   1. [ngModel]
   2. [(ngModel)]
   3. (ngModel)
   4. {ngModel}

   Explanation: [(ngModel)] uses both square and round brackets to enable two-way binding, keeping model and view in sync. [ngModel] binds data one way, (ngModel) listens for an event, and {ngModel} is not Angular syntax.

3. Binding Attributes to Properties

   How do you bind an HTML element property to a component property in Angular?

   1. (property)='value'
   2. [property]='value'
   3. {{property:value}}
   4. [[property]]='value'

   Explanation: [property]='value' is the correct way to bind a property in Angular. (property)='value' listens for events, {{property:value}} is not valid syntax, and [[property]]='value' is not used in Angular.

4. Binding Events

   Which syntax should be used to bind a DOM event, such as a click, to a method in Angular?

   1. {{ event:method() }}
   2. (event)='method()'
   3. [event]='method()'
   4. [[event]]='method()'

   Explanation: (event)='method()' binds an event like (click) to a method in the component. {{ event:method() }} and [[event]]='method()' are not valid. [event]='method()' is for property, not event, binding.

5. Usage of ngModel

   For forms, which directive allows Angular to track and update input values using two-way binding?

   1. ngBind
   2. ngForm
   3. ngModel
   4. ngInput

   Explanation: ngModel enables two-way binding for input elements. ngForm is for grouping controls, ngInput is not a directive in Angular, and ngBind is not the standard way to achieve two-way binding in Angular.

6. String Interpolation Purpose

   What is the main purpose of using string interpolation with double curly braces in Angular templates?

   1. Displaying component data in HTML
   2. Triggering DOM events from the template
   3. Styling elements dynamically
   4. Importing external scripts

   Explanation: String interpolation {{ ... }} is used to display component data inside HTML. It cannot trigger events, does not directly style elements, and is unrelated to importing scripts.

7. Property Binding Example

   Which of the following sets an <img> element's source dynamically in Angular?

   1. [src]='imagePath'
   2. {{src:imagePath}}
   3. (src)='imagePath'
   4. [[src]]='imagePath'

   Explanation: [src]='imagePath' enables property binding for the image source. (src)='imagePath' would treat src as an event, {{src:imagePath}} is not valid syntax, and [[src]] is not used by Angular.

8. Event Binding in Button Clicks

   How can you call a function when a button is clicked in an Angular template?

   1. (button)='onClick()'
   2. {click:onClick()}
   3. [click]='onClick()'
   4. (click)='onClick()'

   Explanation: (click)='onClick()' binds the click event to the function. [click]='onClick()' is property binding and does not handle events; {click:onClick()} is invalid; (button)='onClick()' is not recognized by Angular.

9. One-way vs. Two-way Data Binding

   Which is a main difference between one-way and two-way data binding in Angular?

   1. One-way triggers events; two-way only accepts data.
   2. One-way updates go from component to template; two-way keeps both in sync.
   3. They are functionally identical.
   4. One-way supports forms; two-way cannot be used in inputs.

   Explanation: One-way data binding moves data from the component to the template, while two-way binding keeps data synchronized both ways. Event triggering and input support are not accurate, and stating they are identical is incorrect.

10. Combining Bindings in Angular

    What does using both square and round brackets together (e.g., [(property)]) indicate in Angular?

    1. Two-way data binding
    2. Event-only binding
    3. Static value assignment
    4. One-way data push

    Explanation: [(property)] syntax enables two-way binding. It is not limited to event binding, does not involve static assignments, and is not only for one-way data transfer.