CODEWITHSUNDEEP
javascriptreactjsangularconditional-statementsangular-ng-if
Greg Van Gorp
Greg Van Gorp

Reputation: 801

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

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?

Upvotes: 0

Views: 2163

Answers (2)

Eliseo
Eliseo

Reputation: 57971

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

Update

If we use as selector [if-else]

@Component({
  selector: '[if-else]',
  ...
  `
})

You can use in any html tag, e.g. div or section or...

  <div if-else [condition]="contition">
    ...
  </div>

But you still has a "extra" tag

Upvotes: 1

Haytam
Haytam

Reputation: 4733

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>

Upvotes: 4

Related Questions