0.0.0 • Published 4 years ago

@pregular/core v0.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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

PlannedImplemented
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*EdgeSafari*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