// beta-tag.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-beta-tag',
  standalone: true,
  template: `<span class="tag">Beta</span>`,
  styles: [`.tag { background: purple; color: white; padding: 2px 10px; border-radius: 10px; }`],
})
export class BetaTagComponent {}

// app.component.ts
import { Component } from '@angular/core';
import { BetaTagComponent } from './beta-tag/beta-tag.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [BetaTagComponent],
  template: `
    <h1>My App</h1>
    <app-beta-tag></app-beta-tag>
  `,
})
export class AppComponent {}

/*
  Notes:
  - BetaTagComponent uses template/styles (inline) instead of
    templateUrl/styleUrl — no separate .html/.css files exist for it.
  - AppComponent also uses an inline template here, just to show both
    styles work the same way regardless of which component uses them.
*/