Angular 5 - Stop errors from undefined object before loading data

Question

What's the best way to prevent errors in console from objects that are still undefined?

Let's say I have this

name : string;
constructor(private data: DataService) {
this.data.name.subscribe(res => this.name = res);
}

Inside my html I have this

<p> {{name}}</p>

When I load the page I get _co.name is not defined, but the page still shows the value of name. The component is loading before getting the data I suppose.

What's the best approach to prevent this?

I saw ngIf is not null or something like that, is an option. But then I saw something about Resolve.

It would be better to paste actual call context.... so template mb? — Antoniossss
– Antoniossss, Commented May 22, 2018 at 17:29
Use an object instead set to null and check if set in the html {{ info?.name }} EDIT : I don't get what is _co but you can also try _co?.name — andrea06590
– andrea06590, Commented May 22, 2018 at 17:44

BeeBee8 · Accepted Answer · 2021-10-12 14:24:57Z

27

Multiple ways: You can use any one suitable to you.

1. Adding ngIf : If name is undefined or null or '' it will not render the element and prevent errors in console. When name gets defined value it will automatically update the view.

*ngIf="name"

2. Adding async pipe : View will update whenever name gets defined. It waits for name to get defined (or resolved). (name should be a promise or an observable for this to work.)

{{ name | async }}

3. Adding fallback value : This is simply or condition. If name is undefined or null or '' , you can decide which fallback value to assign . {{ name || "" }}

edited Oct 12, 2021 at 14:24

answered May 22, 2018 at 17:32

BeeBee8

3,0842 gold badges30 silver badges39 bronze badges

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

4 Comments

kachus22 Over a year ago

Thank you, this is what I was looking for

BeeBee8 Over a year ago

@kachus22 Great, can you accept the answer? You can click on the gray tick mark to make it green. So it becomes accepted answer.

Mayur Over a year ago

how to do it with [(ngModel)] = "a.b.c" where we cant use ? operator

Ε Г И І И О Over a year ago

Point 2 is wrong. name is a string, not a promise or an observable. Hence you cannot you async pipe on it. angular.io/api/common/AsyncPipe

Abel Valdez · Accepted Answer · 2018-05-22 17:18:45Z

6

Just initialize your variable

name : string = "";

or you can do it inside of the constructor

this.name = "";

answered May 22, 2018 at 17:18

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

Comments

Kristof Mols · Accepted Answer · 2020-07-10 13:52:40Z

2

As mentioned in previous responses you can use {{ name | async }} but remember if you want to use {{ name | async }}, name must be a promise or an observable.
Otherwise you'll get an error like this :

ERROR Error: InvalidPipeArgument: 'xxx' for pipe 'AsyncPipe'

edited Jul 10, 2020 at 13:52

Kristof Mols

3,5752 gold badges41 silver badges51 bronze badges

answered Jul 10, 2020 at 13:31

FaTaK

213 bronze badges

Comments

Lucas Hiago · Accepted Answer · 2021-01-09 23:40:05Z

1

You can use {{name?.value}} or {{name?}} inside component.html. Can make treatment to like this in compoment.ts ↓

   ````

    this.route.paramMap.pipe(
      map((param: ParamMap) => {
        // @ts-ignore
        return param.params.id;
      })
    ).subscribe(prodId => {
      this.id = prodId;
      this.productService.getSingleProduct(this.id).subscribe(prod => {
        this.product = prod;
        if (prod.images !== null) {
          this.thumbimages = prod.images.split(';');
        }`enter code here`
      });
    });


  ````

answered Jan 9, 2021 at 23:40

Lucas Hiago

111 bronze badge

Collectives™ on Stack Overflow

Angular 5 - Stop errors from undefined object before loading data

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related