@flexem/broker-ui-angular
v1.0.1-alpha.2211020521
Published
>A warp of [fbroker-ui](https://www.npmjs.com/package/@flexem/broker-ui) with angular.
Downloads
8
Keywords
Readme
FBroker-UI-Angular
A warp of fbroker-ui with angular.
This library was generated with Angular CLI version 9.1.13.
Install
npm install --save @flexem/broker-ui-angular
# OR
yarn add @flexem/broker-ui-angular
Usage
1.Import Module
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 { }
2.Create Component
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;
}
}
License
MIT © flexem