Skip to content

Instantly share code, notes, and snippets.

@SanderElias

SanderElias/mySample.component.ts

Last active October 21, 2022 14:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SanderElias/043e7904de7e10b9ba9a3ef948c3dde8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SanderElias/043e7904de7e10b9ba9a3ef948c3dde8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. SanderElias revised this gist Oct 21, 2022. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions mySample.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,21 @@
    import {Component, Inputs, InputDefault, html, css} from '@angular/core'

    export class MySampleComponent implements Component {
    #title = "world!"
    #title = "world!";
    selector: 'app-my-sample-component`;
    css = css`
    ul {
    list-style: none
    }
    `
    `;

    template: html`
    <H1>Hello {{#title}}</H1>
    <ul>
    <li *ngFor="let item of inputs.items | async">{{item.name}}</li>
    </ul>
    <footer>{{inputs.footerTest}}></footer>
    `
    `;

    inputs = Inputs({
    items: {
    @@ -26,6 +27,6 @@ export class MySampleComponent implements Component {
    default: '',
    typing: string
    }
    })
    });

    }
  2. SanderElias created this gist Oct 21, 2022.
    31 changes: 31 additions & 0 deletions mySample.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    import {Component, Inputs, InputDefault, html, css} from '@angular/core'

    export class MySampleComponent implements Component {
    #title = "world!"
    css = css`
    ul {
    list-style: none
    }
    `

    template: html`
    <H1>Hello {{#title}}</H1>
    <ul>
    <li *ngFor="let item of inputs.items | async">{{item.name}}</li>
    </ul>
    <footer>{{inputs.footerTest}}></footer>
    `

    inputs = Inputs({
    items: {
    default: InputDefault.none, // works like replaySubject, only emits after first value
    observable: true,
    typing: Item[]
    },
    footerTest: {
    default: '',
    typing: string
    }
    })

    }