0.0.6 • Published 9 months ago
deprecated-ui v0.0.6
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
- Button
props |
---|
no specs |
- Player
№ | prop | Type |
---|---|---|
1 | source | string |
2 | Audio name | string |
3 | author name | string |
- Icon - no necessary props
Directives
- Ripple
№ | prop | Type |
---|---|---|
1 | ripple color | string |
- Drag N Drop - no props
Services
- 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
- 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