0

I have a really special issue. I am using AngularTS with C# on serverside and Typescript on clientside.

I want to add to our application the possibility, that the customer can add css styles in a textbox or add file locations (external).

In a custom component I want to add the html code from the official site of the customer. The customer should add the css files or text in order to show the content on our page like the content of the official site.

Unfortunately I could not find a possibility to add the css files. 

@Component({
selector: 'customer-footer',
templateUrl: './customer-footer.component.html'
styleUrls: getCSS()})




export function getCSS(): string [] {
var styles: string[] = [];

styles.push("https://");

return styles;}

This doesn't work because AOT is not compatible with static refs.

I tried to add the css Content in styles Tag (Body-Area):

    <style type="text/css">
      {{footerCSS}}</style>

My best result was to add a Object (css) in ngStyle to the displaying .

    <div *ngIf="!fixedBottom"
     [innerHtml]="footerHtml"
     [ngStyle]="footerCSS"></div>

Unfortunately I could not find a way to convert css code like this one:

.flatWeatherPlugin {
  font-size: inherit;
  width: 100%;
}

.flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul,  .flatWeatherPlugin li {
  padding: 0;
  margin: 0;
  color: inherit;
}

To a functional object. Has someone an idea or a helpful message?

S.Sire
  • 27
  • 1
  • 3
  • 9
  • You can statically include a `styles.custom.css` and overwrite the file. But this only works if the app is compiled *after* the styles are injected. If you want to do this at runtime, then it's simply not possible with AoT because of name mangling (unless you disable view encapsulation on all components). – Ingo Bürk Jul 31 '18 at 07:50
  • You better read about **Dynamic Components** in angular – Anuradha Gunasekara Jul 31 '18 at 07:53
  • You could try dynamically adding ` – David Jul 31 '18 at 07:54
  • I want to add the cusomter html and css code on app.component. Is it possibile to disable view encapsulation for the component customer-footer.component and app.component? Can I use then the property styleUrls with static style refs? – S.Sire Jul 31 '18 at 07:56

1 Answers1

0

In typescript you can use this to load css dynamically require('css/stylesheet.css')

Ali Riaz
  • 1
  • 1