How to write simple button component by Angular2, Vuejs, React(Typescript)

A basic test button component with

  1. attribute disabled
  2. onclick event
  3. css class
  4. button name

You could get the feeling of how simple it is to write a component with each 3 popular framework nowadays.

AngularJS

import {Component, EventEmitter, Input, Output} from '@angular/core';
/**
 * Usage:
 <app-button [disabled]="false" domClass="btn-secondary">
    test
 </app-button>
 */
@Component({
  selector: 'app-button',
  template: `
    <button [disabled]="disabled"
            class="btn btn-default"
            [ngClass]="domClass" 
            (click)="onClick.emit('click')">
      <ng-content></ng-content>
    </button>
  `,
  styles: []
})
export class ButtonComponent {
  @Input() disabled = false;
  @Input() domClass = 'btn-primary';
  @Output() onClick = new EventEmitter<boolean>();
  constructor() { }
}

React (typescript)

import * as React from 'react';
interface BtnProps {
    isDisabled: boolean;
    className: string;
    onClick: () =&amp;amp;gt; {};
}
class TestButton extends React.Component&amp;amp;lt;BtnProps, any&amp;amp;gt; {
    render () {
        const { isDisabled, onClick, children} = this.props;
        return (
            &amp;amp;lt;button disabled={isDisabled} onClick={onClick}&amp;amp;gt;
                {children}
            &amp;amp;lt;/button&amp;amp;gt;
        )
    }
}
export default TestButton;

Vuejs

<template>
  <button :disabled="disabled" @click="handleClick()" :class="domClass">
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    domClass: { type: Object, default: {} },
    disabled: { type: Boolean, default: false }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>
Please follow and like us: