JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

JavaScript

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { TaxIdModel } from '../tax-id-model/tax-id-model';
import { TaxIdModelService } from '../shared/tax-id-model.service';
import { ChangeOfTaxId } from 'app/change-of-tax-id/change-of-tax-id';
@Component({
  selector: 'app-tax-id-overview',
  templateUrl: './tax-id-overview.component.html',
  styles: []
})
export class TaxIdOverviewComponent implements OnInit {

  switchIt;
  submitIt;
  changeRender;
  changeOfTaxId: ChangeOfTaxId;

  @ViewChild('TINinput') input: ElementRef;
  valueTin;

  taxIdModel: TaxIdModel;
  firstRender = `Diese Steuer-Identifikationsnummer wurde erstmals in 2007 vergeben und ist lebenslang gültig.
  Sie soll in Zukunft die bisherige Steuernummer komplet ablösen. Im Folgeden PDF finden Sie ein Musteranschreiben,
  mit dem jeder Bürger von Bundezentralamt für Steuern seine Steuer-Identifikationsnummber zugeteilt bekommen hat.
  Link to PDF file here. Falls Sie dieses Schreiben nicht mehr vorliegen haben, können Sie Ihre persönliche Steuer-Identifikationsnummer
  nochmals beim Bundes-zentralamt für Steuern anfordern.`;

  secondRender = `Bitte geben Ihre Steuer-Identifikationsnummer (TIN) ein.`;

  constructor(private taxIdModelService: TaxIdModelService) {
    this.switchIt = this.submitIt = this.changeRender = false;
    this.valueTin = '';
  }

  ngOnInit() {
    this.taxIdModelService.getTaxIdModel().subscribe(response => {
      this.taxIdModel = response.json() as TaxIdModel;
      if ( this.taxIdModel.taxIdentificationNumber ) {
          this.valueTin = this.taxIdModel.taxIdentificationNumber;
          this.submitIt = this.switchIt = true;
          this.changeRender = false;
      }
    });
  }

  switchToTin() {
    this.switchIt = this.changeRender = true;
  }

  abort() {
    // go to the overview page;
    window.location.href = '/';
  }

  submitTin() {
    // go to submit page
    this.changeOfTaxId = {
      taxIdentificationNumber: '',
     ...