start to output of the organizationlist

code/moya-management-portal/src/app/app.component.html

@@ -5,4 +5,5 @@
   </h1>
   </h1>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 </div>
+<moya-organization-list></moya-organization-list>
 <moya-event-list></moya-event-list>
 <moya-event-list></moya-event-list>
\ No newline at end of file

code/moya-management-portal/src/app/organization/organization-list/organization-list.component.html

 <mat-form-field>
 <mat-form-field>
-  <mat-select placeholder="Organization" [(value)]="selected">
+  <mat-select placeholder="Organization" [(ngModel)]="selectedValue" (ngModelChange)="onChange($event)">
     <mat-option *ngFor="let organization of organizations" value={{organization.name}}>{{organization.name}}</mat-option>
     <mat-option *ngFor="let organization of organizations" value={{organization.name}}>{{organization.name}}</mat-option>
   </mat-select>
   </mat-select>
 </mat-form-field>
 </mat-form-field>
+
+{{selectedValue}}
\ No newline at end of file

code/moya-management-portal/src/app/organization/organization-list/organization-list.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output} from '@angular/core';
 import {OrganizationListService} from './organization-list.service';
 import {OrganizationListService} from './organization-list.service';
+import { EventEmitter } from '@angular/core';
 
 
 
 
 @Component({
 @Component({
@@ -9,6 +10,11 @@ import {OrganizationListService} from './organization-list.service';
 })
 })
 export class OrganizationListComponent implements OnInit {
 export class OrganizationListComponent implements OnInit {
 
 
+  public selectedValue: string;
+
+  @Output()
+  ngModelChange = new EventEmitter();
+
   public organizations = [
   public organizations = [
     {name: 'Assemly Organization'},
     {name: 'Assemly Organization'},
     {name: 'Assemly'},
     {name: 'Assemly'},
@@ -19,6 +25,9 @@ export class OrganizationListComponent implements OnInit {
     console.log(this.organizationListService.get());
     console.log(this.organizationListService.get());
   }
   }
 
 
+  onChange() {
+  }
+
   ngOnInit() {
   ngOnInit() {
   }
   }
 
 

code/moya-management-portal/src/app/organization/organization.component.html

+<p>
+  organization works!
+</p>

code/moya-management-portal/src/app/organization/organization.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrganizationComponent } from './organization.component';
+
+describe('OrganizationComponent', () => {
+  let component: OrganizationComponent;
+  let fixture: ComponentFixture<OrganizationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrganizationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrganizationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-management-portal/src/app/organization/organization.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'moya-organization',
+  templateUrl: './organization.component.html',
+  styleUrls: ['./organization.component.scss']
+})
+export class OrganizationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-management-portal/src/app/organization/organization.module.ts

@@ -7,16 +7,19 @@ import {MatSelectModule} from '@angular/material/select';
 import {OrganizationListService} from './organization-list/organization-list.service';
 import {OrganizationListService} from './organization-list/organization-list.service';
 import {MatCardModule} from '@angular/material/card';
 import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material';
 import {MatButtonModule} from '@angular/material';
+import { OrganizationComponent } from './organization.component';
+import { FormsModule } from '@angular/forms';
 
 
 @NgModule({
 @NgModule({
   imports: [
   imports: [
     CommonModule,
     CommonModule,
     MatSelectModule,
     MatSelectModule,
     MatCardModule,
     MatCardModule,
-    MatButtonModule
+    MatButtonModule,
+    FormsModule
   ],
   ],
   providers: [OrganizationListService],
   providers: [OrganizationListService],
-  declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent],
+  declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent, OrganizationComponent],
   exports: [NewOrganizationComponent, OrganizationListComponent, EventListComponent],
   exports: [NewOrganizationComponent, OrganizationListComponent, EventListComponent],
 })
 })
 export class OrganizationModule { }
 export class OrganizationModule { }