Deprecated UI - Easy Component Library

The Deprecated UI component library is the pinnacle of innovation and efficiency, offering developers a comprehensive suite of reliable and modern solutions. Seamlessly integrated with Angular, this library empowers you to effortlessly upgrade your deprecated UI components and embrace the future of web development. With its intuitive interface, extensive customization options, and advanced features, Deprecated UI streamlines the process of refactoring your applications, ensuring a smooth transition to the latest industry standards. Experience the power of Angular Deprecated UI and unlock limitless creativity in designing visually stunning, high-performance web applications.

Specifications

Components

1. Button

| props | |----------| | no specs |

2. Player

| № | prop | Type | |---:|-----------:|------:| | 1 | source | string| | 2 | Audio name | string| | 3 | author name| string|

3. Icon - no necessary props

Directives

1. Ripple

| № | prop | Type | |---:|-------------:|------:| | 1 | ripple color | string|

2. Drag N Drop - no props

Services

1. Dialog Service

| № | prop | Type | what is this prop | |--:|-----------:|-----------------:|-----------------------------------------------:| | 1 | width | number | window width | | 2 | height | number | window height | | 3 | background | string | window background | | 4 | template | TemplateRef | template for which will be projected in window |

Important You need crete CSS variables for primary and secondary color and need crete CSS vars for --btnColor or else appearance will does-not work correctly

Usages

1. Window

  import { Component, DestroyRef, inject, TemplateRef } from '@angular/core';
import { AppWrapperComponent } from '@deprecated-ui/cdk';
import { DialogService } from '@deprecated-ui/components';

@Component({
  standalone: true,
  imports: [AppWrapperComponent, DialogService],
  providers: [DialogService],
  template: `<dui-app-wrapper>
              <dui-button (click)="open()">face</dui-button>
             </dui-app-wrapper>
             `
})
export class AppComponent {
  private dialog = inject(DialogService);
  private destroyRef = inject(DestroyRef)

  public openDialog(template: TemplateRef<any>) {
    this.dialog.open(DialogComponent, {
        width: 200,
        height: 200,
        template: template
      }, { test: 'data' }
    )
      .pipe(takeUntilDestoyed(this.destroyRef))
      .subscribe()
  }
}

Questions:

Q: Why i need a subscribe for open the Dialog?

A: Because method open returns observable

Q: What is data?

A: It is unnecessary prop for window. This prop produce data what your want to your window