Creating a Standalone Component

Demonstrate how to create a standalone component in Angular that is not associated with any NgModule, focusing on a user card component that can be re-used throughout the application.

// user-card.component.ts
import { Component, Input } from '@angular/core';

// Define the component
@Component({
  selector: 'app-user-card',
  template: `
    <div class="user-card">
      <img [src]="user.avatar" alt="User Avatar">
      <h2>{{ user.name }}</h2>
      <p>{{ user.bio }}</p>
    </div>
  `,
  styles: [
    `.user-card {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin: 10px;
      display: inline-block;
      width: 200px;
    }
    .user-card img {
      max-width: 100%;
      border-radius: 50%;
    }`
  ]
})
export class UserCardComponent {
  @Input() user: any; // The user input is expected to be an object with 'name', 'avatar', and 'bio' properties
}

This piece of code defines a standalone Angular component 'UserCardComponent', including its HTML template and styles. The component is designed to display a user's information such as their name, avatar image, and bio. It is decorated with '@Component' which specifies the selector, template, and styles for the component. The '@Input' decorator is used to allow this component to receive a user object as an input.