0

I want to set different colors for each team according to team color in angular and the data teamid is coming from the backend.

I am displaying a list of matches using *ngFor so it is not possible to style each match div. please suggest to me how to style .card:after dynamically.

I have tried using [style.--card:after]='blue' but it doesn't work

here is the GitHub link of my code: https://github.com/suraj903/SportsGeek-WebApp/tree/master/src/app/user/match-list

Live Site Link: https://sportsgeek-webapp.herokuapp.com/ username: Patanjali password: 123123

image of current css

html :-

<body [style.background-image]="'url(' + stadium + ')'">
    <div class="card" *ngFor="let matchdata of matchData" routerLink="betting-page/{{matchdata.matchId}}">
        
        <h2> {{matchdata.name}}</h2>
        <div class="match-details">
            <div class="team1">
                <img loading="lazy" style="border-radius: 50%; " src={{matchdata.team1Logo}} />
                <h3 class="team-name"> {{matchdata.team1}} </h3>
            </div>
            <div class="details">
                <h3 class="date"> {{matchdata.startDatetime | date :'medium':'UTC' }} </h3>
                <h1 class="versus">VS</h1>
                <h4 class="venue"> {{matchdata.venue}} </h4>
            </div>
            <div class="team2">
                <img loading="lazy" style="border-radius: 50%; " src="{{matchdata.team2Logo}}" />
                <h3 class="team-name">{{matchdata.team2}} </h3>
            </div>
        </div>
    </div>
</body>

CSS :-

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;

    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    height: auto;
    align-self: flex-start;
}

.card {
  
    transform: translate(-4%, 5%);
    width: auto;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    overflow: hidden;
    transition: 0.5s;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
    height: 100%;
    margin: 20px;
}

.card:hover {
    background: #fff;
  
}

.card:before {
    content: '';
    position: absolute;
    bottom: -70%;
    left: -120%;
    width: 100%;
    height: 100%;
    background: #7300ab;
    transition: 0.5s;
    z-index: -1;
    box-sizing: border-box;
    border-top: 5px solid #430064;
    transform: skewX(-5deg);
}

.card:hover:before {
    left: -50%;
}

.card:after {
    content: '';
    position: absolute;
    bottom: -70%;
    right: -120%;
    width: 100%;
    height: 100%;
    background: #ff0;
    transition: 0.5s;
    z-index: -1;
    box-sizing: border-box;
    border-top: 5px solid #ef9b0f;
    transform: skewX(-5deg);
}

.card:hover:after {
    right: -50%;
}

.card h2 {
    width: 100%;
    margin: 0;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    transition: 0.5s;
}

.card:hover h2 {
    background: #ff0057;
    color: #fff;
}

.match-details {
    position: relative;
   
}

.versus {
    width: 50px;
    height: 50px;
    font-size: 24px;
    border-radius: 50%;
    background: #e91e63;
    color: #fff;
    text-align: center;
    line-height: 50px;
    margin: 20px auto;
}

.venue {
    padding-bottom: 100px;
}

.date {
    margin: 20px 0 0;
}

.team1 {
    width: 200px;
    float: left;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    text-align: center;
}

.team2 {
    width: 200px;
    float: left;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    text-align: center;
}

.team1 img,
.team2 img {
    width: 100%;
}

.details {
    width: 200px;
    min-height: 200px;
    float: left;
    text-align: center;
}

h3.team-name {
    padding: 15px 0 0;
    
    text-align: right;
    transition: 0.5s;
    margin-top: 40px;
  
}

.team1 h3.team-name {
    text-align: left;
}

.card:hover .team1 h3.team-name {
    color: white;
}
Richard Wilson
  • 297
  • 4
  • 17
Suraj Gupta
  • 1
  • 1
  • 5

2 Answers2

0

if u want to apply diff style on the card depend on the teamId you can achieve that by using ngClass and SCSS

first, on your card add the ngclass

<div class="card" [ngClass]="{1 : 'team_class1', 2 : 'team_class2', 3 : 'team_class4'}[teamid]" routerLink="betting-page/{{matchdata.matchId}}">

after that, your scss looks like

.card {
    // default style
    &.team_class1 {
        color:'red'
    }
    &.team_class2 {
        color:'black'
    }

}
Amir Saadallah
  • 668
  • 1
  • 8
  • 19
  • there are total 8 teams, how will i match particular team with particular color ? – Suraj Gupta Jun 01 '21 at 11:27
  • ng class will do that for you, you just need to define each team css style – Amir Saadallah Jun 01 '21 at 12:07
  • thanks. i solved the problem by creating an object like this :- teamColor:any = { 1: '#ff0', //csk 2: '#2561ae', //dc 3: '#7300ab', //kkr 4: '#004f91', //mi 5: '#ed1f27', //pk 6: 'RGB(37 ,74 ,165)', //rr 7: '#d5152c', //rcb 8: '#f7a721', //srh //in case if the ids of the above teams changes, default colors will be used t1: 'pink', // t2: 'silver' // }; and then checking team1Id with teamColor object and assigned the color to it. – Suraj Gupta Jun 01 '21 at 14:16
0

i solved the problem by creating an object like this :-

teamColor:any = {
1: '#ff0', //csk
2: '#2561ae', //dc
3: '#7300ab', //kkr
4: '#004f91', //mi
5: '#ed1f27', //pk
6: 'RGB(37 ,74 ,165)', //rr
7: '#d5152c', //rcb
8: '#f7a721', //srh
//in case if the ids of the above teams changes, default colors will be used
t1: 'pink', //
t2: 'silver' //

};

and then checking team1Id and team2Id with teamColor object and assigned the color to it in html.

<div class="left" [style.background]="matchdata.team1Id ? teamColor[matchdata.team1Id] : teamColor.t1">
       
    </div>

    <div class="right" [style.background]="matchdata.team2Id ? teamColor[matchdata.team2Id] : teamColor.t2">
    </div>
Suraj Gupta
  • 1
  • 1
  • 5