EventPicKing - Dokumentation
  1. Components
  2. PricesPageComponent

File

src/app/pages/prices-page/prices-page.component.ts

Description

Price page component

Implements

OnInit

Example

Metadata

selector app-prices-page
styleUrls prices-page.component.scss
templateUrl ./prices-page.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/pages/prices-page/prices-page.component.ts:15

Methods

ngOnInit
ngOnInit()
Defined in src/app/pages/prices-page/prices-page.component.ts:25

Initialize component

Returns : void

Properties

Private log
log:
Default value : Log.create('PricesPageComponent')
Defined in src/app/pages/prices-page/prices-page.component.ts:15

Logger 

import { Component, OnInit } from '@angular/core';
import { Log } from 'ng2-logger';

/**
 * Price page component
 * @author Daniel Sogl, Markus Kirschner
 */
@Component({
  selector: 'app-prices-page',
  templateUrl: './prices-page.component.html',
  styleUrls: ['./prices-page.component.scss']
})
export class PricesPageComponent implements OnInit {
  /** Logger */
  private log = Log.create('PricesPageComponent');

  /**
   * Constructor
   */
  constructor() {}

  /**
   * Initialize component
   */
  ngOnInit() {
    this.log.color = 'orange';
    this.log.d('Component initialized');
  }
}

<div class="row mt-5 pt-5">
    <div class="col text-center">
        <!--Section: Pricing v.2-->
        <section class="section pb-3">

            <!--Section heading-->
            <h1 class="section-heading pt-4">{{ 'TEXTS.PRICING_TITLE' | translate }}</h1>
            <!--Section description-->
            <p class="section-description">
                <a routerLink="/signup">{{ 'TEXTS.PRICING_GET_STARTED' | translate }}</a>
                {{ 'TEXTS.PRICING_DESCRIPTION' | translate }}
            </p>

            <!--Grid row-->
            <div class="row">
                <!--Grid column-->
                <div class="col-lg-4 col-md-12 mb-r">
                    <!--Panel-->
                    <div class="price-color card text-center pricing-card align-items-center py-3 px-3 grey lighten-4 wow fadeInUp indigo-gradient">
                        <h5 class="card-title">
                            <strong>Basic</strong>
                        </h5>
                        <div class="price pt-0">
                            <h2>25</h2>
                        </div>
                        <ul class="striped ">
                            <li>
                                <p>
                                    <strong>15</strong>&nbsp;{{ 'TEXTS.PRICING_MONTH' | translate }}</p>
                            </li>
                            <li>
                                <p>
                                    1.000&nbsp;{{ 'TEXTS.PRICING_PICTURE_AMOUNT' | translate }}</p>
                            </li>
                            <li>
                                <p>{{ 'TEXTS.PRICING_CANCEL' | translate }}</p>
                            </li>
                        </ul>
                    </div>
                    <!--/.Panel-->
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 col-md-12 mb-r ">
                    <!--Panel-->
                    <div class="price-color card text-center pricing-card align-items-center py-3 px-3 grey lighten-4 wow fadeInUp indigo-gradient-2"
                        data-wow-delay="0.05s">
                        <h5 class="card-title ">
                            <strong>Smart</strong>
                        </h5>
                        <div class="price pt-0 ">
                            <h2 class="price-color">35</h2>
                        </div>
                        <ul class="striped ">
                            <li>
                                <p>
                                    <strong>25</strong>&nbsp;{{ 'TEXTS.PRICING_MONTH' | translate }}</p>
                            </li>
                            <li>
                                <p>
                                    1.000&nbsp;{{ 'TEXTS.PRICING_PICTURE_AMOUNT' | translate }}</p>
                            </li>
                            <li>
                                <p>{{ 'TEXTS.PRICING_CANCEL' | translate }}</p>
                            </li>
                        </ul>
                    </div>
                    <!--/.Panel-->
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 col-md-12 mb-r ">
                    <!--Panel-->
                    <div class="price-color card text-center pricing-card align-items-center py-3 px-3 grey lighten-4 wow fadeInUp indigo-gradient"
                        data-wow-delay="0.1s">
                        <h5 class="card-title ">
                            <strong>Professional</strong>
                        </h5>
                        <div class="price pt-0 ">
                            <h2 class="price-color ">50</h2>
                        </div>
                        <ul class="striped">
                            <li>
                                <p>
                                    <strong>50</strong>&nbsp;{{ 'TEXTS.PRICING_MONTH' | translate }}</p>
                            </li>
                            <li>
                                <p>
                                    1.000&nbsp;{{ 'TEXTS.PRICING_PICTURE_AMOUNT' | translate }}</p>
                            </li>
                            <li>
                                <p>{{ 'TEXTS.PRICING_CANCEL' | translate }}</p>
                            </li>
                        </ul>
                    </div>
                    <!--/.Panel-->
                </div>
                <!--Grid column-->
            </div>
            <!--Grid row-->

            <br>
            <!--Section heading-->
            <h1 class="section-heading pt-4">{{ 'TEXTS.PRICING_ADDITIONAL' | translate }}</h1>
            <!--Section description-->
            <p class="section-description">
                {{ 'TEXTS.PRICING_LIST_POSITION' | translate }}
            </p>
            <!--Grid row-->
            <div class="col">
                <div class="row">
                    <!--Grid column-->
                    <div class="col-4"></div>
                    <div class="col-lg-4 col-md-12 mb-r">
                        <!--Panel-->
                        <div class="price-color card text-center pricing-card align-items-center py-3 px-3 grey lighten-4 wow fadeInUp indigo-gradient">
                            <h5 class="card-title">
                                <strong>Premium</strong>
                            </h5>
                            <div class="price pt-0">
                                <h2>30</h2>
                            </div>
                            <ul class="striped ">
                                <li>
                                    <p>{{ 'TEXTS.PRICING_FIRST_POSITION' | translate }}</p>
                                </li>
                                <li>
                                    <p>{{ 'TEXTS.PRICING_MORE_ATTENTION' | translate }}</p>
                                </li>
                                <li>
                                    <p>{{ 'TEXTS.PRICING_CANCEL' | translate }}</p>
                                </li>
                            </ul>
                        </div>
                        <!--/.Panel-->
                        <div class="col-4"></div>
                    </div>
                </div>
            </div>

        </section>
        <!--Section: Pricing v.2-->
    </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""