`I implemented a toggle-switch in my Angular project using <mat-slide-toggle></mat-slide-toggle> to switch between dark mode and light mode. However, when I switch to dark mode and translate my application, the background property of the card-contents disappears. You can see the issue in this GIF: (https://i.sstatic.net/fXN99.gif)
I attempted to add the dark-theme mode through functions in my application. However, the background object still disappears in the card-content when I translate in dark mode.
This is the section in my home-component.html where the issue occurs:
<section>
<div class="container">
<h1 class="products-title">New Arrivals</h1>
<div class="products-list">
<div *ngFor="let product of products" class="card">
<div class="card-content" [ngStyle]="{'background-color': isDarkTheme ? '#5eda5e' : '#3b5b2d'}">
<img class="product-image" [src]="product.imgSrc" [alt]="">
<h2 class="product-title">{{ product.name | translate}}</h2>
<p class="product-description">{{ product.description | translate}}</p>
<p class="product-price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p>
</div>
</div>
</div>
</div>
</section>
And here is my home-component.ts:
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';
import { Product } from '../product.model';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: \['./home.component.css'\]
})
export class HomeComponent implements OnInit, AfterViewInit {
products: Product\[\] = \[\];
isDarkTheme: boolean = false;
langChangeSubscription: Subscription;
constructor(private productService: ProductService, public translate: TranslateService) {
this.translate.setDefaultLang('en');
this.translate.use('en');
translate.addLangs(\['en', 'tr'\]);
this.langChangeSubscription = this.translate.onLangChange.subscribe(() => {
this.updateProducts();
});
}
// Afer View Init method here
// On Init method here
// On Destroy method here
switchLanguage(lang: string) {
this.translate.use(lang);
}
ChangeLang event here
private updateProducts() {
this.products = this.productService.getProducts();
}
}
This is my header-component.html:
<nav class="navigation">
<ul class="nav-bar" [ngClass]="{'dark-theme-mode':isDarkTheme}">
<!-- Navigation links here -->
</ul>
</nav>
This is my header-component.ts:
import { Component, Renderer2 } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrl: './header.component.css'
})
export class HeaderComponent {
// Header component logic here
}
I am using ngx app for translation. Please excuse any formatting issues as this is my first question.`