ng-shopping-cart/components/cart-showcase/cart-showcase.component.d.ts

An Angular component library to create shopping carts

import { Injector, NgModuleFactory, OnChanges, OnDestroy, OnInit, SimpleChanges, Type } from '@angular/core';
import { CartItem } from '../../classes/cart-item';
import { ShowcaseItem } from '../../interfaces/showcase-item';
import { CartService } from '../../services/cart.service';
/**
 * Renders items arranged in columns using a dynamic component for the item. Useful for getting started with e-commerce applications.
 *
 * @order 4
 * @howToUse "Using wider items"
 * ```html
 * <cart-showcase [items]="items" [aspectRatio]="'2:1'">
 * </cart-showcase>
 * ```
 *
 * @howToUse "Using four columns in all screen sizes bigger than 768px"
 * ```html
 * <cart-showcase [items]="items" [mCols]="4" [lCols]="4">
 * </cart-showcase>
 * ```
 *
 * @howToUse "Using a different item component"
 * ```html
 * <!-- my-component.html -->
 * <cart-showcase [items]="items" [itemComponent]="itemComponent">
 * </cart-showcase>
 * ```
 * ```typescript
 * // my-component.ts
 * export class MyComponent {
 *   itemComponent = MyCustomItemComponent;
 * }
 *
 * // my-custom-item-component.ts
 * @Component({
 *  selector: 'my-custom-item-component',
 *  template: '<div class="item-class">{{item.getName()}}</div>'
 * })
 * export class MyCustomItemComponent implements ShowcaseItem  {
 *   item: CartItem;
 * }
 *
 * // app.module.ts
 * @NgModule({
 *   // .....
 *   entryComponents: [MyCustomItemComponent],
 * })
 * export class AppModule {
 * }
 * ```
 *
 * @note {warning} If you change the `[columns]` input you must also change the sass variable that controls the component grid and
 * vice-versa. A similar procedure is required to create aspect ratios with values greater than four eg: `'1:5'`. Check the styling guide
 * for more information.
 *
 * @note {danger} The aspect ratio is the width/height proportion of the items therefore a ratio of `'2:2'` is equivalent to `'1:1'`.
 * Redundant ratios like these are removed from the source so don't try to use them.
 *
 */
export declare class CartShowcaseComponent implements OnChanges, OnInit, OnDestroy {
    private cartService;
    private _serviceSubscription;
    format: string;
    xsClass: string;
    sClass: string;
    mClass: string;
    lClass: string;
    xlClass: string;
    ratioClass: string;
    /**
     * The number of columns to display when the screen size matches phone devices.
     */
    xsCols: number;
    /**
     * The number of columns to display when the screen matches tablet devices.
     */
    sCols: number;
    /**
     * The number of columns to display when the screen matches desktop devices.
     */
    mCols: number;
    /**
     * The number of columns to display when the screen matches large desktop devices.
     */
    lCols: number;
    /**
     * The number of columns to display when the screen matches extra large desktop devices.
     */
    xlCols: number;
    /**
     * The number of columns in the grid.
     * Only update this value if you changed the columns sass variable in the library styles following the Styling guide.
     */
    columns: number;
    /**
     * An array of items to display
     */
    items: CartItem[];
    /**
     * The component to render for each item. This type means any component that implements the interface `ShowcaseItem`.
     */
    itemComponent: Type<ShowcaseItem>;
    /**
     * Optional injector for the dynamic item components. Used when you want to replace the default inherited injector for the component.
     */
    injector: Injector;
    /**
     * Optional module factory for the dynamic components. You usually get one when you manually compile modules.
     */
    moduleFactory: NgModuleFactory<any>;
    /**
     * The aspect ratio of the container of the items. A value of `1:1` means square items, `2:1` means two times wider, `1:2` two times
     * taller and so on.
     */
    aspectRatio: string;
    /**
     * Changes currency display format for the component. Overrides the value set from the service using `setLocaleFormat`.
     */
    localeFormat: string;
    private getColumnSize(value);
    constructor(cartService: CartService<any>);
    ngOnChanges(changes: SimpleChanges): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
}