Best practice for initializing a variable when using @Input decorator in Angular

Question

Let's assume we have an Interface Customer:

export interface Customer {
    name: string;
    age: number;
    phone: string;
}

Now we have a parent component and we want to pass an instance of Customer to the child component:

<child-component [customer]="instanceOfCustomer"></child-component>

After that we need to use @Input decorator to get the data in the child component. (We assume passing the instance is mandatory to use this component and this component will not work without passing the instance)

@Input() customer:Customer;

The problem is that we need to initialize customer somewhere and I think there are 3 approaches to avoid the error in Typescript:

Initializing an empty customer in the constructor:

this.customer = {
    name: "";
    age: 0;
    phone: "";
}

Change strictPropertyInitialization to false
Just adding the ! prefix (Which I think I should use because no one should use this child component without passing the relative customer)
```
@Input() customer!:Customer;
```

I want to know what approach should I use to avoid property initialization error in case of using @Input decorator.

I edited the question to make it more detailed. So I don't think it's opinion based because the semantic of using Input decorator is always the same or at least it's most of the time the same. Especially when the passed object is mandatory. — M4HdYaR
– M4HdYaR, Commented Mar 13, 2022 at 15:16
I wouldn't use options 2 or 3. There is a time between the construction of the component and the initialization of the input. I would use @Input() customer?: Customer; — user16540390
– user16540390, Commented Mar 13, 2022 at 15:21
But ? means it's optional. Obviously it's not optional. So it's semantically wrong, isn't it? @jabaa — M4HdYaR
– M4HdYaR, Commented Mar 13, 2022 at 15:31
From TypeScript perspective, the property is optional. The property is uninitialized until AfterViewInit. ? doesn't say anything about whether the @Input is optional. Accessing the property before AfterViewInit should cause an TypeScript error. ! hides these errors. — user16540390
– user16540390, Commented Mar 13, 2022 at 15:33

Gyanendra Singh · Accepted Answer · 2022-03-13 15:31:37Z

2

you should use setter https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

or you can also use your 3rd approach.

there is already some answers for this too.

refer below answers for more details :

Make directive @Input required

answered Mar 13, 2022 at 15:31

Gyanendra Singh

1043 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ionut-t · Accepted Answer · 2022-03-13 15:37:32Z

2

To avoid TS from complaining I'll suggest initializing it like this:

@Input() customer: Customer | null = null;

Using null will stop the compiler from complaining when you pass the input through the async pipe (the async pipe returns something like T | null).

Also by doing that you'll have to make sure that you account for null values wherever you use that property, so fewer errors to deal with in production if something goes wrong let's say.

answered Mar 13, 2022 at 15:37

ionut-t

1,1771 gold badge8 silver badges15 bronze badges

1 Comment

Maarten Tibau Over a year ago

While this is a good practice, you might run into some trouble when trying to use this with an [(ngModel)] For example, if you write in your template: [(ngModel)]="customer.name" it might break if customer would be null. Of course one could argue that the smart component responsible for setting the value of customer should prevent the rendering of the child components if that would be the case.

Collectives™ on Stack Overflow

Best practice for initializing a variable when using @Input decorator in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related