Pregular

Meanings

| Icon | | | --- | --- | | :heavy_check_mark: | will implemented | | :alarm_clock: | will developed when first alpha is released | | :star: | new feature | | :question: | not sure if this will be implemented | | :warning: | experimental | | :x: | will not be implemented |

Features

| | Planned | Implemented | | --- | ---| --- | | Component Class decorator | | | | @Component() | :heavy_check_mark: | No | | @Injectable()| :alarm_clock: | No | | @Directive()| :alarm_clock: | No | | @Pipe()| :alarm_clock: | No | | | | | | | | | | Component configuration | | | | selector | :heavy_check_mark: | No | | template | :heavy_check_mark: | No | | templateUrl | :heavy_check_mark: | No | | styles | :heavy_check_mark: | No | | styleUrls | :heavy_check_mark: | No | | encapsulation | :heavy_check_mark: | No | | interpolation | :heavy_check_mark: | No | | host | :alarm_clock: | No | | exportAs | :alarm_clock: | No | | elementType@Component({ selector: 'my-real-image-component' elementType: 'img'})<img is="my-real-image-component" src="image/url.jpg">* Safari needs polyfill | :star::alarm_clock::warning: | No | | inputs | :question: | No | | outputs | :question: | No | | providers | :question: | No | | animations | :question: | No | | queries | :question: | No | | viewProviders | :x: | - | | changeDetection | :x: | - | | entryComponents | :x: | - | | preserveWhitespaces | :x: | - | | module.id | :x: | - | | jit | :x: | - | | | | | | | | | | Class field decorators for components | | | | @Input() | :heavy_check_mark: | No | | @Output()| :heavy_check_mark: | No | | @HostBinding('class.valid')| :alarm_clock: | No | | @HostListener('click', ['$event'])| :alarm_clock: | No | | @ContentChild(myPredicate)| :alarm_clock: | No | | @ContentChildren(myPredicate)| :alarm_clock: | No | | @ViewChild(myPredicate)| :alarm_clock: | No | | @ViewChildren(myPredicate)| :alarm_clock: | No | | @Query(myPredicate)Alias for:@ContentChild, @ContentChildren, @ViewChild and @ViewChildren | :star::alarm_clock::warning: | No | | @On('click .foo')(1) Defining an event with a selector in a class method(2) Alias for @HostBinding => @On('click') | :star::alarm_clock::warning: | No | | @Route('/name/{{value}}', myPredicate, {name: 'myOutlet'})@Component({ selector: 'some-component', template: <router-outlet name="myOutlet"></router-outlet>})class Foo { @Route('/name1/{{value}}', {name: 'myOutlet'}, BarComponent) route1 = 'myRoute1';} | :star::alarm_clock::warning: | No | | | | | | | | | | Built-in Services| | | | ElementRef, constructor(private elr: ElementRef)| :heavy_check_mark: | No | | TemplateRef | :alarm_clock: | No | | ViewContainerRef | :alarm_clock: | No | | | | | | | | | | Component lifecycle hooks| | | | constructor()| :heavy_check_mark: | No | | ngOnChanges(changeRecord) | :heavy_check_mark: | No | | ngOnInit() | :heavy_check_mark: | No | | ngAfterViewInit() | :heavy_check_mark: | No | | ngOnDestroy()| :heavy_check_mark: | No | | ngAfterContentInit() | :alarm_clock: | No | | ngAfterViewChecked()| :x: | - | | ngDoCheck() | :x: | - | | ngAfterContentChecked() | :x: | - | | | | | | | | | | Built-in Services| | | | ElementRef| :heavy_check_mark: | No | | TemplateRef | :alarm_clock: | No | | ViewContainerRef | :alarm_clock: | No | | | | | | | | | | Template syntax| | | | Hello {{ponyName}}| :heavy_check_mark: | No | | <div title="Hello {{ponyName}}">| :heavy_check_mark: | No | | (click)="foo($event)"| :heavy_check_mark: | No | | [value]="firstName"| :alarm_clock: | No | | [attr.role]="myAriaRole"| :alarm_clock: | No | | [class.extra-sparkle]="isDelightful"| :alarm_clock: | No | | [style.width.px]="mySize"| :alarm_clock: | No | | Sum{{1 + 1 + getVal()}}| :alarm_clock: | No | | [(title)]="name"| :alarm_clock: | No | | <video #movieplayer<button (click)="movieplayer.play()"></video>| :alarm_clock: | No | | *myUnless="myExpression" | :alarm_clock: | No | | Employer: {{employer?.companyName}}| :alarm_clock: | No | | <ng-template>| :alarm_clock: | No | | <ng-content>| :alarm_clock: | No | | <router-outlet>, <router-outlet name="myOutlet">| :alarm_clock: | No | | <svg:rect x="0" y="0" width="100" height="100"/>| :alarm_clock: | No | | <svg><rect x="0" y="0" width="100" height="100"/></svg>| :alarm_clock: | No | | <ng-container>| :alarm_clock: | No | | <ng-container *ngTemplateOutlet>| :alarm_clock: | No | | (keydown.enter.esc)="bar($event)"| :alarm_clock: | No | | (ngSubmit)="bar(...)"| :alarm_clock: | No | | | | | | | | | | Built-in directives| | | | *ngIf="showSection"| :heavy_check_mark: | No | | *ngIf="condition; else elseBlock"| :heavy_check_mark: | No | | *ngIf="condition; then thenBlock else elseBlock"| :alarm_clock: | No | | *ngFor="let item of list; index as i"| :alarm_clock: | No | | *ngFor="let item of list; first as isFirst"| :alarm_clock: | No | | *ngFor="let item of list; even as isEven"| :alarm_clock: | No | | *ngFor="let item of list; odd as isOdd"| :alarm_clock: | No | | *ngFor="let item of items; index as i; trackBy: trackByFn| :alarm_clock: | No | | [ngSwitch], [ngSwitchCase], ... | :alarm_clock: | No | | [ngClass] | :alarm_clock: | No | | [ngStyle] | :alarm_clock: | No | | | | | | | | | | Built-in pipes| | | | {{ observableOrPromise | async }}| :heavy_check_mark: | No | | {{ value_expression | json }}| :alarm_clock: | No | | {{ value_expression | uppercase }}| :alarm_clock: | No | | {{ value_expression | lowercase }} | :alarm_clock: | No | | {{ input_expression | keyvalue }} | :alarm_clock: | No | | {{ value_expression | number }}| :alarm_clock: | No | | {{ value_expression | percent}}| :alarm_clock: | No | | {{ value_expression | uppercase }}| :alarm_clock: | No | | {{ value_expression | currency }} | :alarm_clock: | No | | {{ value_expression | i18nPlural }} | :alarm_clock: | No | | {{ value_expression | slice }} | :alarm_clock: | No | | {{ value_expression | date }} | :alarm_clock: | No | | {{ value_expression | i18nSelect }} | :alarm_clock: | No | | {{ value_expression | titlecase }} | :alarm_clock: | No | | | | | | | | | | Dependency injection decorators | | | | @Self() | :alarm_clock: | No | | @Optional() | :alarm_clock: | No | | @SkipSelf() | :alarm_clock: | No | | @Host() | :alarm_clock: | No | | @Attribute() | :alarm_clock: | No | | @Inject(<any_token>) | :alarm_clock: | No | | @Inject(DOCUMENT) | :alarm_clock: | No | | @Inject(WINDOW) | :star::alarm_clock: | No | | @Inject(LOCATION) | :star::alarm_clock: | No | | @Inject(NAVIGATOR) | :star::alarm_clock: | No | | @Inject(HISTORY) | :star::alarm_clock: | No | | @Inject(LOCALSTORAGE) | :star::alarm_clock: | No | | | | | | | | | | State | :alarm_clock: | No | | | | | | | | | | Routing and navigation | :alarm_clock: | No | | | | | | | | | | Directive configuration | :alarm_clock: | No | | | | | | | | | | NgModules| :x: | - |

Browser Support

| Chrome*| Firefox* | Edge | Safari* | IE11+ | Chrome Android* | Mobile Safari* | | --- | --- | --- | --- | --- | --- | --- | | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark:|

* Indicates the current version of the browser In special cases lazy load polyfills for older browsers (+IE11 excluded) but not in first step of pregular