Why React (react like) Component model is more powerful than Angular(angular like) component models

Component based frameworks are the current trend. React started it and most modern frameworks currently are based on this.

Lets look a hello world component in React and Angular

1. React

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

React uses JSX.

2. Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<h1>Hello World</h1>',
})
export class AppComponent;

Angular uses templates.

JSX and templates can be considered as a domain language for describing UIs.

For describing static UIs, it doesn’t make much difference but applications are dynamic and when it comes to dynamic UI, there is a lot of difference. For ex:

1. Conditionals

React

render() {
  if(show) {
    return <div> Text to show </div>;
  }
}

Angular

@Component({
  template: '<div *ngIf="show">Text to show</div>',
})

2. Looping

React

const items = ['One', 'Two', 'Three'];
class MyList extends Component {
  renderItem(item, index) {
    return <div key={index}> {item.text} </div>;
  }
  render() {
    return <div> {items.map(this.renderItem)} </div>
  }
}

Angular

@Component({
  template: `<div *ngFor="let item of items">
    <div> {{ item.text }} </div>
  </div>`
)}
export class MyList {
  items = ['One', 'Two', 'Three'];
}

We can see that React uses the programming constructs of JavaScript where as in angular templates, directives (ngIf, ngFor etc) are used to implement the programming constructs. In angular, If you need to do something complex, you will have to go back to the JavaScript world (ie. in your component.ts) and implement a new directive where as in JavaScript we can just use the already available language constructs.

┌──────────┬──────────┐
│  React   │ Angular  │
├──────────┼──────────┤
│ if       │ ngIf     │
│ for,map  │ ngFor    │
│ ..       │ ..       │
│ and more │ and more │
└──────────┴──────────┘

A model where domain language(JSX) lives inside a general purpose language is more powerful than a model where domain language(templates/directives) lives outside a general purpose language.