@Input decorator for parent to child in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Input decorator in Angular?

The @Input decorator allows a parent component to pass data to its child component. It marks a property in the child component as a target for receiving input values from the parent.

beginner

How do you use the @Input decorator in a child component?

You import <code>@Input</code> from <code>@angular/core</code> and add it before a property declaration in the child component class. This property will then receive data from the parent component's template.

intermediate

Can the @Input property name be different from the attribute name used in the parent template?

Yes. You can provide an alias inside the @Input decorator like @Input('aliasName'). The parent uses the alias name in its template, while the child uses the property name internally.

beginner

What happens if the parent does not provide a value for an @Input property?

The @Input property in the child component will be undefined unless it has a default value set in the child component class.

intermediate

Why is the @Input decorator important for component communication?

It enables clear, one-way data flow from parent to child components, making the app easier to understand and maintain by separating concerns and avoiding direct manipulation of child internals.

What does the @Input decorator do in Angular?

A Allows a parent to send data to a child component

B Sends data from child to parent

C Defines a service for dependency injection

D Creates a new Angular module

The @Input decorator marks a property in the child component to receive data from the parent.

How do you import the @Input decorator?

A import { Input } from '@angular/common';

B import { Input } from '@angular/forms';

C import { Input } from '@angular/core';

D import { Input } from '@angular/router';

The @Input decorator is imported from @angular/core.

If you want to use a different name for the input property in the parent template, what do you do?

A Change the property name in the parent component class

B Use <code>@Input('aliasName')</code> in the child component

C Use <code>@Output</code> instead

D Rename the child component selector

You can provide an alias name inside the @Input decorator to use a different attribute name in the parent template.

What will be the value of an @Input property if the parent does not bind any value?

A Zero

B null automatically

C An empty string

D undefined unless a default is set

If the parent does not provide a value, the @Input property is undefined unless the child sets a default.

Which direction does data flow when using @Input?

A From parent to child

B From child to parent

C Between sibling components

D From service to component

@Input is used for one-way data flow from parent component to child component.

Explain how the @Input decorator works to pass data from a parent to a child component in Angular.

Think about how the parent template uses the child selector with property binding.

Describe a scenario where you would use an alias with the @Input decorator and how to implement it.

This helps when you want clearer or different naming in the parent template.