To enhance user experience, you can store a string value in local storage when the user selects the "do not show again" checkbox.

Prior to displaying the modal, you should check local storage to see if that value has been saved.

Check out this example code snippet:

openModal() {
    if (localStorage.getItem('doNotShowAgain')) return;

    const modalRef = this.modal.open(ModalComponent);

    modalRef.afterClosed().subscribe(result => {
        if (result.doNotShow) { // Update this to reflect the checkbox
            localStorage.setItem('doNotShowAgain', '1')
        }
        console.log(`Modal result: ${result}`);
    });
}

All responses provided are accurate in terms of utilizing the localStorage feature. However, none of them offer a complete implementation for your specific example on stackblitz.

As previously mentioned in other responses, below is the correct API for setting and retrieving a value from local storage.

Retrieving value:

const firstVisit = localStorage.getItem('firstVisit');

Setting value:

localStorage.setItem('firstVisit', result);`

In relation to your inquiry about correctly fetching the checkbox value from the mat-dialog.

The mat-dialog-close directive takes an input to be returned as a "result" value once the afterClosed subscription is triggered. To utilize this, a potential solution is outlined below.

Assign a template reference to your checkbox within your dialog markup using #checkBox.

<mat-checkbox #checkBox class="example-margin">Do not show me again</mat-checkbox>

You can then utilize this template reference to pass the checked value to your mat-dialog-close directive like so:

[mat-dialog-close]="checkBox.checked"

<button mat-button [mat-dialog-close]="checkBox.checked">OK</button>

Remember to include the negation in your if statement; you only want to trigger the dialog if the local storage value is falsey.

 // only open dialog if falsey
    if (!firstVisit) {
      this.openDialog2();
    }

Please refer to the functional StackBlitz example provided below.

STACKBLITZ

https://stackblitz.com/edit/angular-vacnzu?file=src%2Fmodal-dialog%2Fmodal-dialog.component.html

Upon initialization, it is crucial to retrieve the boolean firstVisit from local storage and then verify if it is true. If true, display the dialog box.

Within your main component:

  ngOnInit(): void {
    const firstVisit = localStorage.getItem('firstVisit');
    if(firstVisit){
      this.openDialog();
    }  
  }

Additionally, remember to save the validation value when the user accepts by clicking on the dialog box.

 openDialog() {
    const dialogRef = this.dialog.open(ModalDialogComponent);
  
    dialogRef.afterClosed().subscribe(result => {
        localStorage.setItem('firstVisit', result);
        console.log(`Dialog result: ${result}`);
    });
  }

Essentially, data can be stored in local storage by using:

localStorage.setItem('variableName', value);

Retrieve data from local storage using:

localStorage.getItem('variableName');

To simplify the process, all you need to do is verify whether the user has checked the "do not show again" checkbox, regardless of their initial connection status.

How can you confirm if the user has previously checked the "do not show again" checkbox?

You can save the checkbox value in localStorage when the user clicks on the "Install" icon.

onInstall() {
   // Retrieve the checkbox value from the `ng-model` attribute.
   // For demonstration purposes, assume the user has selected the checkbox and set it to `true`.
   const checkboxValue = true; // Replace `true` with ng-model variable.
   localStorage.setItem('isdoNotShowAgainCheckBoxSelected', checkboxValue)
}

Subsequently, when the user returns to the application, you can check the localStorage value in the ngOnInit() lifecycle hook to determine whether to display or hide the dialog.

ngOnInit(): void {
    const isCheckBoxSelected = localStorage.getItem('isdoNotShowAgainCheckBoxSelected');
    if(!isCheckBoxSelected) {
      this.openDialog();
    }
}

Are you looking for guidance on accessing localStorage? If so, the syntax is quite simple:

To store a value in localStorage:

localStorage.setItem('show-dialog', 'no');

To retrieve a value from localStorage:

localStorage.getItem('show-dialog');

Keep in mind that localStorage values are stored as strings, so you may need to convert them to other data types like boolean. For example:

showDialog: boolean;

ngOnInit(): void {
  this.showDialog = localStorage.getItem('show-dialog') == 'no' ? false : true;
}

If the localStorage item is not present on initial load, the dialog will be shown. You can set the localStorage value to 'no' when the user interacts with a checkbox.

UPDATE: Here is a sample service that can help manage your subscriptions.

@Injectable({
  providedIn: 'root'
})
export class MyService {

  private showChangedSource: Subject<boolean> = new Subject<boolean>();
  showChanged$ = this.showChangedSource.asObservable();

  changeShowValue(show: boolean) {
    this.showChangedSource.next(show);
  }
  
}

In the component with the checkbox:

checkboxControl = new UntypedFormControl();

constructor(private service: MyService) { }

ngOnInit(): void {
  this.checkboxControl.valueChanges.subscribe(value => {
    this.service.changeShowValue(value);
  }
}

In another component where you want to react to checkbox changes:

constructor(private service: MyService) { }

ngOnInit(): void {
  this.service.showChanged$.subscribe(show => {
    // Add your logic to handle the checkbox value
    console.log('show value: ', show);
  }
}