Assign null to interface in angular 4

Question

i have a interface in angular4

interface StatusDetail {
    statusName: string,
    name: string
}

and i have assigned some values to it like

//angular Component

     export class EditComponent implements OnInit{
         statusDetail: StatusDetail;
         ngOnInit() {
           this.statusDetail.statusName = 'text Status';
           this.statusDetail.name= 'text Name';
         }
     }

i'm trying to reset to default null like this

         SetNull() { 
           this.statusDetail = null
         }

but it gives error

Type null is not assignable to type StatusDetail

how can i do this?

Daniel Hilgarth · Accepted Answer · 2018-04-23 08:01:04Z

8

You need to declare statusDetail as StatusDetail | null:

export class EditComponent implements OnInit{
     statusDetail: StatusDetail | null;
     ngOnInit() {
       this.statusDetail.statusName = 'text Status';
       this.statusDetail.name= 'text Name';
     }
 }

answered Apr 23, 2018 at 8:01

Daniel Hilgarth

175k41 gold badges346 silver badges450 bronze badges

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

7 Comments

bugs Over a year ago

What's the point of having the interface then? Would it not make more sense to define a default StatusDetail with empty fields?

Faisal Over a year ago

i can,t do this because every time i tried to access its values it give error of being null value

Daniel Hilgarth Over a year ago

@bugs: I agree, this would be better.

Daniel Hilgarth Over a year ago

@Faisal: Well, that's the nature of null. Not sure what you are trying to achieve here? Why are you setting it to null? Also, see bugs comment.

Faisal Over a year ago

i have a condition on html <div statusDetail != null">Status is Not Null</div> i want to hide this via this condition

|

Nuru Salihu · Accepted Answer · 2018-04-23 10:01:54Z

5

You can reset/initiate your interface like below.

this.statusDetail = <StatusDetail>{};

Now the object will have the default value. You can set to undefined too, why null btw ? Why not

this.statusDetail = undefined ;

answered Apr 23, 2018 at 10:01

Nuru Salihu

4,98818 gold badges73 silver badges122 bronze badges

Comments

bugs · Accepted Answer · 2018-04-23 08:12:29Z

1

Given that you defined the interface with those properties, it does not make too much sense to assign null to your object.

If you are trying to reset your default values, why don't you set them as empty?

SetNull() { 
  this.statusDetail = {
    statusName: '',
    name: ''
  }
}

If you want to check this condition in the HTML, you can create a new private method specifically for that:

isStatusDetailDefined(): boolean {
  return this.statusDetail.statusName && this.statusDetail.name
}

and

*ngIf="isStatusDetailDefined()"

edited Apr 23, 2018 at 8:12

answered Apr 23, 2018 at 8:05

bugs

15.4k6 gold badges53 silver badges55 bronze badges

2 Comments

Faisal Over a year ago

but this condition will never get false ngIf !="statusDetail != null"

bugs Over a year ago

Because the condition doesn't make sense, given the interface. See the modified answer

Mohammad Daliri · Accepted Answer · 2018-04-23 08:07:44Z

0

If you want to set null to interface value, you set {} as any

setNull(){
 this.statusDetail= {} as any
}

answered Apr 23, 2018 at 8:07

Mohammad Daliri

1,4067 gold badges26 silver badges44 bronze badges

Collectives™ on Stack Overflow

Assign null to interface in angular 4

4 Answers 4

7 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related