What is the best way to incorporate the active class in the initial div utilizing *ngFor within Angular 7?

I've got a series of carousel-item divs being repeated using *ngFor. Now, I'm trying to figure out how to dynamically add the active class to just the first div (carousel-item). Any suggestions on how to achieve this in Angular 7?

component.html

 <div class="carousel-item" *ngFor="let testimonial of getTestimonial; let isFirst = first">
       <p [ngClass]="{'active': isFirst}">{{testimonial.description}}</p>
        <p class="font-weight-bold font-italic t-name">{{testimonial.name}} - {{testimonial.profession}}</p>
  </div>
angulartypescriptangular7

Answer №1

 <div class="carousel-content" *ngFor="let review of fetchReview; let topOne = first"  [class.active]="topOne">

Answer №2

<div class="carousel-item" *ngFor="let review of fetchReviews; let index = i;" [ngClass]="{'active': i == 0}">
   <p>{{review.content}}</p>
    <p class="font-weight-bold font-italic author">{{review.author}} - {{review.role}}</p>

Give this a try.

Answer №3

Give this a shot:

<div class="carousel-item" [class.active]="i===0" *ngFor="let testimonial of getTestimonial; let i=index">
      // insert your content here ..
  </div>

Check out a functional StackBlitz demo.

Answer №4

To implement styling dynamically, you have the option to utilize ngClass in the following manner:

<div  class="carousel-item" 
      [ngClass]="{'active': isFirst }" 
      *ngFor = "let testimonial  of getTestimonial; let isFirst = first;">
        {{testimonial.title}}  {{testimonial.description}}
</div>

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

Using ngFor to display a default image

My latest project involved creating a table that displays various products along with their corresponding images. Everything was working smoothly until I encountered an issue. In instances where a product is created without an associated image, I decided ...

angulartypescript

Local variables are now being refreshed with every modification in the data stored in Cloud Firestore

Having trouble maintaining the accuracy of my local variables in sync with changes to the data in cloud firestore. Specifically, in my local variable called count_vehicle, the value represents a count based on specific conditions from the data in cloud fir ...

angulartypescriptfirebaserxjsgoogle-cloud-firestore

How can I extract just the initial 2 letters of a country name using AmCharts maps?

Having trouble with Amcharts maps. I have a map that displays countries as United States, but I only want them to show as US. Is there a country formatter available for this issue? Any help is appreciated. ...

javascripttypescriptmapsangular5amcharts

Using Angular: Linking an href tag with a JSON key

I am working with a JSON object that includes the following value: {test_link : www.test.com} My goal is to retrieve this value and use it as a link in an HTML <a> tag, like so: <a href={{test_link}}> test </a> However, I am encounter ...

htmlangular

Accessing the personal data fields of a MongoDB object

My current environment setup includes: NodeJS: 5.7.1 Mongo DB: 3.2.3 MongoDB (NodeJS Driver): 2.1.18 TypeScript: 1.8 I have defined an Object using Typescript as: class User { private _name:string; private _email:string; public get name():strin ...

node.jsmongodbtypescript

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet ...

javascriptjquerytypescriptdatatablesangular-datatables

Issues with the ionViewDidLoad() function?

Having some trouble implementing Email Authentication in my project. The method ionViewDidLoad is not being recognized. I also tried using the method ionViewWillLoad() but that didn't work either. Any ideas on what might be causing this issue? Here&a ...

angularemailauthenticationionic-frameworkionic3

Conceal components using routing in Angular2 release candidate 1

I have a request regarding certain elements that are to be displayed on all pages except the login page. I am considering using either ngIf or the hidden property of the elements to hide them when the user is on the login page. Here is what I have attempt ...

typescriptangularangular2-routingangular2-template

What is the process for importing the Scale type definition from the Scale module?

Recently, I've been utilizing the Tonal package within a Vite/Vue/Typescript project. My current task involves importing the type known as Scale from the Scale module. You can find the type definition here: export interface Scale extends ScaleType { ...

typescripttypestonal.js

Error message: The specified type is incomplete and lacks certain properties, according to Typescript

I'm encountering an error that's hindering the deployment of my website on Vercel. Any assistance would be greatly appreciated. Usually, I retrieve the pageInfo data from Sanity and use it on my website. The issue lies in this peculiar TS error t ...

reactjstypescriptnext.js

Mastering the usage of Higher Order Components (HOC) with both types of props is

I am facing a challenge in implementing HOCs for this specific scenario. I aim to enclose existing components since they share similar functionalities. Below is an abridged version of my current structure: function CreateComponentHere(props: BaseProps): J ...

reactjstypescriptreact-native

A guide on converting your current Angular app into a "fully strict" application – follow these steps!

I started developing an Angular Application back in Angular 4 and now it has been upgraded to Angular 12. However, during the initial development phase, the strict mode was not enabled. Now that the application is stable and live in production, I am lookin ...

angulartypescriptstrict

Exploring the method to retrieve data on the server side through Express when it is shared by the client within a put request

Here is the angular http put request I am working with: sendPutRequest(data) : Observable<any>{ return this.http.put("http://localhost:5050", data).pipe(map(this.handleData)); } After making this call, the server side method being invoked is ...

javascriptnode.jsangularexpress

Can you guide me on how to generate a personalized stamp within the Angular component using Grapecity GcPdfViewer?

When a Pdf is opened in the GcPdfViewer by the User, they are required to stamp the Pdf with an image located in the src/assets folder. However, the example provided on this webpage is not functioning correctly. Can anyone offer me a functioning example? ...

angularpdfstampgrapecity

Typescript: Delay code execution until a function has completed running

I've encountered an issue with my code that involves calling a function. Here is the snippet of code in question: this.getAllOptions(questionID); console.log("++++++++++++++++++++++++++++++++"); console.log(this.result); The task of this function is ...

typescript

Angular 6: showcasing details of selected dropdown items seamlessly on the current page

I am completely new to Angular and I am facing a challenge in displaying another component on the same page. The concept is to select an option from a dropdown menu and then receive detailed information about it below the dropdown on the very same page. No ...

angularangular6

What are the best strategies for managing npm dependencies alongside other packages?

I am working on an Angular app that has the following dependencies: "dependencies": { "personalUiLibrary": "1.0.0" }, "devDependencies": { "tailwindcss": "^2.2.7" } In the personalUiLibrary p ...

angularnpmnpm-install

Trouble with Angular not redirecting to external URLs using anchor tags

I'm having difficulty getting a basic link to function in Angular. When I place it in the app component without any other components, it works fine. However, when I move it inside a child component, it stops working. Clicking on the link does nothing ...

angular

Imitate a targeted ngxs store selection using ngxs

Within this component, there are two ngxs selectors being utilized: @Component({ selector: 'some-component', templateUrl: './some-component.html', styleUrls: ['./some-component.scss'], changeDetection: ChangeDetectionS ...

angularjestjsngxs

Sending chosen selection in a scrollable dropdown menu in Angular

Here is the HTML code that I'm working with: <div class="container"> <div> <h1 class="table-title">Employees</h1> <table class="table"> <thead class="thead-dark"& ...

htmlangulartypescript