import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FbrokerUiAngularModule } from '@flexem/broker-ui-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FbrokerUiAngularModule, // add module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { PlcItem, TransferItem, VariableItem } from '@flexem/broker-ui';

@Component({
  selector: 'app-root',
  template: `
  <broker-template-tab
    [plcs]="plcs"
    [variables]="variables"
    [transfers]="transfers"
    (onPlcCreated)="handlePlcCreate($event)"
    (onVariableCreated)="handleVariableCreate($event)"
    (onTransferCreated)="handleTransferCreate($event)"
    (onTransferChange)="handleTransferChange($event)">
  </broker-template-tab>
  `
})
export class AppComponent {
  plcs: PlcItem[] = [];
  variables: VariableItem[] = [];
  transfers: TransferItem[] = [];

  handlePlcCreate(item: PlcItem) {
    this.plcs = this.plcs.concat(item);
  }

  handleVariableCreate(item: VariableItem) {
    this.variables = this.variables.concat(item);
  }

  handleTransferCreate(item: TransferItem) {
    const transfers = [...this.transfers];
    const i = transfers.findIndex((x) => x.id === item.id);
    if (i >= 0) {
      transfers[i] = item;
    } else {
      transfers.push(item);
    }
    this.transfers = transfers;
  }

  handleTransferChange(item: TransferItem) {
    const transfers = [...this.transfers];
    for (const x of transfers) {
      if (x.id === item.id) {
        x.enable = true;
      } else {
        x.enable = false;
      }
    }
    this.transfers = transfers;
  }
}