const myModule = (function() {
const privateVariable = 'Hello World';
function privateMethod() {
console.log(privateVariable);
}
return {
publicMethod: function() {
privateMethod();
}
}
})();
myModule.publicMethod();import { Component, Input } from '@angular/core';
import { ProductsInterface } from '../../interfaces/products.interface';
@Component({
selector: 'card-component',
templateUrl: './card.component.html',
})
export class CardComponent {
@Input() public product!: ProductsInterface;
public getDiscount(price: number, discount: number): number {
return Math.ceil(((price - discount) / price) * 100);
}
}<ng-template [ngIf]="product.discount"
><div class="product-badges">
<span class="badge onsale"
>{{ getDiscount(product.price, product.discount) }}%</span
>
</div></ng-template
><div class="w-3/12 flex flex-row">
<div class="ml-6 place-self-center">
<div class="text-xs text-888888 mb-5 leading-none">
Магазин: <span class="text-266cfb">dns</span>
</div>
<ul class="flex flex-row mb-9 items-baseline">
<ng-template [ngIf]="card.discount">
<li
class="text-96989c mr-1.5 text-lg line-through font-normal leading-none"
>
{{ card.discount }}₽
</li>
</ng-template>
<li class="text-272727 text-2xl font-semibold leading-none">
{{ card.price }}₽
</li>
</ul>
<button
class="uppercase bg-266cfb text-white mb-5 px-10 leading-9 text-sm font-semibold rounded transition delay-150 duration-300 ease-in-out hover:bg-272727"
>
Add to cart
</button>
<ul class="flex flex-row gap-2.5 justify-center">
<li
class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"
></li>
<li
class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"
></li>
<li
class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"
></li>
</ul>
</div>
</div>
Только надо учитывать, что работать с такими данными "слегка" сложнее. Добавление/удаление элементов, изменение их (если не мутировать) вызовут ряд трудностей.
[
{
"id": 1,
"title": "iPhone 9",
"description": "An apple mobile which is nothing like apple",
"price": 549,
"discountPercentage": 12.96,
"rating": 4.69,
"stock": 94,
"brand": "Apple",
"category": "smartphones",
"thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
"images": [
"https://i.dummyjson.com/data/products/1/1.jpg",
"https://i.dummyjson.com/data/products/1/2.jpg",
"https://i.dummyjson.com/data/products/1/3.jpg",
"https://i.dummyjson.com/data/products/1/4.jpg",
"https://i.dummyjson.com/data/products/1/thumbnail.jpg"
]
},
{
"id": 2,
"title": "iPhone X",
"description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
"price": 899,
"discountPercentage": 17.94,
"rating": 4.44,
"stock": 34,
"brand": "Apple",
"category": "smartphones",
"thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg",
"images": [
"https://i.dummyjson.com/data/products/2/1.jpg",
"https://i.dummyjson.com/data/products/2/2.jpg",
"https://i.dummyjson.com/data/products/2/3.jpg",
"https://i.dummyjson.com/data/products/2/thumbnail.jpg"
]
}
]