Display a modal dialogue with an image on the initial page load for each user

Question

Display a modal dialogue with an image on the initial page load for each user

Working on a project with Angular 11, Angular material, and Bootstrap, I encountered an issue. I want to display a popup ad the first time a user visits the home page. The modal dialog is created using Angular material, and I have it in the ads component, which is then called in the home component's ngOnInit function to show the dialog when the page loads. Despite trying some solutions involving JS, none of them worked for me. Any guidance on how I can resolve this?

In my ads component HTML, only the image is displayed without a close button. However, I am open to adding one for a solution if necessary.

<mat-dialog-content id="myModal" class="gradient-border">
  <img style="max-width: 100%" src="../../../assets/img/modal-ad.jpg" />
</mat-dialog-content>

ads component ts

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-anuncios',
  templateUrl: './anuncios.component.html',
  styleUrls: ['./anuncios.component.css'],
})
export class AnunciosComponent implements OnInit {
  constructor(public dialogRef: MatDialogRef<AnunciosComponent>) {}

  ngOnInit(): void {}
}

Home component ts

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AnunciosComponent } from '../anuncios/anuncios.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  constructor(public dialog: MatDialog) {}

  ngOnInit(): void {
    this.showDialog();
  }

  showDialog() {
    const dialogRef = this.dialog.open(AnunciosComponent, {
      maxWidth: '100vw',
      maxHeight: '150vw',
      panelClass: ['animate__animated', 'animate__bounceInDown'],
    });
  }
}

The current implementation always displays the modal dialog when the home page loads, but I specifically need it to show only the first time the user visits the page. I explored options involving cookies or JS functions, but couldn't get them to work effectively for my project. Being new to this, I may not have utilized those solutions correctly. Any suggestions would be greatly appreciated.

javascript angular typescript angular-material

Answer 1

Answer №1

If you want to achieve a certain outcome, it's important to consider whether the user has already seen a dialog.

Here's another question for you:

Should the user see this each time the page loads?
Just once and never again?
Every time they start a new session on your site (open the browser to browse your site)?

If your scenario aligns with option 1, then having an internal variable could suffice. You can use either a static variable with a boolean or a singleton Service from Angular.

@Component({...})
export class MySection {
  public static showAdDialog = false

  ngOnInit() {
     if(!MySection.showAdDialog) {
        this.matRef.displayDialog()
        MySection.showAdDialog = true
     }
  }

}

If your situation involves displaying the advertisement only the first time the user visits your site, then store the variable in localStorage where it persists through browser sessions.

@Component({...})
export class MySection {
  public static showAdDialog = MySection.hasSeenAd()

  ngOnInit() {
     if(!MySection.showAdDialog) {
        this.matRef.displayDialog()
        MySection.markAsViewed()
     }
  }

  public static boolean hasSeenAd() {
    return JSON.parse(localStorage.getItem('advert'))
  }
  public static boolean markAsViewed() {
    localStorage.setItem('advert', true)
  }

}

If your case leans towards the latter, using sessionStorage is akin to localStorage but has a shorter lifespan (per session).

@Component({...})
export class MySection {
  public static showAdDialog = MySection.hasSeenAd()

  ngOnInit() {
     if(!MySection.showAdDialog) {
        this.matRef.displayDialog()
        MySection.markAsViewed()
     }
  }

  public static boolean hasSeenAd() {
    return JSON.parse(sessionStorage.getItem('advert'))
  }
  public static boolean markAsViewed() {
    sessionStorage.setItem('advert', true)
  }

}

To delve deeper into local and session storages, refer to this link.

My Approach in Applications

For storing items in localStorage such as preferences (user settings, dark mode, etc.) that should persist even after browser restarts, I opt for localStorage.

To prevent complexities when using raw localStorage, I create a singleton service called "UserSettingsService" that encapsulates the low-level localStorage operations for easier sharing across the app:

@Inject({providedIn: 'root'})
export class SettingsService {
  private storage: Storage = localStorage // Customize as needed based on your requirements

  public recordAdShown() {
    this.storage.setItem('advert', true)
  }

  public boolean checkAdShown() {
    const verifiedBoolean = this.storage.getItem('advert') ?? 'false' // Defaults to false if not found
    return JSON.parse(verifiedBoolean)
  }

}

In other classes:

@Component({...})
export class SomeComponent {
   adShownStatus = this.adverts.checkAdShown()
  constructor(private matRef: Mat..., private adverts: AdvertService){}

  ngOnInit() {
    if(!this.adShownStatus) {
      // Actions like displaying the advert
      this.adverts.recordAdShown()
    }
  }
}

