sulco

ngapp() {
  ng new $1 --style=sass --skip-npm && cd $1 && yarn
}

sulco

ngapp() {
  ng new $1 --style=sass --skip-npm && cd $1 && yarn \
  && open http://localhost:4200 \
  && code .
}

sulco

ngapp() {
  ng new $1 --style=sass --skip-npm && cd $1 && yarn \
  && open http://localhost:4200 \
  && code . \
  && yarn start
}

sulco

import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { UserService } from './user.service';
import { UserRole } from '../shared/models/user-role';

@Directive({
  selector: '[tsIfRole]'
})
export class IfRoleDirective implements OnInit {
  role: UserRole;

sulco

import { Input, Component, ViewEncapsulation, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'custom-button',
  template: `<button (click)="handleClick()">{{label}}</button>`,
  styles: [`
    button {
      border: solid 3px;
      padding: 8px 10px;
      background: #bada55;

sulco

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { ButtonComponent } from './button.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [ButtonComponent],
  entryComponents: [ButtonComponent]
})

sulco

import 'zone.js/dist/zone';

import '@webcomponents/custom-elements/src/native-shim';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ButtonModule } from './button.module';

platformBrowserDynamic().bootstrapModule(ButtonModule);

sulco

Image placeholder services

• fillmurray.com (sample)
• placebear.com (sample)
• placebeer.com (sample)
• placebeyonce.com (sample)
• placekitten.com (sample)
• placecage.com (sample)
• placebeard.it (sample)
• stevensegallery.com (sample)

sulco

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

/**
 * Usage:
 * <mycomponent [dtTheme]="{'color-main': '#bada55'}"></mycomponent>
 */
@Directive({
  selector: '[dtTheme]'
})
export class ThemeDirective implements OnChanges {

sulco

window.devtoolsFormatters = [{
    header: function(obj){
      if (!obj.__clown) {
        return null;
      }
      delete obj.__clown;
      const style = `
        color: red;
        border: dotted 2px gray;
        border-radius: 4px;