CODEWITHSUNDEEP
angular
End
End

Reputation: 626

Dynamic stylesheets according to URL

I'm working on a services portal that allows clients to sign in and send mass SMS / Text messages, email and push messages. We run one instance of the front-end in production. Each client reaches the same portal through the same URL: http://www.messagingportal.com.

However each client prefixes the URL with their company name I.e: http://www.client1.messagingportal.com or http://www.client2.messagingportal.com.

Based on this prefix in the URL we serve different style sheets which contains a look and feel relevant to that clients brand. At the moment I do this with some vanilla JavaScript that is attached to the index.html in my angular application. Which is obviously a horrible way of doing it. See below code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GVI Portal</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
<script>
  if((location.hostname.toLowerCase().indexOf("client1")) > -1) {
    document.write("<link href=\"\\assets\\css\\skins\\client1.css\" rel=\"stylesheet\">");
  }
</script>
</html>

So if the client navigates to their URL http://www.client1.messagingportal.com the style sheet client1.css is appended to the DOM. It contains CSS that overrides the current style sheets. Colour, font, logos etc...

Is there a better way of doing this inside my application using Angular?

Upvotes: 1

Views: 45

Answers (2)

JeRivals
JeRivals

Reputation: 264

Maybe you can change your clients URL to use some standard pattern like http://www.messagingportal.com/client1

Then you define client as a dynamic parameter in your route definition, for example :

{ path: '/:client', component: ... }

in order to use this variable in your component and in your template with and ngSwitch for example

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>GVI Portal</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <app-root></app-root>
</body>
<script [ngSwitch]="client">
 <link href="\assets\css\skins\client1.css\" rel=\"stylesheet\" *ngSwitchCase="client == client1">;
</script>
</html>

Upvotes: 1

danday74
danday74

Reputation: 56946

This is essentially theming based on the client. The normal way to do this is to add a class to the html tag like so:

You would add this class using JavaScript based on the sub-domain. Then you just add ALL stylesheets and the styles in them look like this:

.logo {
  display:none;
}

.client1-theme .logo.client1 {
  display:block;
}

HTML:

<img src="...." class="logo client1"> 
<img src="...." class="logo client2">

Upvotes: 0

Related Questions