Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
_loadingSub
|
Type : Subscription
|
Default value : new Subscription()
|
|
|
|
Public
loading
|
Type : boolean
|
Default value : false
|
|
|
|
Public
requests
|
Type : Service[]
|
Default value : []
|
|
|
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'
import { Subscription } from 'rxjs'
import { Service } from '../service.interface'
@Component({
selector: 'app-loading-indicator',
templateUrl: './loading-indicator.component.html',
styleUrls: ['./loading-indicator.component.scss'],
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class LoadingIndicatorComponent implements OnInit, OnDestroy {
public loading: boolean = false
public requests: Service[] = []
private _loadingSub: Subscription = new Subscription()
constructor() {}
ngOnInit(): void {}
ngOnDestroy(): void {
this._loadingSub.unsubscribe()
}
}
<div class="loading-indicator">
<clr-signpost>
<span
clrSignpostTrigger
class="spinner spinner-sm spinner-inverse"
[style.display]="loading ? 'inline-block' : 'none'"
></span>
<clr-icon
clrSignpostTrigger
shape="check"
size="20"
class="is-info"
[style.display]="
!loading && requests.length > 0 && requests[0].successful
? 'inline-block'
: 'none'
"
></clr-icon>
<clr-icon
clrSignpostTrigger
shape="error"
size="24"
class="is-error"
[style.display]="
!loading && requests.length > 0 && !requests[0].successful
? 'inline-block'
: 'none'
"
></clr-icon>
<clr-signpost-content [clrPosition]="'bottom-middle'" *clrIfOpen>
@for (request of requests; track request) {
<p>
<code>{{ request.program }}</code>
@if (request.running) {
<span class="running">loading</span>
}
@if (!request.running && request.successful) {
<span class="success">loaded</span>
}
@if (!request.running && !request.successful) {
<span class="fail">failed</span>
}
</p>
}
</clr-signpost-content>
</clr-signpost>
</div>
Legend
Html element with directive