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.

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

Einar  Hintz

Einar Hintz

1602560783

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

  • Form design for insert and update operation.
  • Display forms in modal popup dialog.
  • Form post using jQuery Ajax.
  • Implement MVC CRUD operations with jQuery Ajax.
  • Loading spinner in .NET Core MVC.
  • Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Image showing how to create ASP.NET Core Web API project in Visual Studio.

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Showing project template selection for .NET Core MVC.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Showing list of NuGet Packages for Entity Framework Core

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define  DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup