How to set @Input variable as an optional in angular 5?

Question

I want to set @Input parameters optional.

For example:

Child1.html:

templateUrl:'common-html.html'

Child1.TS:

currentValue : boolean = true;

CASE 2:

Child2.html:

templateUrl:'common-html.html'

Child2.TS:

// Not declared **currentValue**

Common-HTML.html:

<app-master [isLogEnabled]="currentValue"></app-master>

But above changes giving an error while AOT:

Property 'isLogEnabled' does not exist on type Child2.Component

So I cannot change HTML of :

<app-master [isLogEnabled]="currentValue"></app-master>

Actually, that HTML is used as a centralized, so I cannot change — Prashant Pimpale
– Prashant Pimpale, Commented May 19, 2020 at 15:59
The question is unclear at the moment. But answering the question of "optional input properties", you could try isLogEnabled?: any in the child component. — Barremian
– Barremian, Commented May 19, 2020 at 16:02
Probably not as clean, but you could pass an object instead, with optional properties. — David
– David, Commented May 19, 2020 at 20:25

AliF50 · Accepted Answer · 2020-05-19 16:03:02Z

1

I would do:

App-Master-Component.ts

@Input() isLogEnabled: boolean = false; // can change false to true, null or w.e. depending on what you want as the default
// if consumer passes in a value, it will be overridden

Then in Child2.component.html

<app-master></app-master>

You cannot bind [isLogEnabled]="currentValue" if currentValue does not exist in the Child2.component.ts file.

answered May 19, 2020 at 16:03

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

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

1 Comment

Prashant Pimpale Over a year ago

The HTML is common so I can not change the HTML

Roman Leliuk · Accepted Answer · 2020-05-19 16:05:18Z

0

You can't provide property that you didn't declare. But you can use something like this:

<app-master [isLogEnabled]="currentValue || false"></app-master>

Or inside component you can create getter:

get isLogEnabled() {
    return this.isLogEnabled || false;
}

Or you can try to use '?'

@Input() isLogEnabled?: boolean;

answered May 19, 2020 at 16:05

Roman Leliuk

918 bronze badges

Collectives™ on Stack Overflow

How to set @Input variable as an optional in angular 5?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related