A docs-friendly code viewer with optional line numbers. Copy is implemented externally via tng-copy-button.
import { Component, input } from '@angular/core';
@Component({
selector: 'tng-button',
standalone: true,
template: '<button>{{ label() }}</button>',
})
export class ButtonComponent {
label = input<string>('Click me');
}import { Component, computed, input } from '@angular/core';
@Component({
selector: 'tng-button',
standalone: true,
template: '<button type="button" [class]="klass()"><ng-content /></button>',
})
export class ButtonComponent {
variant = input<'primary' | 'outline'>('primary');
klass = computed(() => {
const base = 'rounded-md px-3 py-2 text-sm font-semibold';
const primary = 'bg-[color:var(--primary)] text-white';
const outline = 'border border-slate-200 text-slate-800';
return [base, this.variant() === 'primary' ? primary : outline].join(' ');
});
}import { Component, computed, input } from '@angular/core';
@Component({
selector: 'tng-button',
standalone: true,
template: '<button type="button" [class]="klass()"><ng-content /></button>',
})
export class ButtonComponent {
variant = input<'primary' | 'outline'>('primary');
klass = computed(() => {
const base = 'rounded-md px-3 py-2 text-sm font-semibold';
const primary = 'bg-[color:var(--primary)] text-white';
const outline = 'border border-slate-200 text-slate-800';
return [base, this.variant() === 'primary' ? primary : outline].join(' ');
});
}{
"name": "tailng",
"tagline": "Scalability of Angular. Simplicity of Tailwind.",
"openSource": true
}npm i @tailng-ui/ui