StefanNieuwenhuis

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AngularFire } from 'angularfire2';

import 'rxjs/add/operator/map';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private af: AngularFire, private router:Router) {}

StefanNieuwenhuis

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.1.0_1/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'uninstall',
1 verbose cli   '-g',
1 verbose cli   '@angular/cli' ]
2 info using npm@5.0.3
3 info using node@v8.1.0
4 verbose npm-session fe4975a670f046da
5 silly install loadCurrentTree

StefanNieuwenhuis

How to build a framework independent component library with StencilJS

This is a proposal for a lightning talk at Reactive Conf. Please 🌟 this gist to push the proposal! If you're on your phone, please request the 🖥 desktop site to star this gist 😇 #ReactiveConf

StefanNieuwenhuis

render() {
    return <div class="image-upload">
      <div class="image-upload__edit">
        <label htmlFor="file"></label>
        <input type="file" name="files[]" id="file" accept="image/*" class="image-upload__input"
          onChange={($event: any) => this.onInputChange($event.target.files)} />
      </div>

      <div class="image-upload__preview">
        <div id="image-preview"></div>

StefanNieuwenhuis

.image-upload {
  position: relative;
  max-width: 205px;
  margin: 50px auto;
}

.image-upload__edit {
  position: absolute;
  top: 10px;
  right: 12px;

StefanNieuwenhuis

import { Component} from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  public onInputChange(files: FileList) {
    // check if 1 image is uploaded

StefanNieuwenhuis

import { Component } from '@stencil/core';

const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})

StefanNieuwenhuis

import { Component } from '@stencil/core';

const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})

StefanNieuwenhuis

import { Component, Element } from '@stencil/core';

const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})

StefanNieuwenhuis

import { Component, Element, Event, EventEmitter } from '@stencil/core';

const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})