//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(){}}

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{}}