Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those 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.retrieveStyles()
  }

  retrieveStyles() {
    this.styleService.getStyles({
      business: 'sekeh'
    })
    .subscribe(
      (val) => {
        this.header = val.header,
        this.footer = val.footer,
        this.style = val.style
      },
      response => {
        console.log("Error in POST call", response);
      },
      () => {
        console.log("The POST observable has been completed.");
      });
    }
  }

I have a couple of questions. Do I have access to the style property in the AppComponent class so that I can add new styles to the array? Alternatively, can I store the API styles in a variable and then set the styles property to that variable?

Answer №1

Utilizing NgStyle allows for the modification of styles within the HTML element it is applied to. By setting one or more style properties using colon-separated key-value pairs.

[ngStyle]="customCssProperties"

By defining properties like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transfer text between Angular components

Here is the landing-HTML page that I have: <div class="container"> <div> <mat-radio-group class="selected-type" [(ngModel)]="selectedType" (change)="radioChange()"> <p class="question">Which movie report would you like ...

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

Avoiding multiple ajax requests due to multiple clicks

I have a blog on WordPress that has a jQuery code allowing users to click a bookmark link to save the post as a bookmark. Each post displays a total bookmark counter in this format: "Bookmarked (5)". The issue is that when a user clicks multiple times on t ...

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...

Guide on validating an email through a 6-digit code using Flutter, Node.js, and MongoDB

My goal is to create a registration process where users enter their email and password on a screen. After clicking "register", they should receive an email with a random 6-digit code for verification on the next page. I have everything set up, but I' ...

Issues with FormArrays containing nested FormGroups

In my reactive form, I am using a FormArray to store FormGroup elements. Despite researching and trying various approaches, I still cannot determine why it is not functioning correctly. I have combined two simplified examples based on documentation and on ...

tips for converting a single observable item into an observable list

Within my Angular project, there exists an observable object with the following structure: export interface FavoritesResponse { wallet: boolean; deposit: boolean; withdraw: boolean; transfer: boolean; exchange: boolean; ticket: boolean; accou ...

I am having trouble getting two similar Javascript codes to function simultaneously

Using a common JavaScript code, I am able to display a div when a certain value is selected. http://jsfiddle.net/FvMYz/ $(function() { $('#craft').change(function(){ $('.colors').hide(); $('#' + $(this ...

Ways to slow down page transition on NextJs

I'm currently working on securing my private pages using a HOC withAuth. While the protection is functioning correctly, I am looking to avoid users seeing a loading screen for a split second while the access token is being retrieved from local storage ...

Discover the process of loading one controller from another controller in Angular JS

Is it possible to load an entire controller1 from a different controller2, not just a function? ...

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

Extracting information from a designated website using Python, including pages with search functionality and javascript features

Visit the website where you will find a search input box in html. Input a company name into the search box, select the first suggestion from the drop-down menu (like "Anglo American plc"), navigate to the URL containing information about that specific com ...

Error 8007 encountered when attempting to scale at 100% proficiency. Transformation unsuccessful

Wondering if this could be a bug in Photoshop. When scaling a layer and entering values of 100%, an error message pops up: var srcDoc = app.activeDocument; var numOfLayers = srcDoc.layers.length; // main loop for (var i = numOfLayers -1; i >= 0 ; i-- ...

Tips for including the % symbol in the Y-axis labels on a HighChart graph

I am attempting to incorporate the % symbol after the value of 100 or -100 on the yAxis in the chart shown above. I made an attempt to add the % symbols as follows: quotes.data.frequency_counts[i].negative = Math.round(negative * -1)+'%'; quote ...

Discover the power of sorting outcomes in a Node.js-MongoDB query by utilizing a dynamic function call

Currently, I am working on a web application in Node.js that is connected to MongoDB using the Mongo native connector. In one of my JavaScript files, I have implemented a generic method to perform "find" or "findOne" operations to fetch data from a collec ...

Sending updated data from modal back to child component

Within my parent component, I have two child components: Child0 and Display. Child 0 consists of a single button that triggers the opening of a modal where users can select items from a list. The Display component, on the other hand, only contains a label ...

What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from ...

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

Utilizing Vuex state within Vue-Router route definitions

My Vuex store setup in main.js looks like this: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //initialize the store const store = new Vuex.Store({ state: { globalError: '', user: { ...

The Power of ReactJS Spread Syntax

Currently working with React. In the state, I have an array of objects. this.state = { team: [{ name:'Bob', number:23 }, { name:'Jim', number:43 }] } My issue arises when attempting to create a copy of the arr ...