Tips on inserting a variable into an icon class in Angular 7

I am looking to add a unique icon to each item on my page, which is being generated inside of an *ngfor loop. For example:

<i class="var"></i>

Instead of 'var', I want to dynamically insert a variable provided by my service class in order to display different icons for each item.

Answer №1

To specify a class, you can use either class="{{ your_variable }}" or [class]="your_variable". Another option is to utilize ngClass

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

Ways to transfer selected options from a dropdown menu to a higher-level component

I am currently in the process of configuring a modal component that showcases various data from a specific record to the user. The user is provided with a Bulma dropdown component for each field, enabling them to make changes as needed. To streamline the c ...

Leveraging Multiple @Input Decorators in Ionic 3 and Angular 2

Within my Ionic 3 project, I have developed a custom component called my-component. Utilizing the angular @Input functionality, data can be passed to this component with ease. In this case, I have two inputs defined as: @Input('finder') myFinder ...

unable to select date on mat-calendar

I'm trying to add special dates to a mat-calendar by highlighting them. Here's the code I have so far: app.component.ts: datesToHighlight = ["2019-06-22T18:30:00.000Z", "2019-06-06T18:30:00.000Z", "2019-06-24T18:30:00.000 ...

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

Having trouble with Angular2 testing? It seems like you may be missing the 'angularCli.config' entry in your Karma configuration

When I attempt to run 'npm test' in my Angular2 project, I encounter the following error: "Missing 'angularCli.config' entry in Karma config" Does anyone have any insights on how to resolve this? ...

The "ngx-places" directive does not have an "exportAs" setting

I recently added the ngx-google-places-autocomplete module to my project. However, upon configuring it, I encountered the following error: core.js:14597 ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "expo ...

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

I have been working on implementing the search bar feature from the provided link. Despite my efforts to match the types correctly, I keep encountering a TypeScript error. Homepage.tsx const [searchQuery, setSearchQuery] = useState(query || '' ...

Keeping the user logged in even after closing the app in an Ionic/Angular project: Best practices to retain user sessions

As a newcomer to angular/ionic, I have been given a project where the user needs to remain logged in even after closing the application unless they explicitly log out. Can anyone provide suggestions on how to modify the code below? login.page.ts import { ...

Building a Model Class with redux-orm and TypeScriptCreating a new Model Class with

I've been successfully using redux-orm with JavaScript, however, I'm facing issues when trying to convert my code to TypeScript. Even though I have already implemented the render() method in my Folder Model Class, the TypeScript transpiler is sh ...

Unexpected directory structure for internal npm module

Here is the package.json I use for building and pushing to an internal package registry: { "name": "@internal/my-project", "version": "0.0.0", "description": "Test package", "type&quo ...

Exploring the capabilities of zooming on SVG elements using D3 within an Angular

I want to implement pan/zoom functionality on an SVG element. I came across a tutorial that suggested using d3.js for this purpose, you can find it here Below is the code I have tried: import { Component,AfterViewInit,OnInit } from '@angular/core&a ...

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Being a novice to Typescript, JavaScript, and VScode Extensions I have set up a vscode-test following the guidelines provided here: https://code.visualstudio.com/api/working-with-extensions/testing-extension#custom-setup-with-vscodetest Based on the hel ...

Error: In Typescript, it is not possible to assign the type 'false' to type 'true'

Currently, I am exploring Angular 2 and encountered a situation where I set the variable isLoading to true initially, and then switch it to false after fetching required data. However, upon executing this process, I encountered the following error message: ...

Warning: The gulp_jspm module is now deprecated and will be removed

Whenever I run gulp_jspm, a DeprecationWarning pops up. Is there an alternative method to generate my bundle files without encountering this warning? It seems like when I used gulp-jspm-build, I had to include some node files that were not necessary before ...

Demystifying the Mechanics of RxJS Subscriptions during an HTTP Request

export class VendorHttpService { result = '0'; constructor(private http: HttpClient, private global: GlobalService) { } getProfileStatus(uid: String): string { this.http.get(this.global.getUrl()+"/vendor/profile-status/"+uid) ...

Are you looking to resolve TypeScript warnings related to imports managed by Webpack loaders?

Setting up a new project with Svelte, Webpack, and TypeScript based on this template. Ran the scripts/setupTypeScript.js script to switch to TypeScript after initial setup. Encountering errors in VSCode and TypeScript when importing non-TypeScript files: ...

Encountering an issue with installing an angular 2 directive, getting a error message "Cannot read property '0' of

I am attempting to install this using the command prompt like so: PS C:\Users\moshel\Workspaces\Aman.Magar.Maply\WebUI> npm install @ngui/auto-complete --save However, I am receiving the following outcome: npm WARN @angular/[ ...

Converting JSON data into an Angular object

I'm struggling to map the JSON data below to an Angular 7 object: [ { "id": "123456", "general": { "number": "123", "name": "my name 1", "description": "My description with <li> html tags ...

`ng build`: transferring scripts to a subdirectory

When running the command ng build, it exports files to the dist folder like this: index.html main.bundle.js styles.bundle.js ... I would like the scripts to be in a subfolder: *index.html scripts/main.bundle.js scripts/styles.bundle.js ...* ...