D-Net

    this.piwiks = [

      {

        'repositoryId': 'repo_id',

        'openaireId': 'oa_id',

        'repositoryName': 'the repo name',

        'country': 'Greece',

        'siteId': '123',

        'authenticationToken': '32846584f571be9b57488bf4088f30ea',

        'creationDate':  new Date(2018, 1, 3),

        'requestorName': 'Bla blabla',

        'requestorEmail': 'blabla@gmail.com',

        'validated': false,

        'validationDate':  new Date(2018, 1, 3),

        'comment' : ''

      },

      {

        'repositoryId': 'repo_id2',

        'openaireId': 'oa_id2',

        'repositoryName': 'the repo name2',

        'country': 'Greece',

        'siteId': '123',

        'authenticationToken': '32846584f88f30easdfasdfa',

        'creationDate':  new Date(2018, 1, 4),

        'requestorName': 'Bla blabla',

        'requestorEmail': 'blabla2@gmail.com',

        'validated': true,

        'validationDate':  new Date(2018, 1, 4),

        'comment' : ''

      },

      {

        'repositoryId': 'repo_id3',

        'openaireId': 'oa_id',

        'repositoryName': 'the repo name',

        'country': 'Greece',

        'siteId': '123',

        'authenticationToken': '32846584f571be9b57488bf4088f30ea',

        'creationDate': new Date(2018, 1, 3),

        'requestorName': 'Bla blabla',

        'requestorEmail': 'blabla2@gmail.com',

        'validated': false,

        'validationDate': new Date(2018, 1, 3),

        'comment' : ''

      }

    ]

/*

*/

    customValidationSet: ['']

  removeInterface(){

    console.log("removed  something!");

  }

      <a [routerLink]="['repo']" class="btn btn-primary">DELETE ME LATER !!</a>

                <div class="uk-alert uk-alert-warning">

              <div class="interfacesForm">

                <form [formGroup]="group">

                  <!--<update-datasource-interface-form #datasourceForm [name]="'myname'" [parentGroup]="group"></update-datasource-interface-form>-->

                  <form-repeat [component]="updateDatasource"

                               [parentGroup]="group"

                               [description]="interfaceFormDesc"

                               [name]="'repeat'">

                  </form-repeat>

                </form>

              </div>

    this.group = fb.group({});

<div>

  <div [formGroup]="group">

    <div *ngIf="successMessage" class="uk-alert uk-alert-success" style="display:none;" aria-hidden="true">{{ successMessage }}</div>

    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" style="display:none;" aria-hidden="true">{{ errorMessage }}</div>

    <div class="uk-fieldset">

      <label class="uk-form-controls-text control-label">Base URL (*)

        <input type="text" class="uk-input" formControlName="baseUrl" disabled="">

      </label>

    </div>

    <div class="uk-fieldset">

      <label class="uk-form-controls-text control-label">Validation Set</label>

      <div>

        <label class="uk-button uk-button-link validationSetRadio disabled">

          <input value="select" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(true)">

          <span>choose existing</span>

        <div class="uk-margin">

          <select formControlName="selectValidationSet" class="uk-select">

            <option value="noneSelected">-- none selected --</option>

        </div>

        <label class="uk-button uk-button-link validationSetRadio disabled">

          <input value="custom" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(false)">

          <span>or a custom one</span>

        <div class="uk-margin">

          <input formControlName="customValidationSet" class="uk-input" type="text">

        </div>

    <div class="uk-fieldset">

      <label class="uk-form-controls-select control-label">Desired Compatibility Level (*)

        <select class="uk-select" name="compatibilityLevel" formControlname="compatibilityLevel">

          <option value="">-- none selected --</option>

        </select>

      </label>

    </div>

    <div>

      <label class="uk-form-controls-text control-label">Current Compatibility Level

        <!-- SHOW CURRENT LEVEL -->

      </label>

    </div>

</div>

            path: 'repo',

//    canActivate: [AuthGuardService],

      <div class="uk-grid-large uk-grid-margin-large uk-grid repos-grid" *ngIf="layoutChoice == 'tiles'">

          {{ setPropertiesForRepo(repo) }}

                      <a class="el-link" href="{{ linkToNext }}">

                      <div class="{{ badgeCSS }}">

                        {{ badgeText }}

      <div class="uk-grid-large uk-grid-margin-large uk-grid repos-list" *ngIf="layoutChoice == 'list'">

                    {{ setPropertiesForRepo(repo) }}

                      <img *ngIf="repo.logoUrl" class="el-image uk-preserve-width" src="{{ repo.logoUrl }}" style="height: 45px;">

                    <td *ngIf="parent=='metrics'" class="uk-text-nowrap uk-table-shrink">

                      <div class="{{ badgeCSS }}">{{ badgeText }}</div>

                      {{ badgeText }}</td>

                      <a href="{{ linkToNext }}">

import { PiwikInfo, Repository } from '../../domain/typeScriptClasses';

  layoutChoice: string;

  badgeCSS: string;

  badgeText: string;

  linkToNext: string;

    this.layoutChoice = 'tiles';

  setPropertiesForRepo(repo: Repository): void {

    if(this.parent=='metrics'){

      this.goToValidationLink(repo.piwikInfo, repo.id);

      this.badgeCSS = 'el-meta uk-margin uk-text-meta';

      this.badgeText = '0';

      this.linkToNext = `/contact/events/${repo.officialName}`;

    } else if(this.parent=='sourcesUpd') {

      console.log("got repo id!!");

      this.linkToNext = `/sources/update/${repo.id}`;

  goToValidationLink(piwik: PiwikInfo, id: string) {

    if(piwik){

      if(piwik.validated === true){

        this.badgeCSS = 'uk-badge uk-badge-success';

        this.badgeText = 'enabled';

        this.linkToNext = `/getImpact/show_metrics/${id}`;

      } else if ( piwik.validated === false ) {

        this.badgeCSS = 'uk-badge uk-badge-warning';

        this.badgeText = 'enabling in progress';

        this.linkToNext = `/getImpact/instructions/${id}`;

      }

    } else {

      this.badgeCSS = 'uk-badge uk-badge-danger';

      this.badgeText = 'not enabled';

      this.linkToNext = `/getImpact/enable/${id}`;

    this.layoutChoice = 'tiles';

    this.layoutChoice = 'list';

  <div [formGroup]="parentGroup" class="uk-margin uk-grid-match uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade">

          <ng-template my-form></ng-template>

  <div class="uk-margin uk-grid-match uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade">

    <div class="interface-box new" style="text-align: center">

        <a class="add-new-element add-new-group" (click)="push()"><i class="fa fa-plus-square-o" aria-hidden="true"></i>

          <span class="info">Add New {{ description.label }}</span></a>

    </div>

  </div>

    <div class="group">

<!--

        <div class="uk-grid">

            <div class="uk-width-1-5"></div>

            <div class="uk-width-expand\@m">

                <label class="">

                    {{description.label}}

                    <a *ngIf="canDelete" class="remove-element" (click)="remove()">

                        <i class="fa fa-times" aria-hidden="true"></i>

                    </a>

                </label>

            </div>

        </div>

-->