Result

Large-illustration result / empty-state. Built-in statuses: success / warning / error / info / empty. Plus ready-made <wr-result-404>, <wr-result-403>, <wr-result-500> presets.

Installation

import { WrResult, WrResult404, WrResult403, WrResult500 } from 'ngwr/result';

@Component({ imports: [WrResult, WrResult404, WrResult403, WrResult500] })
export class MyComponent {}

Statuses

<wr-result status="success" title="Submitted!" description="We'll be in touch.">
  <button wr-btn color="primary" wrResultExtra>Continue</button>
</wr-result>

Submitted

Heads up

Failed

No projects

With an action

Project a control into the wrResultExtra slot to give the user a next step — e.g. a confirm screen with a primary button.

<wr-result status="success" title="Submitted!" description="We'll be in touch.">
  <button wr-btn color="primary" wrResultExtra>Continue</button>
</wr-result>

Submitted!

We'll be in touch.

Presets

Drop-in 404 / 403 / 500 pages. Pass title / description to override the defaults for localisation.

<!-- Pre-built variants for the common HTTP statuses. Override
     title / description for localisation. -->
<wr-result-404 />
<wr-result-403 />
<wr-result-500 />

<!-- Custom copy: -->
<wr-result-404 title="Lost?" description="That URL didn't lead anywhere." />

404

Sorry, the page you visited does not exist.

403

Sorry, you are not authorized to access this page.

500

Sorry, something went wrong.

API

NameDescriptionTypeDefault
titlestring''
descriptionstring''
statusWrResultStatus'info'