Skip to content
This repository was archived by the owner on Oct 14, 2024. It is now read-only.

entire app disabled, not only target in angular 17 #40

@remdra

Description

@remdra

In angular 17 standalone app, the entire app is disabled, not only the target part.

Steps to reproduce:

  1. create a new app: ng new signal-busy --skip-tests --standalone --no-ssr --directory=. --style=scss

  2. install ng-busy: npm i ng-busy

  3. add in angular.json:
    "styles": [
    ...
    "node_modules/ng-busy/src/style/busy.css"
    ]

  4. add in styles.scss:
    html,
    body {
    height: 100%;
    }

  5. add in app.config.ts:
    export const appConfig: ApplicationConfig = {
    providers: [ ..., importProvidersFrom([BrowserAnimationsModule]) ],
    };

  6. add in app.componet.ts:
    @component({
    ...
    imports: [..., NgBusyModule],
    })
    export class AppComponent {
    ...
    busy: Subscription[] | undefined[] = [undefined, undefined, undefined];

    simulate(idx: number): void {
    this.busy[idx] = of(void 0).pipe(delay(4000)).subscribe();
    setTimeout(() => { this.busy[idx] = undefined; }, 5000);
    }
    }

  7. add in app.component.scss:
    button {
    font-size: 25px;
    padding: 10px;
    margin: 5px;
    }

:host {
display: flex;
height: 100%;
}

div {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}

  1. replace app.component.html with:
    <div [ngBusy]="busy[0]">
    <button (click)="simulate(0)">Click Me!</button>
    </div>
    <div [ngBusy]="busy[1]">
    <button (click)="simulate(1)">Click Me!</button>
    </div>
    <div [ngBusy]="busy[2]">
    <button (click)="simulate(2)">Click Me!</button>
    </div>

Click any button. Entire app is disabled, instead of the coresponding part.
signal-busy.TGZ

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions