first running version

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

 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { pagesRoutes } from 'app/editorialPages/pages.route';
+import { exerciseRoutes } from 'app/exercisePage/exercise.route';
 
 import { errorRoute } from './layouts/error/error.route';
 import { navbarRoute } from './layouts/navbar/navbar.route';
@@ -34,6 +35,7 @@ import { UserRouteAccessService } from 'app/core/auth/user-route-access.service'
           path: 'search',
           loadChildren: () => import('app/search/search.module').then(m => m.SearchModule),
         },
+        exerciseRoutes,
         {
           path: 'bookmarks',
           loadChildren: () => import('app/bookmarks/bookmarks.module').then(m => m.BookmarskModule),

src/main/webapp/app/exercise/exercise-card/exercise-card.component.html

@@ -59,10 +59,10 @@
         <!-- Button to Open the Modal -->
         <button
           type="button"
-          class="btn btn-outline-secondary"
+          class="btn btn-outline-secondary exerciseDetailButton"
           style="margin-top: 20px"
           data-toggle="modal"
-          data-target="#myModal"
+          data-target="#detailModal"
           (click)="selectExercise()"
           jhiTranslate="exercise.more"
         ></button>

src/main/webapp/app/exercise/exercise-card/exercise-card.component.ts

-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, AfterViewChecked } from '@angular/core';
 import { Exercise } from 'app/shared/model/exercise.model';
 import { SearchService } from 'app/search/service/search-service';
 import { WatchlistManager } from 'app/shared/watchlist/watchlist-manager';
@@ -10,8 +10,9 @@ import { ExerciseService } from '../service/exercise.service';
   templateUrl: './exercise-card.component.html',
   styleUrls: ['./exercise-card.component.scss'],
 })
-export class ExerciseCardComponent {
+export class ExerciseCardComponent implements AfterViewChecked {
   @Input() exercise: Exercise | undefined;
+  @Input() autoOpenDetails = false; // if true opens details dialog automatically
 
   @Output() exerciseSelectionEvent = new EventEmitter<Exercise>();
 
@@ -22,6 +23,16 @@ export class ExerciseCardComponent {
     private exerciseService: ExerciseService
   ) {}
 
+  ngAfterViewChecked() : void {
+	  if (this.autoOpenDetails) {
+	      const button = document.querySelector('.exerciseDetailButton');
+	      if(button instanceof HTMLElement) {
+	    	  button.click();
+	    	  this.autoOpenDetails = false;
+	      }
+
+	  }
+  }
   selectExercise(): void {
     this.exercise = this.exerciseService.populateExerciseWithData(this.exercise!);
     this.exerciseSelectionEvent.emit(this.exercise);

src/main/webapp/app/exercise/exercise-details/exercise-details.component.html

 <div *ngIf="exercise">
-  <div class="modal fade" id="myModal">
+  <div class="modal fade" id="detailModal">
     <div class="modal-dialog modal-lg modal-dialog-centered">
       <div class="modal-content">
         <ng-template #helpComingSoon> {{ 'exercise.comingSoon' | translate }}</ng-template>

src/main/webapp/app/exercisePage/exercise.component.html

+<div class="row">
+  <div>
+    Hello Exercise {{ exerciseId }}: <span *ngIf="exercise">{{exercise!.title}} </span>
+    <jhi-exercise-details [exercise]="exercise" ></jhi-exercise-details> 
+    
+          <jhi-exercise-card
+        
+        class="card-container col-12 col-lg-6 col-xl-4"
+        [exercise]="exercise"
+        [autoOpenDetails]="true"
+       
+      >
+      </jhi-exercise-card>
+  </div>
+</div>

src/main/webapp/app/exercisePage/exercise.component.ts

+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ExerciseService } from 'app/exercise/service/exercise.service'
+import { Exercise, searchResultToExercise } from 'app/shared/model/exercise.model';
+import { ExerciseDetailsComponent } from 'app/exercise/exercise-details/exercise-details.component'
+
+@Component({
+  selector: 'jhi-exercisePage',
+  styleUrls: ['./exercise.component.scss'],
+  templateUrl: './exercise.component.html',
+})
+export class ExerciseComponent implements OnInit {
+	exerciseId = '';
+	exercise?: Exercise;
+
+  @Output() exerciseSelectionEvent = new EventEmitter<Exercise>();
+
+  constructor(private activatedRoute: ActivatedRoute, private exerciseService: ExerciseService) {}
+
+  ngOnInit(): void {
+    this.activatedRoute.data.subscribe( ({pagePath})  => {
+      this.exerciseId = pagePath;
+      this.exerciseService.loadExercise(this.exerciseId).subscribe(
+    		  searchResult => {
+    		      this.exercise = searchResultToExercise(searchResult);
+    		      this.exercise = this.exerciseService.populateExerciseWithData(this.exercise);
+    		      this.exerciseSelectionEvent.emit(this.exercise);
+    		      // this.modalService.open(ExerciseDetailsComponent)
+    	  })
+      
+    });
+  }
+}

src/main/webapp/app/exercisePage/exercise.route.ts

+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { ExerciseComponent } from './exercise.component';
+
+@Injectable({ providedIn: 'root' })
+export class ExerciseResolve implements Resolve<String> {
+  resolve(route: ActivatedRouteSnapshot): Observable<String> | Observable<never> {
+    let subUrl = '';
+    for (let i = 0; i < route.url.length; i++) {
+      // subUrl += '/';
+      subUrl += route.url[i].path;
+    }
+    if (subUrl === '') return of('helpStart');
+    return of(subUrl);
+  }
+}
+
+export const exerciseRoutes = {
+  path: 'exercise',
+  children: [
+    {
+      path: '**',
+      loadChildren: () => import('app/exercisePage/exercisePages.module').then(m => m.ExercisePageModule),
+      resolve: {
+        pagePath: ExerciseResolve,
+      },
+      component: ExerciseComponent,
+    },
+  ],
+};

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

+import { HttpClient, HttpParams, HttpXhrBackend } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+import { SharedLibsModule } from '../shared/shared-libs.module';
+import { MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
+import { Observable } from 'rxjs';
+import { AppInjector } from '../app.module';
+import { ExerciseModule } from 'app/exercise/exercise.module';
+
+import { ExerciseComponent } from './exercise.component';
+
+@NgModule({
+  imports: [
+    SharedLibsModule,
+      //  sanitize: SecurityContext.NONE
+    ExerciseModule
+    
+  ],
+  declarations: [ExerciseComponent],
+  exports: [],
+})
+export class ExercisePageModule {}