Debbie Clay

Debbie Clay

1551083922

How to deal with a modal shown in a guard

I have a guard implemented like this:

@Injectable()
export class CustomerGuard implements CanActivate {

constructor(

private authService: AuthenticationService,

private dialog: MatDialog

) { }


canActivate(

next: ActivatedRouteSnapshot,

state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {


if (this.authService.isCustomer) {
  return true;
}
const dialog = this.dialog.open(SigninModalComponent, {
  data: {
    errorMessage: this.authService.isLoggedIn ?
      'You don\t have access to this page, please use an appropriate account' :
      'Please authenticate to access this page'
  }
});

return dialog.afterClosed().pipe(
  map(() =&gt; {
    return this.authService.isCustomer;
  })
);



}

}

When I type an unauthorized route in my browser’s address bar, the server-side rendering shows an inert modal, then when the client-side takes over, another working modal is shown where I can successfully authenticate and access the requested route.

The problem is that the server-side rendered modal never disappears…

Is there a clean solution to this problem that wouldn’t imply not to show the modal on server side?

#angular #typescript

What is GEEK

Buddha Community

Lyly Sara

1551146454

I would use DI to help you with this one. I utilized the Angular Universal sample from their website to create an example.

First create a token: app/tokens.ts

import { InjectionToken } from '@angular/core';

export let RENDERED_BY_TOKEN = new InjectionToken('renderedBy');

Update the app.module.ts to use this token to provide a value through the DI container:

import { RENDERED_BY_TOKEN } from './tokens';
@NgModule({
.
.
.
providers: [
  .,
  .,
  { provide: RENDERED_BY_TOKEN, useValue: 'client' }
],
.
.
.
export class AppModule { }

Update the app.server.module.ts to use this token to provide a value through the DI container:

import { RENDERED_BY_TOKEN } from './tokens';
@NgModule({
.
.
.
providers: [
  .,
  .,
  { provide: RENDERED_BY_TOKEN, useValue: 'server' }
],
.
.
.
export class AppServerModule { }

Then elsewhere in your code(I used a component, but you would put this in your route guard), inject the value utilizing that token:

app.component.ts

import { Component, Inject } from '@angular/core';
import { RENDERED_BY_TOKEN } from './tokens';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
  renderedBy;

  constructor(@Inject(RENDERED_BY_TOKEN) val: string) {
    this.renderedBy = val;
  }
}

app.component.html

<h1>{{title}}</h1>
<h5>{{renderedBy}}</h5>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

If you run this, you will see the h5 element update from ‘server’ to ‘client’ showing that its working. You could utilize this value in your guard in an if statement to not show that dialog on the server render.

UPDATE

In going through this write-up, I noticed an easier way. It seems as though Angular itself provides you this information without the need for a custom token.

In the Guard you can update it with the following:

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  const isServer = !isPlatformBrowser(platformId);
}

UPDATE2

Given the clarification to the question, the only way I’ve been able to accomplish this seems a little less than ideal, but is the only thing I’ve found to work thus far.

document.querySelectorAll('.cdk-overlay-container').forEach(dialog => dialog.remove());

For reference, all of my work for this answer is in a GitHub repo.

Raja Tamil

Raja Tamil

1661169600

Make Pop-Up Modal Window In Vanilla JavaScript [2022]

Make Pop-Up Modal Window In Vanilla JavaScript


Learn how to create a simple responsive pop-up modal window using Vanilla JavaScript along with HTML and CSS with a bit of Flexbox.

Create A Button That Opens Pop Up Modal Window

Declare a <button> HTML element with an id open-modal.

<button id="open-modal">Open Modal Window</button>

The goal is when a user presses this button, the pop-up modal window will open.

Style the button using CSS Flexbox and centre it on the screen.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

button:hover {
    background: rgba(0, 0, 0, 0.7);
}

Create Pop-Up Modal Overlay

Normally, pop-up modal windows have overlays with a transparent darker background that covers the entire browser screen.

Define a div with an id model-overlay which will cover the entire screen.

<div id="modal-overlay">
<div>

Then, make it to full screen using height:100vh CSS property.

Bring it in front of the button by using position:absolute with a transparent background colour.

#modal-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}

I just added the border to see the boundaries of the modal-overlay element.

Center Pop-Up Modal Window To The Modal Overlay

Create a div with an id modal inside the modal-overlay element, which will be an actually pop-up modal window that user interacts with.

<div id="modal-overlay">
  <div id="modal">
  </div>
<div>

Add CSS style to make it visible on the screen.

Adding width:100% and max-width:650px will make sure the width of the pop-up modal window won’t exceed when the browser width is more than 650px.

If the browser width is less than 650px, the pop-up modal window will stretch the width to fill the screen which is normally for mobile viewports.

#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;
}

Centre the pop-up modal window to the screen using Flexbox.

To do that, just add the three lines of Flexbox code to the modal-overlay which are

  • display:flex → Convert an HTML element to Flexbox
  • align-items:center → centre the pop-up modal window vertically to the viewport
  • justify-content:center → centre the pop-up modal window horizontally to the viewport
#modal-overlay {
   ...
  
   display: flex;
   align-items: center;
   justify-content: center;
}

Open Up Pop-Up Modal Window On Button Click

Now we have the basic pop-up modal window designed using CSS.

Make it visible when a user presses the open modal button.

To do that,

First, hide the modal overlay by default by changing its display property from flex to none.

#modal-overlay {
   ...
  
