### 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`
Defined in src/app/home/content/content-header/content-header.component.ts:9

### Constructor

`constructor()`
Defined in src/app/home/content/content-header/content-header.component.ts:10

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/home/content/content-header/content-header.component.ts:14
Returns: `void`

toggleView
`toggleView(view: any)`
Defined in src/app/home/content/content-header/content-header.component.ts:17
Returns: `void`

isSmallSelected
`isSmallSelected()`
Defined in src/app/home/content/content-header/content-header.component.ts:22
Returns: `boolean`

isBigSelected
`isBigSelected()`
Defined in src/app/home/content/content-header/content-header.component.ts:26
Returns: `boolean`

### Properties

selectedSize
`selectedSize: `string``
Default value: `COZY`
Defined in src/app/home/content/content-header/content-header.component.ts:10

    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 ""