Create celestial bodies based on the model variable

I am currently working on a rating star feature that dynamically displays stars based on information retrieved from the database.

Within my app.ts file, I have declared a variable like so:

this.rating = 4;

Here is an example of how the HTML looks:

 <div class="rating-star-group pull-right">
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star-outline"></i>
 </div>

Would it be appropriate to use ng-if to check the variable in order to display the class, or is there a more efficient method?

angulartypescript

Answer №1

If you're looking for a convenient solution, consider using the ng-bootstrap plugin. This plugin serves as an Angular 2 wrapper over bootstrap 4, similar to the functionality of ui-bootstrap.

ngb-rating from ng-bootstrap offers excellent implementation for all scenarios.

<ngb-rating [(rate)]="currentRate"></ngb-rating>

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

Master the art of iterating through an Object in TypeScript

I need help with looping through an Object in TypeScript. While the following examples work in JavaScript, I understand why they pose a problem in TypeScript. Unfortunately, I am struggling to find the correct approach to solve this issue. Am I approaching ...

typescript

Is there a way to access the Angular directive instance from the console?

ng.probe($0).componentInstance allows you to access the reference to the instance. Can we retrieve the directive instance from the console in any way? ...

angulardirective

Having difficulty forming queries correctly using TypeScript, React, and GraphQL

Apologies for the potentially naive question, but I am new to working with GraphQL and React. I am attempting to create a component that contains a GraphQL query and incoming props. The props consist of a query that should be passed into the GraphQL query. ...

reactjstypescriptnext.jsapolloreact-apollo

Error encountered in Angular10: XHR request for POST failed due to browser blocking HTTP Request to a domain with a similar name

I am encountering an issue with my webpage that consists of a Django REST API and an Angular 10 Frontend SPA. Normally, I can successfully send GET, POST, PUT, and DELETE XHR Requests to my backend without any problems. However, there is a specific API End ...

javascriptangularajaxhttpxmlhttprequest

Is the @Output decorator in Angular limited to working only with click events?

Could someone help me understand why I am unable to pass data from the child component to the parent component with a variable value? It seems that changes made in the child component are not reflecting in the parent component. Is it possible that the @Out ...

angulartypescriptfrontendcomponentsangular-decorator

Unit testing in Node.js using Postgres and pg library for Javascript

Currently, I am utilizing the PG library to establish a connection to a Postgres database. Now, my objective is to create unit tests for database access, but I am unsure of how to proceed. Ideally, I would require some form of mock Postgres server or a si ...

javascriptnode.jspostgresqltypescriptmocha.js

Securing JWT signatures for both server-side and client-side environments

I am looking to authenticate Salesforce's OAuth 2.0 JWT Bearer Flow using both node.js and a Browser. I have generated a public key and a private key on Windows by running the following command. openssl req -x509 -sha256 -nodes -days 36500 -newkey r ...

javascriptnode.jstypescriptjwtjose

Test Transmission Service

Hey there, I'm currently working on writing Angular code for a component that involves an observable. However, I'm facing some issues testing the broadcast service as I keep getting an error indicating that the service is not being called. Does a ...

angularunit-testingtestingangular7azure-ad-msal

How can I detect when the Redux state object in my Angular (v5) application changes?

Can someone please explain to me the process of creating a listener, like subscribing to the AppState changing? Here is the basic service I currently have. In my view, there is a dispatch action that increments the counter. After the counter changes valu ...

angularreduxangular5angular-reduxng2-redux

Is it possible to obtain Literal types for object keys dynamically in typescript?

I am looking to extract the type of object keys. Below is a generic function for objects with keys as strings: type GenericInput = { [key:string]: {value:string,type:HTMLInputTypeAttribute,placeholder:string,min?:number,max?:number,required?:boolean, err ...

typescriptgenericstypestype-conversionstrong-typing

Angular fixes corrupted Excel files

My current project involves using Angular to call an API and retrieve a byte[] of an Excel file. However, I am facing issues with the file becoming corrupted when I convert the byte[] to a file using blob. Can anyone offer assistance with this problem? M ...

arraysangulartypescriptblobexport-to-excel

Using various types in TypeScript to represent a variety of events

If I have these three distinct objects: { id: 1, time: 1000, type: 'A', data: { a: 'one' } } { id: 2, time: 1001, type: 'B', data: { b: 123 } } { id: 3, time: 1002, type: 'C', data: { c: 'thre ...

typescript

Assigning objects in Angular's subscribe method is a common practice

I came across a tutorial on this website that I am trying to follow, but I decided to make some changes to the heroes.component.ts class by using 'card' instead of 'hero'. However, when I try to use .subscribe(), an error pops up: ER ...

angular

Modifying audio output in a React element

I am trying to incorporate background music into my React app using TypeScript. However, I am encountering an issue where changing the music in the parent component does not affect the sound playing in the child node. import React from 'react'; ...

reactjstypescripthtml5-audio

Attempting to execute a synchronous delete operation in Angular 6 upon the browser closing event, specifically the beforeunload or unload event

Is there a way to update a flag in the database using a service call (Delete method) when the user closes the browser? I have tried detecting browser close actions using the onbeforeunload and onunload events, but asynchronous calls do not consistently wor ...

javascriptangulartypescriptsynchronousbrowser-close

Content Misaligned in Angular Material Button

Within this Angular component, I am attempting to utilize a mat-button to showcase various categories for the search filter. However, upon expanding the options, they do not appear below the mat-button as intended; instead, they are displayed on the left s ...

htmlcssangularangular-materialangular-components

What is the best way to add a hyperlink to a cell in an Angular Grid column

I need help creating a link for a column cell in my angular grid with a dynamic job id, like /jobs/3/job-maintenance/general. In this case, 3 is the job id. I have element.jobId available. How can I achieve this? Here is the code for the existing column: ...

javascriptangulartypescripthyperlinkangular-ui-router

Error alert: Ionic detected a SyntaxError due to a missing closing parenthesis on the emulator

When using Ionic, I encountered an error Uncaught SyntaxError: missing ) after argument list on the emulator, but everything runs smoothly with the serve command: Fetch(what, callbackf) { return this.woo.getAsync(what).then( (result)=> { th ...

cordovaangulartypescriptionic-frameworkionic2

Using Directives inside a Standalone Component in Angular: A Step-by-Step Guide

As I work on integrating a directive that is not standalone into a Standalone component, I encountered an error. The specific error message can be viewed here. Even after including the directive in the component's import array as shown here, the issu ...

angularangular14

Adjust the property to be optional or required depending on the condition using a generic type

const controlConfig = >T extends 'input' | 'button'(config: Config<T>): Config<T> => config; interface Config<TYPE extends 'input' | 'button'> { type: TYPE; label: string; ...

javascripttypescript