Description

A loading message component for use inside c8y-loading with layout="stepper".

Each message is hidden by default and shown when the parent calls showStep(index). Use content projection to provide any HTML content for the loading step.

Note: This component does not perform any translation. If the displayed text needs to be translated, pass it in an already-translated form (e.g. via TranslateService or the translate pipe applied before binding).

<c8y-loading layout="stepper" #loader>
  <c8y-loading-message>Connecting to server…</c8y-loading-message>
  <c8y-loading-message>Fetching data…</c8y-loading-message>
</c8y-loading>
<button (click)="loader.showStep(1)">Next</button>

Implements

OnDestroy

Example

<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-loading layout=&quot;stepper&quot; #loader&gt;
  &lt;c8y-loading-message&gt;Connecting to server…&lt;/c8y-loading-message&gt;
  &lt;c8y-loading-message&gt;Fetching data…&lt;/c8y-loading-message&gt;
&lt;/c8y-loading&gt;
&lt;button (click)=&quot;loader.showStep(1)&quot;&gt;Next&lt;/button&gt;</code></pre></div>

<span hidden #source><ng-content /></span>
@if (isActive()) {
  <p class="text-medium">{{ displayText() }}</p>
}