affichage

angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -89,6 +90,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -120,6 +122,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "ifi"
 }
\ No newline at end of file

package-lock.json

@@ -134,6 +134,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.2.2.tgz",
+      "integrity": "sha512-e+BtFab0Vd1q/ZVu6l850Q4vvgyVYiugSX31oMRlp86fKHPowlAO7jL3z5JcAG7TybpLIqd7oqF8XQBR/yw83w==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+          "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "8.3.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-8.3.8.tgz",
@@ -993,6 +1010,14 @@
       "integrity": "sha512-F6ReN0cToHIkCjEM2ECkBxCTsvFjVae8FpIr3Fz8IHZHOOYcS5mx/BWdEO7odI5/tQKl+cCWol7NjvJYV0zolg==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.2.2.tgz",
+      "integrity": "sha512-mR2ppE+Z1S5As2SUFK8wUH76Fj7YgrefhrwVGaeCLcAen//RHPw043+KL2apPAUaltdIFlGFtUuA6yJN6av0nQ==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "8.2.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.9.tgz",
@@ -5276,6 +5301,11 @@
       "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",

package.json

@@ -12,14 +12,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.9",
+    "@angular/cdk": "~8.2.2",
     "@angular/common": "~8.2.9",
     "@angular/compiler": "~8.2.9",
     "@angular/core": "~8.2.9",
     "@angular/forms": "~8.2.9",
     "@angular/http": "^2.1.2",
+    "@angular/material": "^8.2.2",
     "@angular/platform-browser": "~8.2.9",
     "@angular/platform-browser-dynamic": "~8.2.9",
     "@angular/router": "~8.2.9",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "rxjs-compat": "^6.5.3",
     "tslib": "^1.10.0",

src/app/app.component.html

+<div class="container">
     <app-header></app-header>
 
     <h1>
       Journal
     </h1>
-
 <app-articles-list></app-articles-list>
+</div>

src/app/app.component.ts

 import { Component } from '@angular/core';
-
+import { MatSliderModule } from '@angular/material/slider';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
+
 })
 export class AppComponent {
   title = 'ifi';

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
+import {MatExpansionModule} from '@angular/material/expansion';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -15,7 +16,9 @@ import { ArticlesListComponent } from './components/articles-list/articles-list.
    ],
    imports: [
       BrowserModule,
-      AppRoutingModule
+      AppRoutingModule,
+      MatExpansionModule,
+      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [

src/app/components/articles-list/articles-list.component.css

+.article {
+  margin:10px;
+  padding-bottom: 10px;
+}

src/app/components/articles-list/articles-list.component.html

 <!--A supprimer-->
-
-<div *ngFor="let article of articles">
+<div class="row ">
+    <div  class="col-12 card article" *ngFor="let article of articles; let i = index">
+      <div class="card-body">
         {{article.name}}
+      </div>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Abstract
+              </mat-panel-title>
+              <mat-panel-description>
+                  {{article.year}}
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            {{article.abstract}}
+
+          </mat-expansion-panel>
+
+    </div>
 </div>

src/app/shared/mocks/articles.ts

@@ -87,11 +87,5 @@ export const articles: Article[] = [
     'various negative workplace experiences reported feeling likethey “do not belong”. Exposures to  discriminatory ' +
     'expletivesor negative critiques from their male colleagues may furtherexacerbate those feelings.',
     url: 'https://arxiv.org/pdf/1812.05560.pdf'
-  },
-  {
-    name: 'Semantics-based program verifiers for all languages',
-    year: 2016,
-    abstract: '',
-    url: 'https://dl.acm.org/citation.cfm?doid=2983990.2984027'
   }
 ];

src/index.html

@@ -6,8 +6,14 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 </body>
 </html>

src/main.ts

+import 'hammerjs';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }