diff --git a/portal-2/src/app/test/test.component.ts b/portal-2/src/app/test/test.component.ts
index 0d77e9cc..f7faad12 100644
--- a/portal-2/src/app/test/test.component.ts
+++ b/portal-2/src/app/test/test.component.ts
@@ -18,10 +18,7 @@ import {SearchFields} from '../utils/properties/searchFields';
 @Component({
     selector: 'test',
     template: `
-    <div [innerHTML]="altmetrics | safeHtml">
-    <script async type='text/javascript' src='assets/altmetrics.js'></script>
-    </div>
-    <div>Ready:{{ready}}</div>
+   
     <!--div *ngIf="ready"-->
         <i-frame [url]=charturl width="30%" height="250"></i-frame>
     <!--/div-->
@@ -58,6 +55,7 @@ import {SearchFields} from '../utils/properties/searchFields';
          class="btn waves-effect waves-light"
          type="submit" name="action">DOWNLOAD</button>
      </div>
+     <altmetrics id="10.7717/peerj.1150" type="doi"></altmetrics>
 
 `
 
@@ -74,16 +72,12 @@ export class TestComponent {
 // public url = 'https://beta.openaire.eu/stats/chart.php?com=query&persistent=false&data={"query":"projScient","projTitle":"'+this.projectId+'", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "spline", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["Publications"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}';
   public user:{password:string,email:string} = {password:"",email:""};
   constructor(private _projectService: OpenaireProjectsService,private _searchProjectsService:SearchProjectsService,private _searchPubService:SearchPublicationsService,private _searchDataService:SearchDatasetsService, private _vocabulariesService: ISVocabulariesService, private _reportsService: ReportsService) {
+    // if (typeof document !== 'undefined') {
+    //    let yourModule = require('../utils/altmetrics.js');
+    //  }
    }
 public ready:boolean = false;
-  ngAfterContentChecked(){
-    console.info("ngAfterContentChecked");
-  }
-ngAfterViewChecked(){
-  this.ready=true;
-  console.info("ngAfterViewChecked");
 
-}
   ngOnInit() {
     // this.lan = this._vocabulariesService.getLanguages();
     this.lan = this._vocabulariesService.getVocabularyFromService("dnet:languages.json");
diff --git a/portal-2/src/app/utils/altmetrics.component.ts b/portal-2/src/app/utils/altmetrics.component.ts
new file mode 100644
index 00000000..9d09edc2
--- /dev/null
+++ b/portal-2/src/app/utils/altmetrics.component.ts
@@ -0,0 +1,29 @@
+import {Component, ElementRef, Input} from '@angular/core';
+ import {SafeHtmlPipe} from '../utils/pipes/safeHTML.pipe';
+//<altmetrics [id]="10.7717/peerj.1150" type="doi"></altmetrics>
+@Component({
+  selector: 'altmetrics',
+  template: `
+   <div [innerHTML]="altmetrics | safeHtml"></div>
+  `
+})
+export class AltMetricsComponent {
+  @Input() id ;
+  @Input() type = 'doi'; // doi or arxiv
+
+  // public doi="10.7717/peerj.1150";
+  public altmetrics:string;
+
+  constructor() {
+    if (typeof document !== 'undefined') {
+       let yourModule = require('../utils/altmetrics.js');
+     }
+  }
+  ngOnInit() {
+   if(this.type == "doi"){
+     this.altmetrics='<div data-badge-popover="right" data-badge-type="donut" data-doi="'+this.id+'" class="altmetric-embed"> </div>';
+   }else{
+     this.altmetrics='<div data-badge-popover="right" data-badge-type="donut" data-arxiv-id="'+this.id+'" class="altmetric-embed"> </div>';
+   }
+  }
+}
diff --git a/portal-2/src/app/utils/altmetrics.js b/portal-2/src/app/utils/altmetrics.js
new file mode 100644
index 00000000..0f2ad1d0
--- /dev/null
+++ b/portal-2/src/app/utils/altmetrics.js
@@ -0,0 +1 @@
+!function(e,t,n){var d="createElement",c="getElementsByTagName",m="setAttribute",n=document.getElementById(e);return n&&n.parentNode&&n.parentNode.removeChild(n),n=document[d+"NS"]&&document.documentElement.namespaceURI,n=n?document[d+"NS"](n,"script"):document[d]("script"),n[m]("id",e),n[m]("src",t),(document[c]("head")[0]||document[c]("body")[0]).appendChild(n),n=new Image,void n[m]("src","https://d1uo4w7k31k5mn.cloudfront.net/donut/0.png")}("altmetric-embed-js","https://d1bxh8uas1mnw7.cloudfront.net/assets/altmetric_badges-8f271adb184c21cc5169a7f67f7fe5ab.js");
diff --git a/portal-2/src/app/utils/utils.module.ts b/portal-2/src/app/utils/utils.module.ts
index 1ab90e45..7be80864 100644
--- a/portal-2/src/app/utils/utils.module.ts
+++ b/portal-2/src/app/utils/utils.module.ts
@@ -13,6 +13,8 @@ import {EntitiesAutocompleteComponent} from './entitiesAutoComplete.component';
 import {ShowDataProvidersComponent} from './showDataProviders.component';
 import {ExportCSVComponent} from './exportCSV.component';
 import {IFrameComponent} from './iframe.component';
+import {AltMetricsComponent} from './altmetrics.component';
+
 import {SafeHtmlPipe} from './pipes/safeHTML.pipe';
 
 import {AlertModal} from './modal/alert';
@@ -32,7 +34,8 @@ import {ModalLoading} from './modal/loading.component';
     ShowDataProvidersComponent,
     ExportCSVComponent,
     IFrameComponent,
-    SafeHtmlPipe
+    SafeHtmlPipe,
+    AltMetricsComponent
 
   ],
   exports: [
@@ -46,7 +49,8 @@ import {ModalLoading} from './modal/loading.component';
       ShowDataProvidersComponent,
       ExportCSVComponent,
       IFrameComponent,
-      SafeHtmlPipe
+      SafeHtmlPipe,
+      AltMetricsComponent
 
     ]
 })
diff --git a/portal-2/src/index.html b/portal-2/src/index.html
index 89af223f..57efd8bf 100644
--- a/portal-2/src/index.html
+++ b/portal-2/src/index.html
@@ -10,7 +10,6 @@
       <meta name="author" content="Super User" />
       <meta name="description" content="open access infrastructure, research information, open data, scientific publication, scientific information system, European Commission, EC, FP7, ERC, Horizon 2020, H2020, linked data" />
       <title>OpenAIRE</title>
-      <!--script async type='text/javascript' src='assets/altmetrics.js'></script-->
       <script src="assets/jquery/jquery.min.js" type="text/javascript"></script>
       <!--uikit-->
       <script src="assets/uikit-2.27.2/js/uikit.min.js" type="text/javascript"></script>
@@ -141,8 +140,6 @@
             </ul>
           </div>
         </div-->
-        <div class=" altmetrics" >
-          <div data-badge-popover="bottom" data-badge-type="medium-donut" data-doi="10.1038/nature.2014.14583" data-hide-no-mentions="true" class="altmetric-embed"></div>
-        </div>
+
    </body>
 </html>