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

Troubleshooting: The issue of ngModel being undefined in Angular2 with the <input> element

Steps to Validate a Form: To allow the submit button to be enabled only when all input fields are filled out; if any field is left empty,

The jQuery toggle function seems to be skipping alternate items

State of an array has been modified

Approach to activate Required Field Validation while navigating through DatePicker form control

What could be the reason behind the for loop not running within a typescript function?

Retrieve the date information from the <td> element, if it exists

Enhance the Header component by incorporating a logout button that seamlessly navigates with the NextJS App

What tool can be used for formatting and syntax highlighting when working with ejs (embedded javascript) templates?

I'm having trouble with my script only fetching the first row of my PHP table. Can someone please take a look at my code

Modify picture properties when listbox is altered using jQuery

Why can't Angular iterate through objects using ngFor in Typescript?

Persistent NW.js Local Storage Cache Remains Present even After Deleting Application

Unable to install Angular to the most recent version

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

Receiving error messages about missing images in my React project

Leverage the power of require() beyond the confines of Node

When working with the Sequelize-Typescript One To Many Association and Repository, a situation may arise where the query returns only one child entity even though there are multiple

The requested file cannot be accessed using XMLHttpRequest.open url

vue.js watch function failing to update