How to set default value for Input Angular?

Question

I have Input in component:

  @Input() applicant: Applicant;

interface Applicant {
   applicant: ApplicantItem,
   representative: Representative
}

Template is:

<div *ngIf="applicant.representative.type></div>

Problem is if applicant has no object representative it falls.

How to set default value if there is no representative?

Like this:

@Input() applicant: Applicant = <Applicant>{};

I need to have representative with type always.

Also how to avoid error here:

applicant.representative = adapt(applicant.representative);

Here applicant.representative should be default object { representative: {type: }}`

Then you can use [get/set](https://stackoverflow.com/questions/36653678/angular2-input-to-a-property-with-get-set) for your input. In the getter check the value if it is set, if not update it. — Eldar, Jul 24 '20 at 11:59
How to to that in level upper? Here `this.applicants.map((applicant) => { this.representativeAdapter.adapt(applicant.representative); }` — , Jul 24 '20 at 12:00
Simple: `@Input() applicant: Applicant={applicant:null,representative:{type:null}}` — Eliseo, Jul 24 '20 at 12:15

saivishnu tammineni · Accepted Answer · 2020-07-24T12:30:10.813

1

Hai you can try to set the value in ngOnInit. once the ngOnInIt is called the value for the applicant will be set if any provided by the parent component.

Here check if the value is undefined and if so set a default

@Input() applicant: Applicant;

ngOnInIt() {
    if (!this.applicant) {
      this.applicant = {
          // ur defaults here
      };
}

if you want to always pass proper values to children components from parent then

this.applicants.map((applicant) => {
     if (!applicant || !applicant.representative) {
      applicant = {
        // your defaults here
      };
      this.representativeAdapter.adapt(applicant.representative);
      ...

edited Jul 24 '20 at 12:30

answered Jul 24 '20 at 12:19

saivishnu tammineni

1,092
7
14

How to do that here: `this.applicants.map((applicant) => { this.representativeAdapter.adapt(applicant.representative); }`? – Jul 24 '20 at 12:20
what is `representativeAdapter` here, where did this applicants array come from. is this in the parent component? – saivishnu tammineni Jul 24 '20 at 12:25
This is method, that accepts `applicant.representative` but if no `representative` it falls – Jul 24 '20 at 12:26

score 0 · Answer 2 · answered Jul 24 '20 at 12:15

0

You can try this

@Input() applicant = function(applicant : Applicant  = {applicant:null, representative:nul}){
    console.log(applicant)
  }

answered Jul 24 '20 at 12:15

azer-p

304
1
12

score 0 · Answer 3 · answered Jul 24 '20 at 12:28

You can do it by specifying setter and getter for your @Input:

@Input() 
set applicant(applicant: Applicant) {
    this._applicant = applicant || { applicant: null, representative: null };
}
get applicant(): Applicant {
    return this._applicant;
}

private _applicant: Applicant;

score 0 · Answer 4 · answered Jul 24 '20 at 17:54

0

When we use class then

@Input() applicant: Applicant = new Applicant();

When we use interface then:

@Input() applicant: Applicant = {} as Applicant;

answered Jul 24 '20 at 17:54

Ranjeet Kumar

11
4

score 0 · Answer 5 · answered Dec 23 '20 at 10:33

This is what I use to set a configuration object with defaults.

The property binding can receive an object with optional properties.
Name the applicant _applicant in your code to indicate this value should not be accessed
In your code use a getter called applicant to access the value
In the getter set up some defaults
Merge the defaults with the provided values

code

@Input('applicant') _applicant: {applicant?: ApplicantItem, representative?: Representative }
public get applicant(): {applicant: ApplicantItem, representative: Representative } {
  const defaults = {
    applicant: new ApplicantItem(),
    representative: new Representative()
  }

  return {...defaults, ...this._applicant}
}

How to set default value for Input Angular?

5 Answers5