I am using ngFor to create a table from two arrays in Angular typescript.
<tr *ngFor="let e of lis1; let k=index">
<td>{{e}} </td>
<td>{{lis2[k]}}</td>
</tr>
The resulting table looks like this:
Name Age
a 15
b 20
c 25
How can I change the row color for entries with an age greater than 20?
I have arrays lis1 (names: a, b, c) and lis2 (ages: 15, 20, 25).
If you want to apply styles conditionally to your element, there are several methods you can use such as ngStyle, ngClass, or directly with attributes.
Let me demonstrate how to add styles using the ngClass directive. You can check if the age is greater than 20 within the [ngClass] binding to decide whether to apply a specific class.
<tr *ngFor="let e of lis1; let k=index" [ngClass]="{'background-red': lis2[k] > 20}">
<td>{{e}} </td>
<td>{{lis2[k]}}</td>
</tr>
In your component's CSS file, simply define the style for the added class:
.background-red{
background-color: red;
}
I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...
I have set up my AppComponent to subscribe to the ngrx store in its constructor: export class AppComponent { submenuItems: Observable<Array<INavigationBarItem>>; constructor(private store: Store<AppState>) { this.submenu ...
After carefully crafting a rounded box/button and slicing its first corner, the middle bar (which repeats horizontally to adjust the width of the button text/content), and the last corner, I utilized the following markup: <div id="left-corner"></ ...
Having some issues with my JavaScript code. I'm trying to achieve a specific functionality where clicking the "Modify HTML content" button changes the h1 heading from "The Original Content" to "The New Content", and vice versa on subsequent clicks. Si ...
I am currently working on making a webpage responsive. I have successfully created a logo div that resizes accordingly. Now, I am facing a challenge with centering the buttons in the menu list. Despite my efforts, the buttons are not aligning in the center ...
Recently, I started working with promises for the first time. I have a function that returns a promise: public DatesGenerator(futercampaign: ICampaign, searchparam: any, i: number): ng.IPromise<any> { return this.$q((resolve, reject) => { ...
I am facing an issue with a BehaviorSubject where the first .subscribe callback is returning an Array with 6 Objects. Strangely, in console output, it shows length: 6, but every for-loop I iterate through the array only runs 5 times and even when I log arr ...
As I work on developing the webview, I encountered a specific issue: I am unable to achieve fullscreen for an element or video. Visit Here for more information Various solutions have been attempted: Learn more here Embedded YouTube videos in Html/ ...
I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (<i class="fas fa-search"></i>), but I am unsure how to replace the form submission button with this symbol in order to sub ...
Let me set the stage for you: We're dealing with a bank website here. So, whenever a user wants to click on an external link (could be to a Facebook page or a partner website), we need to have a notification box pop up saying "You are about to lea ...
I'm facing an issue with a component that includes another component (from headlessui/react) defined like this: export default function MyComponent(props) { const [selectedState, setState] = useState(''); return ( <div> & ...
I am currently working on a module for a responsive website that involves tapping the initial screen to reveal a panel from the right. The user can then tap a close button to hide the panel. However, there is an issue where if the user taps multiple times ...
I've implemented three drop-down menus using Bootstrap on my website. https://i.sstatic.net/M7sTF.png I want the selected menu item to update the content of that specific drop-down menu when clicked by a user. https://i.sstatic.net/sjHus.png However ...
When interacting with an HTML color input element, a color picker window pops up that prevents viewing the DOM. I am looking for a solution to either select a color and close the window or enter a hex code in the popup's text box. Can anyone provide m ...
Situation : I am working on a basic php form for calculations and pricing. I have set up the add, edit, and delete functions using a switch statement. Within my session, data is stored using $_POST. Issue with Edit Function : if (isset($_POST[&apo ...
Currently, I am in the process of working with a cdk script and I have the need to specify multiple principals like so: "Principal": { "AWS": [ "arn:aws:iam::AWS-account-ID:user/user-name-1", "arn:aws:iam::AWS- ...
I am looking to include two buttons for zooming in and zooming out. How can I achieve this? I attempted to use the following code, but it did not work for me. var controls = new THREE.OrbitControls(camera, renderer.domElement); function zoomModel(isZoo ...
I'm currently facing an issue and would appreciate some assistance. My objective is to display only the map of Cameroon while hiding the other maps. I am utilizing Leaflet in conjunction with Next.js to showcase the map. I came across a helpful page R ...
I'm attempting to display an object within an HTML modal. Since the structure is unknown beforehand, and child properties can also be objects or arrays, I thought a simple recursive function might be the solution, but I am uncertain. Here's what ...
When working with html5 popstate, I have two specific goals in mind. Instead of relying on plugins, I am utilizing these two methods: Push State: function contentLoaded(...) { ... window.history.pushState({ pageUrl: url }, url, url); ... } Po ...