import { Component } from '@angular/core';
import { WrPageHeader } from 'ngwr/page-header';

@Component({ imports: [WrPageHeader] })
export class MyComponent {}

<wr-page-header title="Settings" subtitle="Manage your workspace">
  <div wrPageHeaderActions>
    <wr-btn>Invite</wr-btn>
    <wr-btn color="primary">Save</wr-btn>
  </div>
</wr-page-header>

<wr-page-header title="Billing" subtitle="Plan, invoices and payment method">
  <wr-breadcrumbs wrPageHeaderBreadcrumbs>
    <wr-breadcrumbs-item>Workspace</wr-breadcrumbs-item>
    <wr-breadcrumbs-item>Billing</wr-breadcrumbs-item>
  </wr-breadcrumbs>

  <div wrPageHeaderActions>
    <wr-btn outlined>Download invoices</wr-btn>
    <wr-btn color="primary">Change plan</wr-btn>
  </div>

  <!-- ng-container: the row does not space a wrapper's children. -->
  <ng-container wrPageHeaderExtra>
    <wr-tag color="success">Active</wr-tag>
    <wr-tag>Pro</wr-tag>
  </ng-container>
</wr-page-header>