D-Net

                  <!--<button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>-->

                  <button [routerLink]="['/countryDashboard' , selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>

        <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">

          <span id="search-icon" uk-search-icon></span>

          <ng-autocomplete

            [data]="countriesCollection"

            [searchKeyword]="keyword"

            placeHolder="Search for a country..."

            (selected)='selectCountryFromAutocompleteEvent($event)'

            (inputChanged)='onChangeSearch($event)'

            (inputFocused)='onFocused($event)'

            historyIdentifier="countriesCollection"

            [itemTemplate]="itemTemplate"

            [notFoundTemplate]="notFoundTemplate">

          </ng-autocomplete>

          <ng-template #itemTemplate let-item>

            <a [innerHTML]="item.name"></a>

          </ng-template>

          <ng-template #notFoundTemplate let-notFound>

            <div [innerHTML]="notFound"></div>

          </ng-template>

        <!--<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">-->

          <!--<span uk-search-icon></span>-->

          <!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->

          <!--&lt;!&ndash;<input type="text">&ndash;&gt;-->

        <!--</div>-->

            <a [routerLink]="['/countryDashboard', data.code]" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>

        <a class="" [routerLink]="['/overview' , 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>