Can't have multiple template bindings on one element. OR statement

Question

Being quite new to programming I'm having trouble wrapping my head around this. *ngIf="!report.approved and *jhiHasAnyAuthority="'ROLE_ADMIN'" work separately so I'm guessing the OR statement is the problem. I've tried using a <ng-container> as suggested in some off the answers but I can't make it work. Is there any way to do something like this?

<button type="submit">View</button>
<div *ngIf="!report.approved" || *jhiHasAnyAuthority="'ROLE_ADMIN'">
  <button type="submit">Edit</button>
  <button type="submit">Delete</button>
</div>

Admins should always see the buttons and users should only see the buttons if the report is not approved.

Answer 1

A workaround would be to split the two directives in two different divs for the AND and duplicate the code if you want to achieve the OR, like this:

for AND

    <div *jhiHasAnyAuthority="'ROLE_ADMIN'">
        <div *ngIf="!report.approved" >
            //your html code here
        </div>
    </div>

for OR

   <div *jhiHasAnyAuthority="'ROLE_ADMIN'">
         //your html code here
   </div>
   <div *ngIf="!report.approved">
        //your html code here
   </div>

still with this OR version you will get duplicated results if both conditions are met at the same time.