How to change the content of a html element on hover in Angular

Codever Logo

(P) Codever is an open source bookmarks and snippets manager for developers & co. See our How To guides to help you get started. Public bookmarks repos on Github ⭐🙏

Use case

I find my self often use the autocomplete function of my last searches in the search box to find and access bookmarks and snippets I recently looked for. I figured out since I do that, why not make it easier. So I did - I added sort of quick access to my last searches directly from the side menu in the landing page. See it in action below:

Quick access to My Last Searches animation
Quick access to My Last Searches animation

One tricky part was to show the whole content of the search when its length passes a certain limit. That meant when hovering dynamically changing the content of the html anchor a element. This was even more difficult, because the list is dynamically generated out of the last searches. Let’s see how I implemented that.


First I initialise the elements of the booleans list hoveringLastSearches to false. We also need a method - hovering(), which returns the boolean value of an element from the list given its index:

export class AppComponent implements OnInit {

 //... other code parts removed for brevity

  private hoveringLastSearches: boolean[] = [];

  ngOnInit(): void {
    this.keycloakService.isLoggedIn().then(isLoggedIn => {
        //... other code parts removed for brevity
        this.latestSearches$ = this.userDataStore.getUserData$().pipe(
          map(userData => {
            for (let i = 0; i < 10; i++) {
            return userData.searches.slice(0, 10);

 //... other code parts removed for brevity

  hovering(i: number): boolean {
    return this.hoveringLastSearches[i];


In the html template, when hovering over the element (mouseover event) or when exiting the element (mouseout) I set the corresponding boolean value to true, respectively to false of the corresponding element in the list. Then when displaying the content, depending on the result of the hovering(index) result I use the longer, respectively the short version of the text:

    <ng-container *ngFor="let mySearch of latestSearches; let i = index" class="mt-1">
        <span class="mt-1 mr-2">
              [queryParams]="{q: mySearch.text, sd: mySearch.searchDomain }"
              class="badge badge-secondary mb-1  ml-2"
              []="mySearch.searchDomain === 'my-snippets'"
              [class.public-snippets-last-search]="mySearch.searchDomain === 'public-snippets'"
              []="mySearch.searchDomain === 'my-bookmarks'"
              [class.public-bookmarks-last-search]="mySearch.searchDomain === 'public-bookmarks'"
              title="Search in "
            >  <i class="fa fa-xs fa-search mr-1"></i>
                *ngIf="!hovering(i); else longVersion"></span>
              <ng-template #longVersion></ng-template>
              <i *ngIf="mySearch.searchDomain === 'my-snippets' || mySearch.searchDomain === 'public-snippets'"
                 class="fa fa-xs fa-code ml-1"></i>
              <i *ngIf="mySearch.searchDomain === 'my-bookmarks' || mySearch.searchDomain === 'public-bookmarks'"
                 class="fa fa-xs fa-bookmark ml-1"></i>
Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Mongoose schema field from list of strings (enum)

Mongoose schema field from list of strings (enum) code snippet Continue reading

Set value of input field in angular template

Published on December 14, 2022

How to use jest test.each function

Published on December 14, 2022