File

src/app/home/content/content-header/content-header.component.ts

Implements

OnInit

Metadata

selector app-content-header
styleUrls content-header.component.scss
templateUrl ./content-header.component.html

Outputs

toggleSize $event type: EventEmitter

Constructor

constructor()

Methods

ngOnInit
ngOnInit()
Returns: void
toggleView
toggleView(view: any)
Returns: void
isSmallSelected
isSmallSelected()
Returns: boolean
isBigSelected
isBigSelected()
Returns: boolean

Properties

selectedSize
selectedSize: string
Default value: COZY
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-content-header',
  templateUrl: './content-header.component.html',
  styleUrls: ['./content-header.component.scss']
})
export class ContentHeaderComponent implements OnInit {
  @Output() toggleSize = new EventEmitter();
  selectedSize: string = 'COZY';

  constructor() { }

  ngOnInit() {
  }

  toggleView(view) {
    this.selectedSize = view;
    this.toggleSize.emit({size: view});
  }

  isSmallSelected(): boolean {
    return this.selectedSize === 'COZY';
  }

  isBigSelected(): boolean {
    return this.selectedSize === 'COMPACT';
  }

}
<div class="content">
  <div itemprop="name" class="queried-for">
    <h4 title="men casual shirts" class="q">Displaying avialable products</h4>
    <span>&nbsp;</span>
  </div>

  <div class="options">
    <ul class="img-size">
      <label>View:</label>
      <li (click)="toggleView('COMPACT')" [ngClass]="{'big': true, 'selected': isBigSelected()}"></li>
      <li (click)="toggleView('COZY')" [ngClass]="{'small': true, 'selected': isSmallSelected()}"></li>
    </ul>
    <ul class="sort">
      <label>Sort:</label>
      <li data-sortkey=":popularity">Popular</li>
      <li data-sortkey=":new">New</li>
      <li data-sortkey=":discount">Discount</li>
      <label>Price: 
        <li data-sortkey=":low">Low</li>
        <li data-sortkey=":high">High</li>
      </label>
    </ul>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""