Skip to content

Commit b4d8b21

Browse files
SwabianCoderSwabianCoder
authored
Merge pull request #108 from SwabianCoder/docs/75-write-a-meaningful-readme-for-ngx-toolset-lazy-dialogs
Docs/75 write a meaningful readme for ngx toolset lazy dialogs
2 parents 19a4ee0 + 20ed176 commit b4d8b21

File tree

3 files changed

+224
-14
lines changed

3 files changed

+224
-14
lines changed

‎projects/lazy-dialogs/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [1.0.0-rc.2] - 2022-08-19
9+
10+
### Added
11+
12+
- Meaningful README content
13+
814
## [1.0.0-rc.1] - 2022-08-17
915

1016
### Added

‎projects/lazy-dialogs/README.md‎

Lines changed: 217 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,228 @@
1-
# LazyDialogs
1+
# @ngx-toolset/lazy-dialogs
22

3-
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
3+
[![Build & Release](https://github.com/SwabianCoder/ngx-toolset/actions/workflows/build_release_lazy-dialogs.yml/badge.svg)](https://github.com/SwabianCoder/ngx-toolset/actions/workflows/build_release_lazy-dialogs.yml)
4+
[![npm version](https://badge.fury.io/js/@ngx-toolset%2Flazy-dialogs.svg)](https://badge.fury.io/js/@ngx-toolset%2Flazy-dialogs)
5+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/SwabianCoder/ngx-toolset/blob/main/LICENSE)
6+
![](https://img.shields.io/badge/Keep%20a%20Changelog-v1.0.0-brightgreen.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmMTVkMzAiIHZpZXdCb3g9IjAgMCAxODcgMTg1Ij48cGF0aCBkPSJNNjIgN2MtMTUgMy0yOCAxMC0zNyAyMmExMjIgMTIyIDAgMDAtMTggOTEgNzQgNzQgMCAwMDE2IDM4YzYgOSAxNCAxNSAyNCAxOGE4OSA4OSAwIDAwMjQgNCA0NSA0NSAwIDAwNiAwbDMtMSAxMy0xYTE1OCAxNTggMCAwMDU1LTE3IDYzIDYzIDAgMDAzNS01MiAzNCAzNCAwIDAwLTEtNWMtMy0xOC05LTMzLTE5LTQ3LTEyLTE3LTI0LTI4LTM4LTM3QTg1IDg1IDAgMDA2MiA3em0zMCA4YzIwIDQgMzggMTQgNTMgMzEgMTcgMTggMjYgMzcgMjkgNTh2MTJjLTMgMTctMTMgMzAtMjggMzhhMTU1IDE1NSAwIDAxLTUzIDE2bC0xMyAyaC0xYTUxIDUxIDAgMDEtMTItMWwtMTctMmMtMTMtNC0yMy0xMi0yOS0yNy01LTEyLTgtMjQtOC0zOWExMzMgMTMzIDAgMDE4LTUwYzUtMTMgMTEtMjYgMjYtMzMgMTQtNyAyOS05IDQ1LTV6TTQwIDQ1YTk0IDk0IDAgMDAtMTcgNTQgNzUgNzUgMCAwMDYgMzJjOCAxOSAyMiAzMSA0MiAzMiAyMSAyIDQxLTIgNjAtMTRhNjAgNjAgMCAwMDIxLTE5IDUzIDUzIDAgMDA5LTI5YzAtMTYtOC0zMy0yMy01MWE0NyA0NyAwIDAwLTUtNWMtMjMtMjAtNDUtMjYtNjctMTgtMTIgNC0yMCA5LTI2IDE4em0xMDggNzZhNTAgNTAgMCAwMS0yMSAyMmMtMTcgOS0zMiAxMy00OCAxMy0xMSAwLTIxLTMtMzAtOS01LTMtOS05LTEzLTE2YTgxIDgxIDAgMDEtNi0zMiA5NCA5NCAwIDAxOC0zNSA5MCA5MCAwIDAxNi0xMmwxLTJjNS05IDEzLTEzIDIzLTE2IDE2LTUgMzItMyA1MCA5IDEzIDggMjMgMjAgMzAgMzYgNyAxNSA3IDI5IDAgNDJ6bS00My03M2MtMTctOC0zMy02LTQ2IDUtMTAgOC0xNiAyMC0xOSAzN2E1NCA1NCAwIDAwNSAzNGM3IDE1IDIwIDIzIDM3IDIyIDIyLTEgMzgtOSA0OC0yNGE0MSA0MSAwIDAwOC0yNCA0MyA0MyAwIDAwLTEtMTJjLTYtMTgtMTYtMzEtMzItMzh6bS0yMyA5MWgtMWMtNyAwLTE0LTItMjEtN2EyNyAyNyAwIDAxLTEwLTEzIDU3IDU3IDAgMDEtNC0yMCA2MyA2MyAwIDAxNi0yNWM1LTEyIDEyLTE5IDI0LTIxIDktMyAxOC0yIDI3IDIgMTQgNiAyMyAxOCAyNyAzM3MtMiAzMS0xNiA0MGMtMTEgOC0yMSAxMS0zMiAxMXptMS0zNHYxNGgtOFY2OGg4djI4bDEwLTEwaDExbC0xNCAxNSAxNyAxOEg5NnoiLz48L3N2Zz4K)
47

5-
## Code scaffolding
8+
## Table of Contents
69

7-
Run `ng generate component component-name --project lazy-dialogs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lazy-dialogs`.
8-
> Note: Don't forget to add `--project lazy-dialogs` or else it will be added to the default project in your `angular.json` file.
10+
- [@ngx-toolset/lazy-dialogs](#ngx-toolsetlazy-dialogs)
11+
- [Features](#features)
12+
- [Installation](#installation)
13+
- [NPM](#npm)
14+
- [Usage](#usage)
15+
- [Module Import](#module-import)
16+
- [Dialog Container and Background Overlay Styles](#dialog-container-and-background-overlay-styles)
17+
- [Standalone Component](#standalone-component)
18+
- [Open Standalone Component Dialog](#open-standalone-component-dialog)
19+
- [NgModule Extending ModuleWithLazyDialog<T>](#ngmodule-extending-modulewithlazydialogt)
20+
- [Open Dialog Contained In NgModule](#open-dialog-contained-in-ngmodule)
921

10-
## Build
22+
## Features
1123

12-
Run `ng build lazy-dialogs` to build the project. The build artifacts will be stored in the `dist/` directory.
24+
- Creates (opens) a dialog via lazy loading (works with NgModule extending ModuleWithLazyDialog<T> as well as standalone components)
1325

14-
## Publishing
26+
## Installation
1527

16-
After building your library with `ng build lazy-dialogs`, go to the dist folder `cd dist/lazy-dialogs` and run `npm publish`.
28+
### NPM
1729

18-
## Running unit tests
30+
`npm install @ngx-toolset/lazy-dialogs --save`
1931

20-
Run `ng test lazy-dialogs` to execute the unit tests via [Karma](https://karma-runner.github.io).
32+
Choose the version corresponding to your Angular version:
2133

22-
## Further help
34+
| Angular | @ngx-toolset/lazy-dialogs |
35+
|---------|---------------------------|
36+
| 14.x.x | 1.x.x |
2337

24-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
38+
## Usage
39+
40+
### Module Import
41+
42+
Import the `LazyDialogModule` in your `AppModule`:
43+
44+
```ts
45+
import { NgModule } from '@angular/core';
46+
import { BrowserModule } from '@angular/platform-browser';
47+
import { AppComponent } from './app.component';
48+
import { LazyDialogModule } from '@ngx-toolset/lazy-dialogs';
49+
50+
@NgModule({
51+
declarations: [AppComponent],
52+
imports: [
53+
BrowserModule,
54+
LazyDialogModule.forRoot(),
55+
],
56+
bootstrap: [AppComponent],
57+
})
58+
export class AppModule {}
59+
```
60+
61+
### Dialog Container and Background Overlay Styles
62+
63+
Provide your own CSS styles for the dialog's container which can also act as the dialog's background overlay to the `forRoot` function of the `LazyDialogModule`:
64+
65+
```ts
66+
import { NgModule } from '@angular/core';
67+
import { BrowserModule } from '@angular/platform-browser';
68+
import { AppComponent } from './app.component';
69+
import { LazyDialogModule } from '@ngx-toolset/lazy-dialogs';
70+
71+
@NgModule({
72+
declarations: [AppComponent],
73+
imports: [
74+
BrowserModule,
75+
LazyDialogModule.forRoot({
76+
// Sample CSS styles
77+
position: 'fixed',
78+
left: 0,
79+
right: 0,
80+
bottom: 0,
81+
top: 0,
82+
'background-color': '#000000',
83+
opacity: 0.7,
84+
'z-index': 1000,
85+
width: '100%',
86+
height: '100%'
87+
}),
88+
],
89+
bootstrap: [AppComponent],
90+
})
91+
export class AppModule {}
92+
```
93+
94+
### Standalone Component
95+
96+
Sample standalone component:
97+
98+
```ts
99+
import { Component } from '@angular/core';
100+
import { LazyDialogRef } from '@ngx-toolset/lazy-dialogs';
101+
102+
@Component({
103+
selector: 'app-standalone-dialog-component',
104+
standalone: true,
105+
template: '<button (click)="onCloseClicked()">Mark as successful</button>',
106+
})
107+
export class StandaloneDialogComponent {
108+
public data: { firstName: string, lastName: string };
109+
110+
public constructor(private dialogRef: LazyDialogRef<{ firstName: string, lastName: string }>) {
111+
this.data = this.dialogRef.data;
112+
}
113+
114+
public onCloseClicked(): void {
115+
this.dialogRef.close({ succeeded: true });
116+
}
117+
}
118+
```
119+
120+
### Open Standalone Component Dialog
121+
122+
Sample component:
123+
124+
```ts
125+
import { Component } from '@angular/core';
126+
import { LazyDialogService } from '@ngx-toolset/lazy-dialogs';
127+
128+
@Component({
129+
selector: 'app-open-standalone-dialog-component',
130+
template: '<button (click)="onOpenDialogClicked()">Open dialog</button>',
131+
})
132+
export class OpenStandaloneDialogComponent {
133+
public constructor(private lazyDialogService: LazyDialogService) {
134+
this.data = this.dialogRef.data;
135+
}
136+
137+
public async onOpenDialogClicked(): Promise<void> {
138+
const componentType = import('../standalone-dialog/standalone-dialog.component')
139+
.then(c => c.StandaloneDialogType);
140+
141+
const dialogRef = this.dialogRef.create(
142+
componentType,
143+
{
144+
test: 'data',
145+
}
146+
);
147+
148+
const dialogOutput = await dialogRef.onClose();
149+
// Do sth. with the dialog output.
150+
}
151+
}
152+
```
153+
154+
### NgModule Extending ModuleWithLazyDialog<T>
155+
156+
Sample component:
157+
158+
```ts
159+
import { Component } from '@angular/core';
160+
import { LazyDialogRef } from '@ngx-toolset/lazy-dialogs';
161+
162+
@Component({
163+
selector: 'app-dialog-with-module-component',
164+
template: '<button (click)="onCloseClicked()">Close</button>',
165+
})
166+
export class DialogWithModuleComponent {
167+
public data: { emailAddress: string };
168+
169+
public constructor(private dialogRef: LazyDialogRef<{ emailAddress: string }>) {
170+
this.data = this.dialogRef.data;
171+
}
172+
173+
public onCloseClicked(): void {
174+
this.dialogRef.close();
175+
}
176+
}
177+
```
178+
179+
Sample NgModule:
180+
181+
```ts
182+
import { NgModule } from '@angular/core';
183+
import { DialogWithModuleComponent } from './dialog-with-module.component';
184+
import { ModuleWithLazyDialog } from '@ngx-toolset/lazy-dialogs';
185+
186+
@NgModule({
187+
declarations: [DialogWithModuleComponent],
188+
})
189+
export class DialogWithModuleComponentModule extends ModuleWithLazyDialog<DialogWithModuleComponent> {
190+
public getDialog(): typeof DialogWithModuleComponent {
191+
return DialogWithModuleComponent;
192+
}
193+
}
194+
```
195+
196+
### Open Dialog Contained In NgModule
197+
198+
Sample component:
199+
200+
```ts
201+
import { Component } from '@angular/core';
202+
import { LazyDialogService } from '@ngx-toolset/lazy-dialogs';
203+
204+
@Component({
205+
selector: 'app-open-dialog-with-module-component',
206+
template: '<button (click)="onOpenDialogClicked()">Open dialog</button>',
207+
})
208+
export class OpenDialogWithModuleComponent {
209+
public constructor(private lazyDialogService: LazyDialogService) {
210+
this.data = this.dialogRef.data;
211+
}
212+
213+
public async onOpenDialogClicked(): Promise<void> {
214+
const moduleType = import('../dialog-with-module-component/dialog-with-module-component.module')
215+
.then(m => m.DialogWithModuleComponentModule);
216+
217+
const dialogRef = this.dialogRef.create(
218+
moduleType,
219+
{
220+
test: 'data',
221+
}
222+
);
223+
224+
const dialogOutput = await dialogRef.onClose();
225+
// Do sth. with the dialog output.
226+
}
227+
}
228+
```

‎projects/lazy-dialogs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ngx-toolset/lazy-dialogs",
3-
"version": "1.0.0-rc.1",
3+
"version": "1.0.0-rc.2",
44
"description": "Angular lazy dialogs support via service",
55
"homepage": "https://github.com/SwabianCoder/ngx-toolset",
66
"license": "MIT",

0 commit comments

Comments
 (0)