Angular2 Child Component with OPTIONAL Input

Question

TLDR: Can an `@Input` be optional?

So i have this child component which is a modal for creating a Transaction (in bank terms), and i want to upgrade this modal to be create-or-update Transaction.

Currently the modal is just a group of input fields and a submit button for creating. What i want to achieve is when this component gets a transaction as an input, it will be on 'edit-mode' and when it does not it will be on 'create-mode' (meaning the input field will be already filled with data in edit-mode and empty on create-mode)

Can an @Input transaction somehow be optional?

Bojan Kogoj · Accepted Answer · 2016-09-08 16:17:11Z

2

Yes. Even more, simply do this in case you want changes

<div *ngIf="transaction">Some edit stuff</div>
<div *ngIf="!transaction">Create stuff</div>

If you want specific stuff

ngOnInit() {
  if(!this.transaction) { 
    // create stuff only 
  } else {
    // update stuff only
  }
}

EDIT: how I would do it (in your case)

This may not be the best solution, but should work (if I didn't get the syntax wrong)

ngOnInit() {
  if(!this.transaction) { 
    this.transaction = new Transaction();
  } 
}

this way all class properties will be available, only empty. Unless you want them predefined, you can set them in a constructor, or in ngOnInit.

edited Sep 8, 2016 at 16:17

answered Sep 8, 2016 at 16:00

Bojan Kogoj

5,6984 gold badges39 silver badges63 bronze badges

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

5 Comments

Kesem David Over a year ago

What i don't want to happen in my template is having double elements, i simply want the <input> to be filled with data or not, therefore I wanted to work with an optional @Input , you said it is possible, how can i achieve it then?

Bojan Kogoj Over a year ago

I edited. I really don't know if this is a good solution, but something like this works for me

Kesem David Over a year ago

I see, so that way I'll be able to place a <create-update-transaction [transaction]="this.transaction></create-update-transaction as well as <create-update-transaction></create-update-transaction>?

Bojan Kogoj Over a year ago

That's the idea

Kesem David Over a year ago

So i've had success with what you have suggested, only i did not check the input in the constructor and initialized the Input on the property declaration like this: @Input() transaction: Transaction = new Transaction() , it works fine, thanks alot :)

Collectives™ on Stack Overflow

Angular2 Child Component with OPTIONAL Input

TLDR: Can an `@Input` be optional?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

TLDR: Can an @Input be optional?

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related

TLDR: Can an `@Input` be optional?