Reactive Programming with Angular and ngrx by Oren Farhi

Author:Oren Farhi
Language: eng
Format: epub
Publisher: Apress, Berkeley, CA

Change-Detection Mode—OnPush

Since the now-playing component is a container component and is composed of the now-playlist-filter and now-playlist components, we should use the OnPush change-detection mode .

This code can be found in this book’s chapter-04 branch.

@Component({

selector: 'now-playlist-filter',

template: `

<h3 class="nav-header user-playlists-filter">

<span class="text btn-transparent">

Now Playing <span *ngIf="!isPlaylistEmpty()">({{ playlistLength }})</span>

</span>

<button class="btn btn-link btn-xs btn-clear" title="Clear All Tracks In Now Playlist"

[disabled]="isPlaylistEmpty()"

(click)="clearPlaylist()">

<span class="fa fa-trash-o"></span>

</button>

<div class="playlist-filter pull-right">

<i class="fa fa-search" *ngIf="isFilterEmpty()"></i>

<i class="fa fa-remove text-danger"

*ngIf="!isFilterEmpty()"

(click)="resetSearchFilter()"

></i>

<input type="search" name="playlist-search"

[value]="playlist.filter"

#searchFilter

(input)="handleFilterChange(searchFilter.value)">

</div>

</h3>

`,

changeDetection: ChangeDetectionStrategy.OnPush

})

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.