NgIF with 3 or clauses and null objects

it looks like I do not know how to create an NgIf with 3 Or clauses together, but I can not find what is wrong or any example to copy from:

*ngIf="owner === photo.calbum.community.user.id || owner === photo.album.user.id || isAdmin == true"

Then I have a JSON object that in some records but sometimes it has a photo from an Album (or it is null), or sometimes it has a common album that belong to a community (or it is null because the photo belong to an Album).

In both cases they all belong to a user, but through different objects. But one of them will be null always and I need to check the whole JSON file.

Thanks.

You have to use (?) operator if any of the object or it 's property null

*ngIf="owner === photo?.calbum?.community?.user?.id || owner === photo?.album?.user?.id || isAdmin == true"

The safe navigation operator ( ?. ) and null property paths

Another option is to create a property or function and you can check this value only but you need to handle check the value is null.

get state() : boolean{
  if (this.isAdmin ) {
    return true
  } else if (this.photo && this.photo.calbum) {
    return this.owner === this.photo.calbum.community.user.id
  } else if (this.photo && this.photo.album) {
    return this.owner === this.photo.album.user.id
  } else {
    return false;
  }
}

template

 <div *ngIf="state">/<div>

NgIf, When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in  3 Answers 3. for each object you should store it in a model and in template you can easily check whether that particular model has data or not. This is the ideal way to store the nested json objects into the models. Your question/code doesn't seem to be sufficient to tell whether its array or object.

You could use a getter

in your component

get my(){
 return //all your conditions
}

*ngIf="my"

How to use *ngIf else in Angular, In this tutorial, we are going to take a look at the ngIf directive. does also apply to all child elements of the element that has the ngIf directive: NgIf vs hidden of ngIf is when you need to check if a bound property is null before operator, the OR operator is used to chain one or more statements together. From official documentation - ngIf is a structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause.

Try this.. because I think your condition seems like good with boolean in html then why don't try it with component

    isTrue:boolean;

    constructor(){
    if((this.photo != null && (this.owner === this.photo.calbum.community.user.id || this.owner === this.photo.album.user.id)) || this.isAdmin == true){
         this.isTrue=true;
    }else {
         this.isTrue=false;
    }
 }

and in html add this *ngIf=isTrue; or you can do in a method instead of constructor as per your requirement and call it from html

New Features for ngIf Starting with Angular 4, So it used to be, in order to have an else clause as part of an ngIf For example, our things object looks like this in our component class:. Now you’ve learned the basics of Angular’s NgIf and Else it’s time to take things up a notch and introduce some Observables. In this article you’ll learn how to use Observables with Angular’s NgIf, using the async pipe and practices.

Angulars NgIf, Else, Then - Explained, We'll also explore using NgIf with the “Else” statement and Angular. 3 courses Let's take an empty component and a simple Boolean value of true : @​Component({ Thinking more about our JavaScript, this syntax aligns more with thinking in the flow of ternary statements. Read the legal things. * In the previous example, the then-clause template is specified inline, as the content of the. * tag that contains the `ngIf` directive. You can also specify a template that is defined. * externally, by referencing a labeled `<ng-template>` element.

ngIf, In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope. Also, ngIf recreates elements using their  Here we will understand using NgIf with HTML elements. NgIf is an angular directive that is used to add an element subtree for true value of expression. NgIf is used as *ngIf="expression". Here if "expression" value is either false or null, in both cases the element subtree will not be added to DOM. Now find the below code snippet.

Angular Reactive Templates with ngIf and the Async Pipe, As we can see, we can specify in ngIf an else clause with the name of a But the result of the expression is not a boolean, its an object and it gets out of two mandatory properties id and shortDescription , and three more  Null Check with ngIf. Another very useful application of ngIf is when you need to check if a bound property is null before displaying some of its properties. For example, displaying a box with the users' information wouldn't make much sense if there is no information to display. Normally this would result in an empty box to be shown.

Comments
  • That or statement is fine, what issue are you having with it?
  • in general its a better practice to create a get param, lets say "shouldDisplay" which will evaluate this boolean statement.
  • can you show a minimal example (stackblitz, plunkr, ...) of not working code??
  • why don't add a boolean variable in component and try to assign your condition value to it in constructor. add that variable in *ngIf here...
  • if photo object or it 's property is null or undefined you will get an error can't read calbum of nulll or undefined depend of the value of the object
  • you need to use this.owner , this.photo , this.isAdmin , handle this at the template with ? operater seem easer just look to my answer