Comments (7)
Hi.
To open window you can use DynamicWindowService
, documentation:
https://ngx-os.io/components/window/documentation
Example:
class AppComponent {
constructor(
private readonly dynamicWindowService: DynamicWindowService
) {
this.dynamicWindowService.open(MyReusableDialogBoxComponent, {
title: 'Information',
data: { description: 'Are you sure you want to exit application?', iconUrl: 'http://url-a' }
}).afterClosed$.subscribe((result) => console.log(result));
// Result with data based on which button we clicked (see code below)
}
}
MyReusableDialogBoxComponent
@Component({
selector: 'my-reusable-dialog-box',
template: `
<ng-container *ngIf="config$ | async as config">
<img [attr.src]="config.data.iconUrl" />
{{ config.data.description }}
<button osButton (click)="onYesButtonClick()">Yes</button>
<button osButton (click)="onNoButtonClick()">No</button>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyReusableDialogBoxComponent {
public readonly config$ = this.windowRef.config$;
constructor(
@Inject(DYNAMIC_WINDOW_REF) private readonly windowRef: DynamicWindowRef<MY_DATA_TYPE>
) {
// You can update dynamically config with title & data using windowRef
this.windowRef.updateConfig({ title: 'New title', data: { description: 'New description', iconUrl: 'http://url-b' } });
}
public onYesButtonClick(): void {
this.windowRef.close('MY_YES_RESULT'); // Probably true
}
public onNoButtonClick(): void {
this.windowRef.close('MY_NO_RESULT'); // Probably false
}
}
from ngx-os.
this.dynamicWindowService.open
method also returns DynamicWindowRef
, so you can also updateConfig
outside of your MyReusableDialogBoxComponent
as well using this DynamicWindowRef
.
from ngx-os.
Okay, let me try out that.. thanks
from ngx-os.
@ippezshelby I edited my answer a little. I removed the injection of SHARED_CONFIG. It was incorrect approach. Instead, we should get a concrete config of our window from the windowRef (not shared config of all windows).
from ngx-os.
@dreyliky Thanks, I checked it out and was able to make it work..
I was wondering though on how to have multi level menu structure. The current examples are for single level menus
from ngx-os.
@ippezshelby Currently library doesn't support a multi-level menu
from ngx-os.
@dreyliky how do i use this library in non-angular projects like in a native html application as a compile .js file.
from ngx-os.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-os.