File
Implements
Metadata
selector |
app-content-header |
styleUrls |
content-header.component.scss |
templateUrl |
./content-header.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
toggleView
|
toggleView(view: any)
|
|
Returns: void
|
isSmallSelected
|
isSmallSelected()
|
|
Returns: boolean
|
isBigSelected
|
isBigSelected()
|
|
Returns: boolean
|
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> </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 with directive