(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
import { Pipe, PipeTransform, ContentChild } from '@angular/core'; | |
@Pipe({ | |
name: 'checkboxFilter' | |
}) | |
export class CheckFilter implements PipeTransform { | |
transform(items: any[], filter: any, filterItems: Array < any >, isAnd: boolean): any { | |
console.log('Filtering ..'); | |
if (filter && Array.isArray(items) && filterItems) { | |
let filterKeys = Object.keys(filter); | |
let checkedItems = filterItems.filter(item => { return item.checked; }); |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
@Component({ | |
selector: 'my-app', | |
template: ` | |
<div class="example-wrapper container-fluid"> | |
<div class="row"> | |
<div class="col-xs-12 col-sm-12 example-col"> | |
<p>Splitter</p> | |
<kendo-splitter orientation="horizontal" style="height: 360px;"> | |
<kendo-splitter-pane size="50%" min="40%"> | |
<p>PanelBar</p> |
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router' | |
import { Observable } from 'rxjs'; | |
import { first } from 'rxjs/operators'; | |
import { MainService } from './main.service'; | |
import { Injectable } from '@angular/core'; | |
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; | |
@Injectable() | |
export class MainResolver implements Resolve<any> { |
<article class="starwars"> | |
<audio preload="auto"> | |
<source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" type="audio/ogg" /> | |
<source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg" /> | |
</audio> | |
<section class="start"> | |
<p> | |
Start <br> <span>Star Wars opening crawl</span> <br> from 1977 | |
<br> |
{ | |
"name": "portal-front", | |
"version": "0.1.0", | |
"private": true, | |
"scripts": { | |
"prebuild": "rm -rf node_modules package-lock.json && npm install", | |
"serve": "vue-cli-service serve", | |
"build": "vue-cli-service build", | |
"lint": "vue-cli-service lint" | |
}, |
<template> | |
<div> | |
<v-toolbar flat color="white"> | |
<v-spacer /> | |
<v-toolbar-title> | |
<h2 class="mb-0">Mis Campañas</h2> | |
</v-toolbar-title> | |
<v-spacer /> | |
<template v-if="has_rendered_campaigns && campaigns_list"></template> | |
<v-btn dark color="primary" @click="createCampaign" v-if="campaigns_list.length"> |