This may seem excessive for just a boolean, but as apps grow more complex, maintenance becomes crucial. For instance, if you later need to display multiple ads and track which ones have been shown, the logic would evolve beyond serializing a boolean to handling different advertisement objects. By containing this complexity within a service, any necessary changes can be made in one central location, ensuring smooth operation throughout the app!

Answer 2

If you want to achieve a certain outcome, it's important to consider whether the user has already seen a dialog.

Here's another question for you:

Should the user see this each time the page loads?
Just once and never again?
Every time they start a new session on your site (open the browser to browse your site)?

If your scenario aligns with option 1, then having an internal variable could suffice. You can use either a static variable with a boolean or a singleton Service from Angular.

@Component({...})
export class MySection {
  public static showAdDialog = false

  ngOnInit() {
     if(!MySection.showAdDialog) {
        this.matRef.displayDialog()
        MySection.showAdDialog = true
     }
  }

}

If your situation involves displaying the advertisement only the first time the user visits your site, then store the variable in localStorage where it persists through browser sessions.

@Component({...})
export class MySection {
  public static showAdDialog = MySection.hasSeenAd()

  ngOnInit() {
     if(!MySection.showAdDialog) {
        this.matRef.displayDialog()
        MySection.markAsViewed()
     }
  }

  public static boolean hasSeenAd() {
    return JSON.parse(localStorage.getItem('advert'))
  }
  public static boolean markAsViewed() {
    localStorage.setItem('advert', true)
  }

}

If your case leans towards the latter, using sessionStorage is akin to localStorage but has a shorter lifespan (per session).

@Component({...})
export class MySection {
  public static showAdDialog = MySection.hasSeenAd()

  ngOnInit() {
     if(!MySection.showAdDialog) {
        this.matRef.displayDialog()
        MySection.markAsViewed()
     }
  }

  public static boolean hasSeenAd() {
    return JSON.parse(sessionStorage.getItem('advert'))
  }
  public static boolean markAsViewed() {
    sessionStorage.setItem('advert', true)
  }

}

To delve deeper into local and session storages, refer to this link.

My Approach in Applications

For storing items in localStorage such as preferences (user settings, dark mode, etc.) that should persist even after browser restarts, I opt for localStorage.

To prevent complexities when using raw localStorage, I create a singleton service called "UserSettingsService" that encapsulates the low-level localStorage operations for easier sharing across the app:

@Inject({providedIn: 'root'})
export class SettingsService {
  private storage: Storage = localStorage // Customize as needed based on your requirements

  public recordAdShown() {
    this.storage.setItem('advert', true)
  }

  public boolean checkAdShown() {
    const verifiedBoolean = this.storage.getItem('advert') ?? 'false' // Defaults to false if not found
    return JSON.parse(verifiedBoolean)
  }

}

In other classes:

@Component({...})
export class SomeComponent {
   adShownStatus = this.adverts.checkAdShown()
  constructor(private matRef: Mat..., private adverts: AdvertService){}

  ngOnInit() {
    if(!this.adShownStatus) {
      // Actions like displaying the advert
      this.adverts.recordAdShown()
    }
  }
}

This may seem excessive for just a boolean, but as apps grow more complex, maintenance becomes crucial. For instance, if you later need to display multiple ads and track which ones have been shown, the logic would evolve beyond serializing a boolean to handling different advertisement objects. By containing this complexity within a service, any necessary changes can be made in one central location, ensuring smooth operation throughout the app!

Display a modal dialogue with an image on the initial page load for each user

Answer №1

My Approach in Applications

Similar questions

Resetting the internal state in Material UI React Autocomplete: A step-by-step guide

Discovering the power of Next.js Dynamic Import for handling multiple exportsI hope this

I am experiencing an issue with my d3 force directed graph where the links are not

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

What could be causing my click event to fail to register after sorting a WebGrid with a click?

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

The .NET controller does not receive traffic for the GET method

Encountering an issue: "Failed HTTP response while trying to access https://localhost:44328/api/AllItProjectsLists/Index: 0 Error Message Unknown"

Exploring Javascript bugs in Visual Studio (or any other JS debugger)

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

Using JavaScript to bring in npm packages

Is there a way to incorporate a component into Particle.js?

What is the best way to play a video from a certain time point in a React application?

Having trouble updating the URL path with the $location service in Angular

AngularJS ng-repeat: displaying a list of filtered outcomes exclusively

Issues with utilizing Fetch API and JSON Data

Table cell featuring a status menu created with Material UI DataGrid

Variations in comparing tuple types in TypeScript

Exploring the distinctions between ajax, await, async, and

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there