@yoursabhishekabhi7/modal-popup-ng-all/README.md

Reusable Angular modal popup components supporting Angular 14 to 18

# Angular Modal Popup Example

This project demonstrates how to implement modal popups in an Angular application using the `modal-popup-angular-14` package.

## Table of Contents

- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Component Example](#component-example)
- [Complete Code Structure](#complete-code-structure)
- [Live Demo](#live-demo)
- [License](#license)

## Installation

To install the `modal-popup-angular-14` package, run the following command:
npm i modal-popup-angular-14@latest

## setup
````bash
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModalPopUpModule } from 'modal-popup-angular-14';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    Test1Component,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModalPopUpModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }
````

## usage
<!-- app.component.html -->
````bash
interface ModalOptions {
  title?: string;
  body?: string;
  data?: any;
  size?: {
    minWidth?: string;
    width?: string;
    maxWidth?: string;
    minHeight?: string;
    height?: string;
    maxHeight?: string;
  };
}
import { Component } from '@angular/core';
import { Test1Component } from './test1/test1.component';
import { ModalService } from 'modal-popup-angular-14';
import { ReactiveJsonFormsService } from 'json-reactive-form-angular-14';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  constructor(public modal: ModalService) { }

  OpenPopUp() {
    this.modal.open(Test1Component, { title: "Test Compoments", body: "kaise hoo Aap", data: {} })
  }
}

<!-- Get Data Test1Component used MODAL_DIALOG_DATA -->
import { Component, OnInit } from '@angular/core';
import { ModalService,DATA_MODAL_DIALOG_DATA } from 'modal-popup-angular-14';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.scss']
})
export class Test1Component implements OnInit {

  constructor(public modal: ModalService, @Inject(DATA_MODAL_DIALOG_DATA) public modalData: any) { }

  ngOnInit(): void {
    console.log(this.modalData, "DATA_MODAL_DIALOG_DATA")
  }
}
````
## Live Demo
You can view and run the example project live on StackBlitz: [link](https://stackblitz.com/edit/angular-ivy-4mpeft?file=src%2Fmain.ts).