DEV Community

Discussion on: From Vue to Angular

Collapse
 
johncarroll profile image
John Carroll

Not that this invalidates your point, but FYI this example

<ng-container
  *ngIf="someCondition; then templateA; else templateA">
</ng-container>

<ng-template #templateA>
  <p>Some text</p>
  <button>An action</button>
</ng-template>
<ng-template #templateA>
  <p>Some other text</p>
  <button>A different action</button>
</ng-template>

can be simplified to

<ng-container *ngIf="someCondition; else templateB">
  <p>Some text</p>
  <button>An action</button>
</ng-container>

<ng-template #templateB>
  <p>Some other text</p>
  <button>A different action</button>
</ng-template>

Or alternatively to

<ng-template [ngIf]="someCondition" [ngIfElse]="templateB">
  <p>Some text</p>
  <button>An action</button>
</ng-template>

<ng-template #templateB>
  <p>Some other text</p>
  <button>A different action</button>
</ng-template>

I don't have any experience with vue, how would the vue if/else example look if you had multiple if/else statements in the template? (i.e. how do you specify that a particular else statement pairs with an if statement?)

Collapse
 
codegram_user profile image
Codegram

Right! Thanks for your input.

In Vue, it's implied by the order of the blocks, the else needs to follow a v-if block (or v-else-if). So you would do something like this:

<template v-if="someCondition">
  <p>Some text</p>
  <button>An action</button>
</template>

<template v-else-if="someOtherCondition">
  <p>Some other text</p>
  <button>A different action</button>
</template>

<template v-else>
  <p>Another different text</p>
  <button>Another different action</button>
</template>

<template v-if="anotherSetOfConditions">
  <p>Some more text</p>
</template>

<template v-else>
  <p>Etc</p>
</template>

If you did something like this:

<div v-if="myCondition">
      Hello
</div>

<div>oops</div>

<div v-else>
      Bye
</div>

It would raise an error v-else used on element <div> without corresponding v-if.

Collapse
 
johncarroll profile image
John Carroll • Edited

Ah, well that's certainly intuitive! And that's definitely a better if/else syntax than what Angular has.

Again, not to invalidate the point of your article (but rather to explain why I think Angular is the way it is):

In Angular both ngIf and ngFor are simply standard structural directives which are shipped in CommonModule (and hence optional in an app). They rely on the same API that anyone can use to customize Angular. The limitations of that API (which is really pretty simple) are what create the wonky syntax. Personally, ngIf and ngFor (specifically) are so common that I think Angular would benefit if the framework gave them special treatment (which could improve the API for devs). Though I can see value in having complete consistency within the framework.

  • Edit I suppose making ngIf and ngFor special also might make them non-removable. And that would clash with Angular's goal of reducing the minimum framework size below 2kb (important for custom elements).

In Vue, is it possible to create a custom structural directive (or whatever Vue would call it) with similar functionality to v-if / v-else? e.g. is it possible to create a custom v-unless structural directive (which would also pair with v-else) for an app?

Thread Thread
 
codegram_user profile image
Codegram

Good to know, that's illuminating! :)

It is possible to create custom directives with Vue vuejs.org/v2/guide/custom-directiv... I never tried it, but since the hooks have access to the element el to manipulate the DOM, I guess you could create a simple v-unless that prevents it from rendering based on the binding.value. But it would be a standalone directive, I can't think of a way to pair it with an v-else or any other directive.