import { Component , Input } from '@angular/core' ; @ Component ( { selector : 'app-interface-pricing' , template : `
    <div class="card">
      
      <div *ngIf="color" class="card-status bg-{{ color }}"></div>

      <div class="card-body text-center">
        <div class="card-category">{{ category }}</div>
        <div class="display-3 my-4">$ {{ price }}</div>

        <ul class="list-unstyled leading-loose">
          <li><strong>{{ users }}</strong> Users</li>

          <li *ngFor="let feature of features">
            <i class="fe mr-2"
              [class.fe-check]="hasFeature(feature)" [class.text-success]="hasFeature(feature)"
              [class.fe-x]="!hasFeature(feature)" [class.text-danger]="!hasFeature(feature)"
              aria-hidden="true"></i>
            {{ feature }}
          </li>
        </ul>

        <div class="text-center mt-6">
          <a href="#" class="btn btn-{{ color || 'secondary' }} btn-block">Choose plan</a>
        </div>
      </div>
    </div>
  ` , styles : [ ] , } ) export class InterfacePricingComponent { @ Input ( ) public category ; @ Input ( ) public color ; @ Input ( ) public features = [ ] ; @ Input ( ) public hasFeatures = [ ] ; @ Input ( ) public price ; @ Input ( ) public users ; hasFeature ( feature ) { return this . hasFeatures . indexOf ( feature ) > - 1 ; } }