NGXS: Reactive Counter

readme.md

NGXS: Reactive Counter

app.component.html

<header class="counter-header">
  <h2>NGXS: Reactive Counter</h2>
</header>

<main class="counter-container">
  <h2 class="counter-number">The button has been clicked <b>{{ counter }}</b> times</h2>
</main>

<button class="counter-button" (click)="increment()"></button>

app.component.scss

$light: #F5F5F5;
$dark: #444444;
$primary: #007bff;
$primary-dark: #0069d9;

:host {
  height: 100vh;
  display: flex;
  flex-direction: column;

  /** BLUE HEADER/NAV BAR WITH TITLE */
  .counter-header {
    height: 52px;
    padding: 8px 16px;
    display: flex;
    background: $primary;
    align-items: center;
    h2 {
      color: white;
      margin: 0;
      font-size: 20px;
      font-weight: 400;
    }
  }

  /** PRIMARY TEXT WITH COUNTER NUMBER */
  .counter-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    h2 {
      color: $dark;
      margin: 0;
      font-size: 24px;
      font-weight: 400;
    }
  }

  /** FLOATING BLUE BUTTON WITH ADD ICON */
  .counter-button {
    right: 16px;
    width: 48px;
    bottom: 16px;
    height: 48px;
    border: none;
    outline: none;
    position: fixed;
    transition: all .15s ease-in-out;
    user-select: none;
    border-radius: 50%;
    background-color: $primary;
    &:hover { background-color : $primary-dark; }
    &:active {
      outline: none;
      transform: scale3d(.95, .95 ,1);
    }
    &:before, &:after {
      top: 50%;
      left: 50%;
      width: 24px;
      height: 2px;
      display: block;
      content: '';
      position: absolute;
      transform: translate(-50%,-50%) rotate(0deg);
      border-radius: 4px;
      background-color: $light;
    }
    &:after { transform: translate(-50%,-50%) rotate(90deg); }
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  /** COUNTER STATE */
  public counter: number;

  constructor() {
    this.counter = 0; // INITIAL/DAFAULT COUNTER STATE
  }

  /** INCREMENT COUNTER STATE */
  increment(): void {
    this.counter ++;
  }
}

styles.scss

$dark: #444444;
$light: #F5F5F5;

html, body {
  color: $dark;
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow-x: hidden;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: 'Open Sans', sans-serif;
  background-color: $light;

  *, ::after, ::before {
    box-sizing: inherit;
  }
}