merge yves

src/app/activity-service.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ActivityServiceService } from './activity-service.service';
+
+describe('ActivityServiceService', () => {
+  let service: ActivityServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ActivityServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/activity-service.service.ts

+import { Injectable } from '@angular/core';
+import { Activity } from './activity';
+import { ACTIVITIES } from './mock-activity';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ActivityServiceService {
+  listactivity! : Activity[];
+
+  constructor() { }
+  get(){
+    return this.listactivity=ACTIVITIES;
+  }
+  getname(activityname : string) {
+      const activity = ACTIVITIES.find(activity => activity.name === activityname);
+            if (!activity) {
+                throw new Error('name not found!');
+            } else {
+                return activity;
+            }
+  }
+}

src/app/activity.ts

+export interface Activity {
+    type:string
+    name:string
+    date:Date
+    description:string
+    description_detail:string
+}

src/app/activity/activity.component.html

+
+<div class="card" style="width: 18rem;">
+    <div class="card-body">
+        <h5 class="card-title text-center">{{ activity.type }} : {{ activity.name}}</h5>
+        <h6 class="">Decription : {{ activity.description}}</h6>
+        <p class="card-text" style= "text-align: center">Date : {{activity.date}}</p>
+        <button class="btn btn-primary" (click)="select()">Select</button>
+    </div>
+</div>

src/app/activity/activity.component.spec.ts

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

src/app/activity/activity.component.ts

+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Activity } from '../activity';
+import { ActivityServiceService } from '../activity-service.service';
+
+
+@Component({
+  selector: 'app-activity',
+  templateUrl: './activity.component.html',
+  styleUrls: ['./activity.component.css']
+})
+export class ActivityComponent {
+
+  constructor(private activityservice : ActivityServiceService, private router: Router){}
+  @Input() activity!: Activity;
+  select(){
+      console.log(this.activity.name);
+      this.router.navigateByUrl(`activity/${this.activity.name}`)
+    }
+}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ActivityComponent } from './activity/activity.component';
+import { DetailActivityComponent } from './detail-activity/detail-activity.component';
+import { ListactivityComponent } from './listactivity/listactivity.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:'activity', component:ListactivityComponent},
+  {path:'activity/:name', component:DetailActivityComponent},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

+
 <app-change-page></app-change-page>
+

src/app/app.module.ts

@@ -4,16 +4,25 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+
 import { ActivityCardsComponent } from './activity-cards/activity-cards.component';
 import { ActivityContextDirective } from './activity-context.directive';
 import { ChangePageComponent } from './change-page/change-page.component';
+import { ListactivityComponent } from './listactivity/listactivity.component';
+import { ActivityComponent } from './activity/activity.component';
+import { DetailActivityComponent } from './detail-activity/detail-activity.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
     ActivityCardsComponent,
     ActivityContextDirective,
-    ChangePageComponent
+    ChangePageComponent,
+    ListactivityComponent,
+    ActivityComponent,
+    DetailActivityComponent
+
   ],
   imports: [
     BrowserModule,

src/app/detail-activity/detail-activity.component.html

+<div class="text-center">
+    <h1>{{ activity.name }}</h1>
+    <div>
+        <h5>Date : {{ activity.date }}</h5>
+        <h5>Description : {{ activity.description }}</h5>
+        <br>
+        <p>{{ activity.description_detail }}</p>
+    </div>
+</div>

src/app/detail-activity/detail-activity.component.spec.ts

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

src/app/detail-activity/detail-activity.component.ts

+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Activity } from '../activity';
+import { ActivityServiceService } from '../activity-service.service';
+
+@Component({
+  selector: 'app-detail-activity',
+  templateUrl: './detail-activity.component.html',
+  styleUrls: ['./detail-activity.component.css']
+})
+export class DetailActivityComponent {
+  activity! :Activity;
+  constructor(private activityservice: ActivityServiceService, private route: ActivatedRoute, private router: Router){
+
+  }
+
+  ngOnInit():void{
+
+    const activityname = this.route.snapshot.params['name'];
+    this.activity=this.activityservice.getname(activityname);
+  }
+}

src/app/listactivity/listactivity.component.html

+<div class="row">
+    <div class="col-sm-4" *ngFor="let activity of act">
+        <app-activity [activity]="activity"></app-activity>
+    </div>
+</div>
\ No newline at end of file

src/app/listactivity/listactivity.component.spec.ts

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

src/app/listactivity/listactivity.component.ts

+import { Component } from '@angular/core';
+import { Activity } from '../activity';
+import { ActivityServiceService } from '../activity-service.service';
+
+@Component({
+  selector: 'app-listactivity',
+  templateUrl: './listactivity.component.html',
+  styleUrls: ['./listactivity.component.css']
+})
+export class ListactivityComponent {
+  act: Activity[];
+  constructor(private activityservice : ActivityServiceService){
+    this.act = this.activityservice.get();
+  }
+}

src/app/mock-activity.ts

+import { Activity } from "./activity";
+
+export const ACTIVITIES: Activity[] = [
+    {
+        type:"Sport",
+        name:"Football",
+        date:new Date(30/10/2060),
+        description:"J'adore le foot c'est cool !",
+        description_detail:"lgighoiihgfdiofoihfiskdjfksdjfmlskdjflmkjfklsmjdfdslfjsdmlkfjsdlmfjdsklfjdslmfkjdflmsjmfldjflsjfkldfmlsdjkfklsdfjsdlfjslmfdjflsj",
+    },
+    {
+        type:"Sport",
+        name:"Curling",
+        date:new Date(11/11/1111),
+        description:"Est-ce un sport ?",
+        description_detail:"curlinglgighoiihgfdiofoihfiskdjfksdjfmlskdjflmkjfklsmjdfdslfjsdmlkfjsdlmfjdsklfjdslmfkjdflmsjmfldjflsjfkldfmlsdjkfklsdfjsdlfjslmfdjflsj",
+    },
+    {
+        type:"Afterwork",
+        name:"Bar",
+        date:new Date(15/15/2015),
+        description:"Objectif 4g",
+        description_detail:"barlgighoiihgfdiofoihfiskdjfksdjfmlskdjflmkjfklsmjdfdslfjsdmlkfjsdlmfjdsklfjdslmfkjdflmsjmfldjflsjfkldfmlsdjkfklsdfjsdlfjslmfdjflsj",
+    },
+    {
+        type:"Conférence",
+        name:"Avis soutenance de thèse n°404",
+        date:new Date(5/5/5005),
+        description:"bla bla bla",
+        description_detail:"thèse1lgighoiihgfdiofoihfiskdjfksdjfmlskdjflmkjfklsmjdfdslfjsdmlkfjsdlmfjdsklfjdslmfkjdflmsjmfldjflsjfkldfmlsdjkfklsdfjsdlfjslmfdjflsj",
+    },
+    {
+        type:"Conférence",
+        name:"Avis soutenance de thèse n°8687",
+        date:new Date(14/5/10500),
+        description:"bla bla bla",
+        description_detail:"thèse2lgighoiihgfdiofoihfiskdjfksdjfmlskdjflmkjfklsmjdfdslfjsdmlkfjsdlmfjdsklfjdslmfkjdflmsjmfldjflsjfkldfmlsdjkfklsdfjsdlfjslmfdjflsj",
+    }
+];
\ No newline at end of file

src/index.html

 <!doctype html>
 <html lang="en">
 <head>
+
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <body style="background-color: bisque; margin: 0px; overflow: hidden;">
+
   <app-root></app-root>
 </body>
 </html>