Import styles from api in Angular

Question

I want to get styles from API and render the component based on that styles.

import { Component } from '@angular/core';
import { StyleService } from "./style.service";
import { Style } from "./models/style";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [``]
})

export class AppComponent {
  header: boolean;
  footer: boolean;
  style: string;
  constructor(private styleService: StyleService) {}

  ngOnInit() {
    this.logStyles()
  }

  logStyles() {
    this.styleService.getStyles({
      business: 'sekeh'
    })
    .subscribe(
      (val) => {
        this.header = val.header,
        this.footer = val.footer,
        this.style = val.style
      },
      response => {
        console.log("POST call in error", response);
      },
      () => {
        console.log("The POST observable is now completed.");
      });
    }
  }

I have two questions. do i have access to style property in AppComponent class? so i can push new styles to the array. or can i save the api styles in a variable and set styles property to that variable?

Bhagwat Tupe · Accepted Answer · 2019-05-09 09:26:50Z

2

You can use NgStyle it updates styles for the containing HTML element. Sets one or more style properties, specified as colon-separated key-value pairs

[ngStyle]="customCssProperties"

Here you can pass the properties like

customCssProperties = {
        "padding-top": "5px",
        "margin-left": "5px",
        "color": "red"
      }

edited May 9, 2019 at 9:26

answered May 4, 2019 at 8:41

Bhagwat Tupe

1,9631 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IdiakosE Sunday · Accepted Answer · 2019-05-04 07:58:36Z

0

You can use [style]="dynamicStyles" which must be Sanitized. That way u can dynamically set styles. More here https://angular.io/api/platform-browser/DomSanitizer

answered May 4, 2019 at 7:58

IdiakosE Sunday

1161 silver badge9 bronze badges

Collectives™ on Stack Overflow

Import styles from api in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related