ion-list with borders of different colors for each ion-avatar

I have a list of ion items, each displaying a round ion-avatar image with a colored border. Currently, I can only set one fixed color for all items. However, I would like each item to have a different color based on the value of listItem.color.

Here is the code for setting a fixed color:

CSS:

.item-md ion-avatar img {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
overflow: hidden !important;

border: 2px solid #fce515 !important;
}

html:

<ion-list class="wrapping-list">
    <ion-item no-lines *ngFor="let listItem of list; let i = index"  (click)="seeListItem(i)" (long-press)="longPressListItem(i)" (swipe-left)="swipeLeftItem(i)">
        <ion-avatar item-left>
            <img width="73px" height="43px" src="{{listItem.thumbnail}}" />
        </ion-avatar>
        <h2 class="title-text" >{{ listItem.name }} </h2>
    </ion-item>
</ion-list>

I am looking for a way to dynamically set the border color according to the value in listItem.color.

htmlcssangulartypescriptionic2

Answer №1

If you want to add borders using the [style.border] attribute binding, you can achieve that easily. Check out this plunker for an example.

@Component({...})
export class HomePage {

  public items: Array<{ name: string, imageUrl: string, color: string }>;

    constructor() {
      this.items = [
        { name: 'Woody', imageUrl: '...', color: '#dff0d8' },
        { name: 'Buzz Lightyear', imageUrl: '...', color: '#d9edf7' },
        { name: 'Jessie', imageUrl: '...', color: '#fcf8e3' }
      ];
    }
}

In your view, you can use the following code:

 <ion-list>
      <ion-item *ngFor="let item of items">
        <ion-avatar item-left>
          <img [style.border]="'5px solid' + item.color" [src]="item.imageUrl">
        </ion-avatar>
        <h2>{{ item.name }}</h2>
        <p>Lorem ipsum lorem ipsum...</p>
      </ion-item>
    </ion-list>

Keep in mind that in the code snippet 

[style.border]="'5px solid' + item.color"
, the first part '5px solid' is a string, and the color is retrieved from the model using item.color.

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

What is the process for removing the highlighted border from a navigation menu in ASP.NET?

I am currently utilizing the navigation menu in the ASP.NET toolbox, but I am struggling to remove an unwanted golden border. Despite my efforts, I have not been able to find any information on how to resolve this issue. The golden border only appears when ...

asp.netcsshighlightnavigationbar

Creating a DIV element in Angular 5 component rather than using a new tag

Is there a way to instruct Angular to generate a DIV instead of another tag when inserting a component into a router-outlet? Currently, the component code looks like this: import { Component, OnInit, ViewEncapsulation } from '@angular/core'; @C ...

angulartypescript

manipulator route in Nest.js

I have the following PATCH request: http://localhost:3000/tasks/566-344334-3321/status. The handler for this request is written as: @Patch('/:id/status') updateTaskStatus() { // implementation here return "got through"; } I am struggling t ...

typescriptexpressnestjshandler

Blurry text and icons in Bootstrap 3

Does anyone else notice a strange display issue with Bootstrap 3 fonts and glyphicons? It seems like the bitmaps and fonts are appearing blurry on desktops when using Firefox and Chrome, but everything looks fine on mobile devices. I've attached an ex ...

javascripthtmltwitter-bootstrap

Angular: Extracting a String from an Observable of any Data Type

Currently, I have a backend REST service that is responsible for returning a string: @GetMapping("/role/{id}") public String findRole (@PathVariable("id") String username) { User user = userRepository.findByUsername(username); return user.getR ...

angulartypescriptspring-boot

The functionality to deselect multiple options in a select box is not functioning properly

There seems to be an issue with removing the selected attribute from the selected values in a jQuery multiselect box. The console is not showing any errors. You can view a working example here The problem lies in this code snippet: $("#mltyslct option ...

javascriptjqueryhtmlmulti-select

Matching only the specified Records in an array of Typescript generic objects

Check out this demo: https://tsplay.dev/Nnavaw I am working with an array that has the following structure: Array<{ id?: string; text?: string; date?: Date; }> This conflicts with the current implementation: data: Array<Par ...

typescripttypescript-generics

Generating instances using TypeScript generics

Looking to create a factory for instantiating classes with generics. After checking out the TypeScript docs, everything seems to work as expected. Here's a simplified version of how it can be done: class Person { firstName = 'John'; ...

javascriptnode.jstypescriptgenericstypescript-generics

Acquire data through Reactive Form input

Struggling to populate my entity data in a reactive form. Data retrieval is successful, but unsure about the ideal method and timing for filling out the form with these values. Here's the structure of my form: import { Component, OnInit, Input } fr ...

angularangular-reactive-forms

Customize the default classes for DataGrid in Material UI

Attempting to customize the CSS properties in the "DataGrid" Material UI, specifically adjusting font weight and overflow of the header. Below is the JSX code snippet: import React, {useState, useEffect} from 'react'; import {DataGrid, GridToolb ...

htmlcssreactjsmaterial-ui

Tips for invoking a JavaScript function script through PHP

<?php echo "<script type='text/javascript'>error_warning('Error!'); </script>"; ?> <!DOCTYPE html> <html stuff> <div id="alert_box" class="alert"></div> < ...

javascriptphphtmlcss

Problem with Anular5 - "this" not functioning correctly inside of ready()

I am encountering an issue in graph.component.ts this.cContainer = cytoscape ( { ready: function(e) { this._dataService.setResultData(); } }); However, I am getting the following error message: ERROR TypeError: Cannot read property &ap ...

angulartypescriptcallback

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

javascripthtmlcsswordpressloading

"Incorporating multiple router modules in Angular 4/5, with a parent router module overseeing all

Is there a way to have multiple router modules in Angular, such as Core and Main with their own separate routing modules, and then import these two routing modules into our parent routing module (app.routing.ts/app.module.ts)? ...

angularangular-router

A sophisticated method for dynamically expanding a text input field as characters are being typed

I recently came across a tutorial on how to make input type text auto-expand while also setting a specific width expand, which I found quite helpful. However, upon implementation, I noticed a few issues that need to be addressed: When typing in capital l ...

javascriptjqueryhtmlcss

Is there a way to retrieve a compilation of custom directives that have been implemented on the Vue 3 component?

Is there a way to retrieve the list of custom directives applied to a component? When using the getCurrentInstance method, the directives property is null for the current component. I was expecting to see 'highlight' listed. How can I access the ...

typescriptvue.jsvuejs3vue-composition-api

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

htmlbootstrap-4

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

javascripthtmlcssfrontend

Grid of squared CSS elements contained within a wrapper div that is set to a maximum

When attempting to create a CSS grid layout with square boxes, I encountered an issue. While the first row of squares remains square when setting the maximum height of the wrapper, subsequent rows are cropped into rectangles instead. The culprit seems to b ...

htmlcsscss-grid

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3