   display: none; // Changed from flex to none
   align-items: center;
   justify-content: center;
}

Create a DOM reference to the open-modal button as well as the modal-overlay elements.

const openModalButton = document.getElementById("open-modal");
const modalWindowOverlay = document.getElementById("modal-overlay");

Attach a click event to the openModalButton with the callback arrow function showModalWindow.

const showModalWindow = () => {
    modalWindowOverlay.style.display = 'flex';
}

openModalButton.addEventListener("click", showModalWindow);

Set the display property of the modalWindowOverlay to flex inside showModalWindow() function which will open up the modal window.

As you can see, there is no way we can close/hide the pop-up modalwindow after its became visible on the screen.

Let’s fix it!

Close/Hide Pop-Up Modal Window On Button Click

Typically, there will be a close button on the top or bottom right side of the pop-up modal window.

Let’s add a close button on the bottom left side of the modal window.

Define header, content and footer HTML elements inside the pop-up modal window.

<div id="modal">

    <div class="modal-header">
        <h2>Modal Pop Up Window</h2>
    </div>

    <div class="modal-content">
        <p>Modal Content</p>
    </div>
    
    <div class="modal-footer">
        <button id="close-modal">Close</button>
        <button>Save</button>
    </div>

</div>

Generally, you’ll have two buttons on the footer of the pop-up modal window, which may be save and close.

Let’s push the buttons to the bottom using Flexbox.

Turn the display property of the pop-up modal window to flex and set the flex direction to column.

Continue Reading…

#JavaScript #programming #webdev #softauthor 

Bella Garvin

Bella Garvin

1625302026

Daily Deals App Development Company I Daily Deals Website Development

Orbit Edge is a daily deals app development company that has 10+ years of experience in daily deals app development services. Our robust, informative, and easy-to-use daily deals app delivers a best-in-class user experience.

#daily deals app development #daily deals app development services #daily deals website development #best daily deals apps #hire daily deals app developers

CodingNepal .

CodingNepal .

1617797839

Popup Share Modal UI Design using HTML CSS & JavaScript

#css share modal #modal dialog box #popup share modal #share modal #share modal in javascript

Bella Garvin

Bella Garvin

1621779092

Daily Deals App Development

Orbit Edge is a daily deals app development company that has 10+ years of experience in daily deals app development services. Our robust, informative, and easy-to-use daily deals app delivers a best-in-class user experience.

#daily deals app development #daily deals website development #daily deals app development services #hire daily deals app developers #best daily deals apps

Bella Garvin

Bella Garvin

1619790540

Top 5 Daily Deals App Development Companies 2021-22

http://blogs.rediff.com/bellagarvin/2021/04/30/top-5-daily-deals-app-development-companies-2021-22/

In case, if you are finding a new path in the field of daily deals app and searching for the most reliable daily deals app development companies then you are on the right path. Let me share the list of the top 5 daily deals app development companies that can develop customized apps and websites where online customers can easily browse through the coupons and promo codes to make a cost-effective deal.

#daily deals app development #daily deals mobile app development #daily deals app development services #daily deals app development company #best daily deals apps