1

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: }}`

Improve this question
5
  • 3
    You can use null propagation like this : <div *ngIf="applicant?.representative?.type></div> Commented Jul 24, 2020 at 11:52
  • I dont like this syntax Commented Jul 24, 2020 at 11:54
  • 2
    Then you can use get/set for your input. In the getter check the value if it is set, if not update it. Commented Jul 24, 2020 at 11:59
  • How to to that in level upper? Here this.applicants.map((applicant) => { this.representativeAdapter.adapt(applicant.representative); } Commented Jul 24, 2020 at 12:00
  • Simple: @Input() applicant: Applicant={applicant:null,representative:{type:null}} Commented Jul 24, 2020 at 12:15

5 Answers 5

Reset to default
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);
      ...
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How to do that here: this.applicants.map((applicant) => { this.representativeAdapter.adapt(applicant.representative); }?
what is representativeAdapter here, where did this applicants array come from. is this in the parent component?
This is method, that accepts applicant.representative but if no representative it falls
0

You can try this

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

Comments

0

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;
Improve this answer

Comments

0

When we use class then

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

When we use interface then:

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

Comments

0

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}
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.