Angular Hero Component

About this module

A standalone Angular hero component driven by `@Input` data — title, subtitle, eyebrow and CTAs.

Installation

1. 1

   Install Angular

   Create or open an Angular project (Angular 16+ for standalone components).

   npx @angular/cli@latest new my-app --standalone

2. 2

   Create the component files

   Create HeroComponent.component.ts, .html and .scss and paste the matching sources below.

3. 3

   Declare it

   Import the component into your standalone component or NgModule.

   import { HeroComponentComponent } from "./hero-component/HeroComponent.component";
   
   @Component({
     imports: [HeroComponentComponent],
     // ...
   })

4. 4

   Use it

   Render the component in a template.

   <app-hero-component></app-hero-component>

Usage

1. 1

   Import

   Import HeroComponentComponent where needed.

   import { HeroComponentComponent } from "./hero-component.component";

2. 2

   Render

   Add the selector to your template.

   <app-hero-component></app-hero-component>