intermediate commit: fighting with dropdown

src/main/webapp/app/app.module.ts

@@ -17,6 +17,7 @@ import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive';
 import { ErrorComponent } from './layouts/error/error.component';
 import { QueryParamModule } from '@ngqp/core';
 import { CacheService } from 'app/shared/service/cache.service';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   imports: [
@@ -29,6 +30,7 @@ import { CacheService } from 'app/shared/service/cache.service';
     GitSearchV2EntityModule,
     GitSearchV2AppRoutingModule,
     QueryParamModule,
+    NgbDropdown,
   ],
   declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent],
   bootstrap: [MainComponent],

src/main/webapp/app/shared/watchlist/watchlist-manager.ts

+import { Injectable, OnDestroy, OnInit } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { UserWatchListService } from 'app/entities/user-watch-list/user-watch-list.service';
+import { IUserWatchList } from 'app/shared/model/user-watch-list.model';
+import { AccountService } from 'app/core/auth/account.service';
+import { Subscription } from 'rxjs';
+import { Account } from 'app/core/user/account.model';
+
+
+/**
+ provides infrastructure for watchlists management.
+ The manager is is charge to guarantee that the local watchlists and the watchlists on the server are in synchrony.
+ If the user is not logged in, the watchlists are undefined.
+ */
+@Injectable({ providedIn: 'root' })
+export class WatchlistManager implements OnInit, OnDestroy {
+
+  account: Account | null = null;
+  authSubscription?: Subscription;
+
+    myWatchLists?: IUserWatchList[];
+    currentWatchlist? = '';
+    constructor(
+        protected watchListService: UserWatchListService,
+        private accountService: AccountService,
+
+    ) {
+        this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => {
+            this.account = account;
+            if(this.accountService.isAuthenticated()) {
+            this.watchListService.findMyWatchlists().subscribe((data: HttpResponse<IUserWatchList[]>) => {
+                if (data.body) {
+                    this.myWatchLists = data.body;
+                    if(this.myWatchLists.length > 0) {
+                        this.currentWatchlist = this.myWatchLists[0].name
+                    }
+                }
+
+            })
+                
+            }
+            else { this.myWatchLists = undefined; }
+            });
+    }
+    
+    public getMyWatchLists(): IUserWatchList[]| undefined {
+        return this.myWatchLists;
+    }
+
+    ngOnInit(): void {
+    }
+
+  ngOnDestroy(): void {
+    if (this.authSubscription) {
+      this.authSubscription.unsubscribe();
+    }
+  }
+}

src/main/webapp/app/watchlist/watchlist.component.html

 <div >
-    <div *ngFor="let watchList of getMyWatchLists()">{{watchList.name}} 
-    </div>
+  <button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor>Toggle dropdown</button>
+ <div ngbDropdownMenu aria-labelledby="dropdownManual" >
+    <button ngbDropdownItem *ngFor="let watchList of getMyWatchLists()">{{watchList.name}}</button>
+  </div>
 </div>
 
 

src/main/webapp/app/watchlist/watchlist.component.ts

-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { HttpResponse } from '@angular/common/http';
-import { UserWatchListService } from '../entities/user-watch-list/user-watch-list.service';
+import { Component } from '@angular/core';
+import {WatchlistManager} from 'app/shared/watchlist/watchlist-manager';
 import { IUserWatchList } from 'app/shared/model/user-watch-list.model';
-import { AccountService } from 'app/core/auth/account.service';
-import { Subscription } from 'rxjs';
-import { Account } from 'app/core/user/account.model';
 
 
 @Component({
@@ -12,53 +8,19 @@ import { Account } from 'app/core/user/account.model';
     templateUrl: './watchlist.component.html',
     styleUrls: ['./watchlist.component.scss'],
 })
-export class WatchlistComponent implements OnInit, OnDestroy {
-
-  account: Account | null = null;
-  authSubscription?: Subscription;
+export class WatchlistComponent {
 
     myWatchLists: IUserWatchList[] | undefined;
 
     constructor(
-        protected watchListService: UserWatchListService,
-        private accountService: AccountService,
+        private watchlistManager: WatchlistManager,
 
     ) {
     }
 
-    getMyWatchLists(): IUserWatchList[] {
-        if(!this.isAuthenticated()) return [];
-            if (!this.myWatchLists) {
-            this.watchListService.findMyWatchlists().subscribe((data: HttpResponse<IUserWatchList[]>) => {
-                if (data.body) {
-                    this.myWatchLists = data.body;
-                    /*
-                    this.myWatchLists = [];
-                    for (let i = 0; i < data.body.length; i++) {
-                        this.myWatchLists.push(data.body[i]);
-                    }
-                    */
-                }
-
-            })
-            return[]; 
-        } else {
-            return this.myWatchLists;
-        }
-
-    }
+    getMyWatchLists(): IUserWatchList[]|undefined {
+        return this.watchlistManager.getMyWatchLists();
 
-    ngOnInit(): void {
-        this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
     }
 
-  isAuthenticated(): boolean {
-    return this.accountService.isAuthenticated();
-  }
-
-  ngOnDestroy(): void {
-    if (this.authSubscription) {
-      this.authSubscription.unsubscribe();
-    }
-  }
 }