# Angular scroll-dropdown Example

This project demonstrates how to implement scroll-dropdown in an Angular application using the `scroll-dropdown-angular-18` 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 `scroll-dropdown-angular-18` package, run the following command:
npm i scroll-dropdown-angular-18@latest

## setup
````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 { RouterOutlet } from '@angular/router';
import { ModalOpenComponent, ModalService } from 'scroll-dropdown-angular-18';
import { HomeComponent } from './home/home.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,HomeComponent, ModalOpenComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers:[ModalService]
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  constructor(public modal:ModalService){}
  
  open(){
    this.modal.open(HomeComponent,{title:"kljaskldasdsa",body:"",data:{name:"Helloo"}})
  }
}
````
## usage

````bash
<!-- Get Data HomeComponent used MODAL_DIALOG_DATA -->
import { Component, OnInit } from '@angular/core';
import { ModalService,DATA_MODAL_DIALOG_DATA } from 'scroll-dropdown-angular-14';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
  providers: [ModalService]
})
export class HomeComponent 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-standalone-route-ohj4jz?file=src%2Fmain.ts).