0.0.0 • Published 4 years ago
@pregular/core v0.0.0
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
0.0.0
4 years ago