dynamic padding style based on number of elements in array

Is there a way to set a padding-top of 10px only if the length of model.leaseTransactionDto.wagLeaseLandlordDto is greater than 1?

Can someone provide the correct syntax for conditionally setting padding based on the length? Thank you.

#sample code

<div *ngFor="let landlord of model.leaseTransactionDto.wagLeaseLandlordDto; let i = index"
     [style.padding-top.px]="model.leaseTransactionDto.wagLeaseLandlordDto.length > 1 ? 10 : 0"
     style="font-size: 12px;text-overflow: ellipsis;overflow-x: hidden;">
    <div class="primary-color" matTooltip="{{landlord.landLordEmail}}"
         style="text-overflow: ellipsis; overflow-x: hidden;"
         *ngIf="landlord.landLordEmail">{{landlord.landLordEmail}}</div>
</div>
angulartypescript

Answer №1

You have the option to conditionally set the ngStyle based on the length of 

model.leaseTransactionDto.wagLeaseLandlordDto
:

<div class="primary-color" 
    [ngStyle]=" {'padding-top': 
    model.leaseTransactionDto.wagLeaseLandlordDto.length > 1 ? '10px' : ''}
    
    matTooltip="{{landlord.landLordEmail}}" *ngIf="landlord.landLordEmail">
    {{landlord.landLordEmail}}
</div>

Answer №2

Applying ngstyle property based on a condition

<div *ngFor="let landlord of model.leaseTransactionDto.wagLeaseLandlordDto; let i = index" [style.padding-top]="model.leaseTransactionDto.wagLeaseLandlordDto.length > 1 ? '10px' : '0px'">
     <div class="primary-color" style="text-overflow: ellipsis;overflow-x: hidden;font-size: 12px;" matTooltip="{{landlord.landLordEmail}}" *ngIf="landlord.landLordEmail">{{landlord.landLordEmail}}</div>
</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

How can the count of specific values matching total records be determined in Angular/TypeScript using JSON?

In the dataset provided below, how can we determine the count of applicable impacts, non-applicable impacts, and FYI impacts for nested records under the assigned_to key instead of the parent record? The expected results should be: For 1st Record Appl ...

jsonangularfiltercountrest

Ways to determine cleanliness or filthiness in an Angular 5 modal form?

I have a form within a modal and I only want to submit the form if there are any changes made to the form fields. Here is a snippet of my form: HTML <form [formGroup]="productForm" *ngIf="productForm" (ngSubmit)="submitUpdatedRecord(productForm.value) ...

javascriptjqueryangularangular6angular5

Is there a way to show text as symbols in Primeng components?

Check out this helpful example that demonstrates what I am attempting to achieve. I have implemented p-menu from primeng. Is there a method to convert text into symbols like &trade to ™ and &#8482 to ®? ...

javascripthtmlangulartypescriptprimeng

The 'ngModel' property cannot be bound to the 'input' element as it is not recognized. Error code: ngtsc(-998002)

When attempting to add [(ngModel)]="email" to my Angular app, I encountered the error message "can't bind to 'ngModel' since it isn't a known property of 'input'". Despite already including import { FormsModule } fro ...

angular

Issue with redirecting users back to the login page after accepting Keycloak required actions due to browser specific terms and conditions

My Keycloak version is 9.0 and my app's front end is built using Angular 8. I have enabled Terms and Conditions while setting the defaults to true. I have customized the t&c page as desired, and it appears when users enter their credentials. Acc ...

angularkeycloakopenid-connectidentity-management

The defaultValue of the Observable TextArea is blank space following the transmission of a sendMessage using SignalR in a Typescript

i am currently in the process of modifying a basic SignalR Chat feature. Here is the situation: when a user sends a message, the message gets sent successfully. However, the textarea from which it was sent remains filled with empty space (aside from the p ...

angulartypescriptsignalrobservable

Extract the values from HTTP GET request by Id (Observable) and assign them to variables within the component

Hello everyone, it's been a while since I posted on here. Thank you all for your help so far, but I'm facing some difficulties with my Angular+2 web app. I have a User component and a user.service.ts that handles HTTP requests to get user data in ...

typescriptangular6observableangular-servicesrxjs6

Spring-boot does not support the content type 'application/form-data', resulting in an HttpMediaTypeNotSupportedException

Once I had set up the configuration files application.yml, application-dev.yml, application-prod.yml in Jhipster: spring: application: name: xxx http: multipart: enabled: true max-file-size: 200MB ...

angularspring-bootfile-uploadjhipster

Derive a data type from a parameter passed to a function defined within an interface

I am working with a function defined in an interface as shown below: interface UseAutocompleteReturnValue { ... getRootProps: (externalProps?: any) => React.HTMLAttributes<HTMLDivElement>; } Within my interface, I aim to create a prop named rootP ...

typescript

Passing a function as a prop in a child component and invoking it in React using TypeScript

I have a function that I need to pass to a child component in order to manage the state in the parent component. The function takes an object declared in FriendListItem and adds it to an array as a new object. Despite my research efforts, I am struggling t ...

reactjstypescript

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11

How can I create a universal "Add" button in Angular that can be used across all child components?

Currently, I am working on a straightforward application featuring a toolbar at the top of the screen. Within this toolbar, there is a + button designated for adding content. The functionality of this + button changes based on which component is currently ...

angular

Error: No routes found for 'documents' in Angular 2 RC5

I'm currently in the process of upgrading my application to RC5 and have encountered some challenges. Within my app.routing.ts file, I've included the following: import { Routes, RouterModule } from '@angular/router'; export const ap ...

angular

Exploring nullish coalescing with undefined values

My function is set up to make API calls: interface getEventsPropsShape { eventId?: string; accountId?: string; eventsStartAfter?: string; } const getEvents = async ({ eventId, accountId, eventsStartAfter, }: getEventsPropsSha ...

typescript

Runtime not able to identify new modifications post migration from Angular 2 to Angular 6

I successfully upgraded my Angular 2 project with DotNetCore to Angular 6 by executing the following command: npm install -g npm-check-updates ncu -u After completing the migration process, I found that while I can still run my previously developed proje ...

angularnpmasp.net-coremigrationangular6

What is the best way to filter out specific data fields from console.log in JavaScript?

When working with Java, I often use lombok to exclude certain fields from being printed. For instance, the @ToString.Exclude annotation can be used to prevent printing the user token. import lombok.ToString; public class TokenResponse { @ToString.Excl ...

javascriptnode.jstypescript

Why are mustaches not functioning as expected in Vue SFC defined by Vite?

I recently ran into a configuration issue with my vite-config.ts file. export default defineConfig({ ... define: { __PRODUCT__: JSON.stringify("My Product") } In my vue sfc template, I have the following code snippet: <div class="footer"> {{ ...

typescriptvue.jsvite

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

When attempting to compare a "Date" type of data with an "Any" type of data, the comparison is not functioning as expected. The date is retrieved in the following code: var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); v ...

javascripttypescript

Angular2 app fails to update after emitting an event

I need help with a child component responsible for updating phone numbers on a webpage. The goal is for the application to automatically display the changed phone number once the user hits the 'save' button. Here's a visual of how the appli ...

angulartypescript

Loading custom components dynamically in Angular with SVG: a how-to guide

Looking for a way to dynamically load SVG items with ease. The items needed are quite simple. Here's a basic template: <svg:rect [attr.x]="x" [attr.y]="y" width="10" height="10" /> Component Class Example: export class DraggableSvgItemCompon ...

angulartypescriptsvg