Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
angular-busy2
Advanced tools
Readme
Show busy/loading indicators on Observable, Subscription, Promise, Boolean, Number
Install with npm.
npm install angular-busy2 --save
Add CgBusyModule
as a module dependency for your module.
You have to import it with forRoot
in any module where you want to provide CgBusyDefaults
.
Usually you do that in your root module (app.module
).
If you never import it with forRoot
CgBusyDefaults
will always be undefined
.
forRoot
takes optional CgBusyOptions
as parameter.
For every omitted option in the supplied CgBusyOptions
the libraries default value will be used.
import { CgBusyModule } from 'angular-busy2';
@NgModule({
imports: [
CgBusyModule.forRoot({
backdrop: true
}) //import it with .forRoot in your root module. provide some optional Options.
]
})
In every shared module/sub module you should import CgBusyModule
without forRoot
unless you want to provide a
different instance of CgBusyDefaults
import { CgBusyDirective } from 'angular-busy2';
@Component({
standalone: true,
imports: [CgBusyDirective],
// ...
})
// main.ts if you bootstrap application
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(CgBusyModule.forRoot())
// ...
]
}).catch(err => console.log(err));
The [cgBusy]
directive expects any Observable, Subscription, Promise, Boolean, Number and optional [cgBusyConfig]
configuration object.
In other words. You may do this:
<div [cgBusy]="promise"></div>
or this:
<div [cgBusy]="promise"
[cgBusyConfig]="{templateRef: customTemplate, message:message, backdrop:backdrop, delay:delay, minDuration:minDuration}"></div>
promise
- Required. The promise/Observables (or array of promises/Observables) that will cause the busy indicator to
show. Also supports boolean and numbers (truthy values will show loading...)message
- Optional. Defaults to 'Please Wait...'. The message to show in the indicator. This value may be updated
while the promise is active. The indicator will reflect the updated values as they're changed.backdrop
- Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.templateRef
- Optional. If provided, the given template will be shown in place of the default progress indicator
template.delay
- Optional. The amount of time to wait until showing the indicator. Defaults to 0. Specified in milliseconds.minDuration
- Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker.
Defaults to 0. Specified in milliseconds.wrapperClass
- Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy
sign/animation. Defaults to undefined
. Typically only useful if you wish to apply different positioning to the
animation.The default values for message
, backdrop
, templateRef
, delay
, and minDuration
may all be overridden by
overriding the CgBusyDefaults
, like so:
import { CgBusyDefaults } from 'angular-busy2';
class AppComponent {
@ViewChild('customTemplate')
private customTemplateTpl: TemplateRef<any>;
constructor(private busyDefaults: CgBusyDefaults) {
this.busyDefaults.delay = 5000;
}
ngOnInit() {
this.busyDefaults.templateRef = this.customTemplateTpl;
}
}
<ng-template #customTemplate let-options="options">
<div class="custom-template">
<div class="custom-message" [innerHtml]="options.message"></div>
</div>
</ng-template>
Only the values you'd like overridden need to be specified.
Fork from original angular-busy (cgBusy) https://github.com/cgross/angular-busy
FAQs
Angular Busy 2
The npm package angular-busy2 receives a total of 224 weekly downloads. As such, angular-busy2 popularity was classified as not popular.
We found that angular-busy2 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.