Differences

This shows you the differences between two versions of the page.

--- dev:browser_staff:examples [2018/12/14 11:20] – adding angular section sandbergja
+++ dev:browser_staff:examples [2023/06/01 13:20] (current) – [Edit the tt2 template] master to main dyrcona
@@ Line 15: / Line 15: @@
 @Component({
-  selector: 'eg-math',
   template: '<p>Evergreen is good at math</p>',
 })
@@ Line 27: / Line 26: @@
 <code>import {NgModule} from '@angular/core';
-import {EgMathComponent} from './eg-math.component'
+import {EgMathComponent} from './eg-math.component';
 import {RouterModule, Routes} from '@angular/router';
@@ Line 55: / Line 54: @@
 Re-compile, the client, and you should see your brand new screen at https://[yourdomain.edu]/eg2/en-US/staff/math/eg
+=== Add another component with an OpenSRF call ===
+Create a new .ts file in Open-ILS/src/eg2/src/app/staff/math, called adder.component.ts:
+<code>
+import {Component, OnInit} from '@angular/core';
+import {NetService} from '@eg/core/net.service';
+@Component({
+  selector: 'eg-adder',
+  templateUrl: './adder.component.html',
+})
+export class AdderComponent implements OnInit {
+  sum: number = 0;
+  addTwoNumbers: (first: number, second: number) => void;
+  constructor(
+    private net: NetService
+  ){}
+  ngOnInit() {
+    this.addTwoNumbers = (first: number = 0, second: number = 0) => {
+      this.net.request(
+        'opensrf.math',
+        'add',
+        first, second)
+      .subscribe(response => this.sum = response);
+    }
+  }
+}
+</code>
+This has some differences from our first one.  First of all, it has a selector, which means that we can include it in other components by saying <eg-adder></eg-adder>.  Secondly, it has its template in a separate file, Open-ILS/src/eg2/src/app/staff/math/adder.component.html.  In fact, let's create that now:
+<code>
+<label i18n>First Number: <input #firstNumber type="number"></label>
+<label i18n>Second Number: <input #secondNumber type="number"></label>
+<button (click)="addTwoNumbers(firstNumber.value, secondNumber.value)">Add</button>
+<p>Sum: {{sum}}</p>
+</code>
+Let's update our module to let it know about the new component:
+<code>import {NgModule} from '@angular/core';
+import {EgMathComponent} from './eg-math.component';
+import {AdderComponent} from './adder.component';
+import {RouterModule, Routes} from '@angular/router';
+const routes: Routes = [{
+  path: 'eg',
+  component: EgMathComponent
+}];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  declarations: [EgMathComponent, AdderComponent]
+})
+export class MathModule { }</code>
+Finally, let's update our first component's template to include a reference to our new component.  To do this, just change the line ''template: '<p>Evergreen is good at math</p>'' to ''template: '<p>Evergreen is good at math</p><eg-adder></eg-adder>'''
 ===== AngularJs =====
@@ Line 156: / Line 218: @@
 </code>
-Note: Evergreen has several other built-in types of modals, such as egConfirmDialog, egPromptDialog, and egSelectDialog.  You can find a complete list, as well as usage documentation, in this file: https://github.com/evergreen-library-system/Evergreen/blob/master/Open-ILS/web/js/ui/default/staff/services/ui.js
+Note: Evergreen has several other built-in types of modals, such as egConfirmDialog, egPromptDialog, and egSelectDialog.  You can find a complete list, as well as usage documentation, in this file: https://github.com/evergreen-library-system/Evergreen/blob/main/Open-ILS/web/js/ui/default/staff/services/ui.js
 ====Add an egGrid to your screen====