// success-message.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-success-message',
  standalone: true,
  template: `<p class="box">Saved successfully!</p>`,
  styles: [`.box { background: green; color: white; padding: 8px; }`],
})
export class SuccessMessageComponent {}

// error-message.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-error-message',
  standalone: true,
  template: `<p class="box">Something went wrong.</p>`,
  styles: [`.box { background: red; color: white; padding: 8px; }`],
})
export class ErrorMessageComponent {}

// app.component.ts
import { Component } from '@angular/core';
import { SuccessMessageComponent } from './success-message/success-message.component';
import { ErrorMessageComponent } from './error-message/error-message.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SuccessMessageComponent, ErrorMessageComponent],
  template: `
    <app-success-message></app-success-message>
    <app-error-message></app-error-message>
  `,
})
export class AppComponent {}

/*
  Notes:
  - Both child components use a class called .box internally, with
    opposite background colors — green for success, red for error.
  - Because Angular scopes each component's styles automatically,
    both render correctly side by side: SuccessMessageComponent's
    .box never picks up ErrorMessageComponent's red, and vice versa.
*/