ⴷangular

use it

Import the element once, and add CUSTOM_ELEMENTS_SCHEMA to the components that use it:

1import { Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';2import 'glorpies/element';3 4@Component({5  selector: 'user-badge',6  schemas: [CUSTOM_ELEMENTS_SCHEMA],7  template: `<glorpie-face [name]="email()" size="40" [label]="name()"></glorpie-face>`,8})9export class UserBadge {10  email = input.required<string>();11  name = input('Avatar');12}

Every option is both an attribute and a property, so [name] and [attr.name] bindings both work for strings. Use [name] for a numeric seed: attribute bindings turn numbers into string names.

errors

If a face fails to paint, the element dispatches glorpie-error with the error as detail. Call preventDefault() to suppress the console.error.

1<glorpie-face [name]="user.id" (glorpie-error)="report($event.detail); $event.preventDefault()"></glorpie-face>

server rendering

With Angular SSR the element is rendered as an empty tag and upgrades in the browser. Size it in CSS to reserve its space:

1glorpie-face { width: 40px; height: 40px; }