Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SEO-136418 Angular Dialog #3

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

SEO-136418 Angular Dialog #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b63924f
SEO-136418-Angular-Dialog-GitHub
Scholar-jaruha Jun 7, 2023
7842bc2
Update README.md
Scholar-jaruha Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 60 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Getting Started with the Angular Dialog Component

A quick start project that shows how to add Angular Dialog component to the Angular CLI project and bind local and remote data sources to it. This project also includes a code snippet to drag, resize and position the dialog, create an overlay behind the dialog, and render the dialog using an HTML button element.

Examples: https://ej2.syncfusion.com/angular/demos/#/material/dialog/default

Documentation: https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/
A quick start project that shows how to add [Angular Dialog](https://www.syncfusion.com/angular-components/angular-modal-dialog?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples) component to the Angular CLI project and bind local and remote data sources to it. This project also includes a code snippet to drag, resize and position the dialog, create an overlay behind the dialog, and render the dialog using an HTML button element.

# Project pre-requisites

Expand Down Expand Up @@ -34,3 +30,62 @@ npm install

Run ng serve command for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.


## Features and benefits

### Draggable

The Angular modal dialog can be moved anywhere in a page by dragging its header, which is performed by using the Draggable library.

### Overlays

Angular Modal dialogs create overlays on open modal windows that provide options for a user to control the closing behavior of a dialog while interacting with it.

### Additional dialogs

Users can launch multiple dialogs simultaneously or one above the other based on their z-index (z-depth) to make additional dialogs (nested modal dialogs).

### Animation

A variety of smooth, built-in animations are available to configure for the opening and closing of modal dialogs. They perform based on CSS3 animation from the Animation library.

### Resizable

The Angular modal dialog can be resized from any of the edges or borders of the dialog within the target container by using its handle (grip) or hovering on it.

## Related links

[Learn More about Angular Dialog](https://www.syncfusion.com/angular-components/angular-modal-dialog?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Download Free Trial](https://www.syncfusion.com/downloads/angular/confirm?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Documentation](https://ej2.syncfusion.com/angular/documentation/dialog/getting-started?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Online example](https://ej2.syncfusion.com/demos/#/material/dialog/default.html?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Community Forums](https://www.syncfusion.com/forums/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/angular?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)

[Knowledge base](https://support.syncfusion.com/kb?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)



### About Syncfusion Angular UI Components

Syncfusion's Angular UI Components library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to Angular Dialog, we provide popular Angular Components such as [DataGrid](https://www.syncfusion.com/angular-components/angular-grid?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Scheduler](https://www.syncfusion.com/angular-components/angular-scheduler?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Diagram](https://www.syncfusion.com/angular-components/angular-diagram?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), and [Word Processor](https://www.syncfusion.com/angular-components/angular-word-processor?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples).


### About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-modal-dialog-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:sales@syncfusion.com?Subject=Syncfusion Angular modal Dialog - GitHub" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=angular-model-dialog-github-samples)">www.syncfusion.com</a> | Toll Free: 1-888-9 DOTNET <br>
</p>