A tiny package to create angular component as functions.
Disclaimer: This is a very experimental library. You might not use it in production for now.
The goal of this project is to experiment a new way to make stateless component without using class nor multiple files nor angular cli.
- hello.component.ts
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'std-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelloComponent {
@Input()
world = 'world';
@Output()
toggle: EventEmitter<any> = new EventEmitter<any>();
constructor() {}
}
- hello.component.html
<p>Hello, <span (click)="toggle.emit($event)">{{ world }}</span>!</p>
- hello.component.css
p {
color: red;
}
- fhello.component.ts
import { css, html, StatelessComponent } from 'angular-function-component';
export const FHelloComponent = StatelessComponent(
'fc-hello',
['[world]', '(toggle)'],
html`
<p>Hello, <span (click)="toggle.emit($event)">{{world}}</span>!</p>
`,
css`
p {
color: red;
}
`,
);
- app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
msg(msg: string, event: any) {
console.log(msg, event);
}
}
- app.component.html
<table>
<tr>
<th>HelloComponent</th>
<th>FHelloComponent</th>
</tr>
<tr>
<td>
<std-hello world="all" (click)="msg('std-hello', $event)"></std-hello>
</td>
<td>
<fc-hello world="all" (click)="msg('fc-hello', $event)"></fc-hello>
</td>
</tr>
</table>
As we use html and css template tag like lit-element or others libraries/frameworks, we can find some editor/IDE extensions to doing it.
For VSCode/VSCodium, you can install these:
- html : https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
- css : https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components
html and css tags are just alias to String.raw that do pretty nothing on the string. The only goal to create these alias is to have editor's coloration and completion.
More details about String.raw can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw
No. This lib aims to only wrap standard angular things to let us write component without the full syntax when it is not needed.
- let us create simple component
- let us create component with input properties
- let us create component with output properties (or emit event)
- publish to npm
- add default input value
- clean up all code