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, Mar 13 '22 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;` — jabaa, Mar 13 '22 at 15:21
But ? means it's optional. Obviously it's not optional. So it's semantically wrong, isn't it? @jabaa — M4HdYaR, Mar 13 '22 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. — jabaa, Mar 13 '22 at 15:33

score 2 · Answer 1 · answered Mar 13 '22 at 15:31

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

score 1 · Answer 2 · answered Mar 13 '22 at 15:37

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.

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

2 Answers2