experiments with Angular and Web Components

Sketching out hosting Angular Components as Custom Elements / Web Components

Angular Component API (4.x)

Angular components are

//annotate with metadata about template and styles
@Component({selector: 'my-component',templateUrl: 'my-component.html',styleUrls: ['my-component.css'],viewEncapsulation: ViewEncapsulation.Native//Shadow DOM V0providers: [SomeService],})classMyComponent{//public API for component consumers
@Input()someProperty:any;//property values passed in
@Output()someEventnewEventEmitter();//events go out
@ViewChild(ChildComponent)childView:ChildComponent;
@ViewChildren(ItemComponent)items:QueryList<ItemComponent>//bind to host element events
@HostListener('mousemove',['$event'])onMouseMouse(event:MouseEvent){}//bind to host properties and attributes
@HostBinding('attr.aria-foo')someValue;//lifecycle eventsngOnInit(){}ngOnChanges(changes){}ngDoCheck(){}ngOnDestroy(){}//view lifecycle eventsngAfterContentInit(){}ngAfterContentChecked(){}ngAfterViewInit(){}ngAfterViewChecked(){}}

Custom Elements v1 API

classMyCustomElementextendsHTMLElement{//newableconstructor(...optionalArgs?:any[]){}//attributes to observe changes tostaticgetobservedAttributes():string[]{return['value','foo']}//propertiessomeProp:string;setfoo(value:string){}getfoo(){return'foo'}//dispatch eventsonClick(){this.dispatchEvent(newCustomEvent('some-event',options))}//called when attributes changeattributeChangedCallback(attributeName,oldValue,newValue,namespace):void{}//called when connected to a document / shadow treeconnectedCallback():void{}//called when removed from document disconnectedCallback():void{}}