Is there a clean way to do conditional visibility of components in Angular like React?-CodePudding

In React, I can do something like this in my JSX:

loggedIn ? <Avatar /> : <SignInButton />

Now moving over to Angular (for work so I have to use it), obviously the paradigms are different, but is there a clean way to do this? The best I've seen is:

<ng-container *ngIf="user$ | async as loggedIn; else signInButtonTemplate">
  <application-avatar></application-avatar>
</ng-container>

<ng-template #signInButtonTemplate>
  <application-sign-in-button></application-sign-in-button>
</ng-template>

This method inherently disconnects the conditional logic and commonly even further separates the templates from the actual condition because most of the devs put it at the bottom of the file so the rest of the layout is easier to read. It's not clean and it's so verbose that it's frustrating on a daily basis.

I was hoping I could create a component (or directive not sure) like:

<if-else [condition]="loggedIn">
  <avatar #if></avatar>
  <sign-in-button #else></sign-in-button>
</if-else>

and have it not actually render the <if-else> wrapper element and only one of the two children based on a condition. We could use this everywhere in our code base instead of the bloated *ngIf style. The conditional logic and the positive and negative cases are contained in one block. This is much cleaner in my opinion and was curious if something like this was possible with Angular, and if so, what's the best way of going about it?

CodePudding user response：

Maybe a switch is closer to what you want?

<ng-container [ngSwitch]="loggedIn">
  <application-avatar *ngSwitchCase="true"></application-avatar>
  <application-sign-in-button *ngSwitchCase="false"></application-sign-in-button>
</ng-container>

CodePudding user response：

well, you can create a component like

@Component({
  selector: 'if-else',
  template:`
  <ng-content *ngIf="condition" select="[if]"></ng-content>
  <ng-content *ngIf="!condition" select="[else]"></ng-content>
  `
})
export class IfElseComponent {
  @Input() condition

}

You use like

<if-else [condition]="condition">
  <hello if [name]="name"></hello>
  <by else [name]="name"></by>
</if-else>

See a fool stackblitz