Design and implementation of an Angular Dialog component

Hello, I am yanyun Changfeng meaning: combined with Li Bai’s famous border fortress poem “Guan Shanyue” take [Yanyun Changfeng] – changfeng tens of thousands of miles, blowing degrees of Jade gate.

Yycf-dialog is a common Angular based business component library that includes Loading, Message, and Confirm. Front-end stack: Angular, TypeScript, RxJS advanced implementation of this Dialog component, two days after its release to the NPM market, the component was downloaded 451 times, as an opportunity for more people to understand and use it. To give you a better idea of what is going on with Angular 8.0, here are a couple of online diagrams:

This is what Loading is doing

This is the confirm effect

This is the message effect

The installation

 npm install yycf-dialog
Copy the code

use

import { DialogModule, DialogService} from 'yycf-dialog/components';

<yycf-dialog [key]="' 1 '"></yycf-dialog>
<yycf-dialog [key]="' 2 '"></yycf-dialog>
<yycf-dialog [key]="' 3 '"></yycf-dialog> // Custom footer button requires custom button style, or directly use other component library button <yycf-dialog [key]="' 4 '" #ct>
  <yycf-footer>
    <button class="customButtonClass" (click)="ct.accept()"<button> <button class="customButtonclass" (click)="ct.reject()"<button> <yycf-footer> <yycf-dialog>export class DialogDemo  implements OnInit{ 
           
    constructor(private dialog: DialogService) {}
 
    ngOnInit(){

    this.dialog.confirm(
      {
        message:'Are you sure you want to delete? ',
        header:'warning',
        okVisible:true,
        offVisible:true,
        okButton:'blue',
        offButton:'green',
        okLabel:``,
        key:"1",
        offLabel: ``,
        accept:()=>{
              this.dialog.confirm({
                message:'Deleted',
                header:'ok',
                okVisible:true,
                offVisible:false,
                okButton:'blue',
                offButton:'red',
                okLabel:``,
                key:"2",
                // delay:3000,
                offLabel: ``,
                accept:()=>{
                  this.dialog.confirm({
                    message:'Is loading like mad... ',
                    header:'waiting',
                    okVisible:false,
                    offVisible:false,
                    okButton:'blue',
                    offButton:'green',
                    okLabel:``,
                    key:"3", // delay:3000, offLabel: ``, accept:()=>{ }, reject:()=>{ } }) }, reject:()=>{ } }) }, reject:()=>{ } }); }}Copy the code

Document Parameters

PS: If the return value of the callback function is false, the dialog box is not closed after executing the callback function.

DialogService API

  let dia = this.dialog.confirm({
      message:'Loading like hell',
      header:'warning',
      okVisible:true,
      offVisible:true,
      okButton:'blue',
      offButton:'green',
      okLabel:``,
      offLabel: ``,
    });
 setTimeout(() => dia.close(),3000)
Copy the code

Implementation of the Service class

import {Injectable} from "@angular/core";
import {ReplaySubject} from "rxjs";
import {Dialog} from "./dialog";
@Injectable()
export class DialogService{
  zIndex: number = 10000;
  private requireDialogSource = new ReplaySubject<Dialog>(1);
  requireDialogSource$ = this.requireDialogSource.asObservable();
  confirm(dialog: Dialog) {
    this.zIndex++;
    this.requireDialogSource.next(dialog);
    return this;
  }
  close() { this.requireDialogSource.next(null); }} Exploits the replay feature of RXJS ReplaySubject, which is equivalent to BehaviorSubjectCopy the code

Implementation of component classes

export class DialogComponent implements OnDestroy,OnInit{
  @Input() header = 'waiting';
  @Input() key:string;
  @Input() width = "auto";
  @Input() height = "auto";
  @Input() opacity = .5;
  @Input() message = 'yycf-dialog component';
  @Input() okLabel = 'sure';
  @Input() offLabel = 'cancel';
  @Input() zIndex:number;
  @Input() okVisible = true;
  @Input() offVisible = true;
  @Input() okButton = 'primary';
  @Input() offButton = 'secondary';
  @Input() visible:boolean;
  @Input() delay:number;
  dialog:Dialog;
  @ContentChild(Footer) footer;
  subscription:Subscription;
  constructor(
    private dialogService:DialogService
  ) {
    
  }
  accept() {
    if(this.dialog.acceptEvent) {
      this.dialog.acceptEvent.emit();
    }else{ this.hide(); this.dialog = null; }}reject() {
    if(this.dialog.rejectEvent) {
      this.dialog.rejectEvent.emit();
    }else{ this.hide(); this.dialog = null; }}hide() {
    this.visible = false;
  }
  ngOnInit() {
    this.subscription = this.dialogService.requireDialogSource$.subscribe(dialog=>{
      if (dialog == null) {
        this.hide();
        return;
      }
      if(dialog.key === this.key){ this.dialog = dialog; this.message = this.dialog.message||this.message; this.okLabel = this.dialog.okLabel||this.okLabel; this.offLabel = this.dialog.offLabel||this.offLabel; this.okVisible = this.dialog.okVisible ==null? this.okVisible:this.dialog.okVisible; this.offVisible = this.dialog.offVisible ==null? this.offVisible:this.dialog.offVisible; this.zIndex = this.dialogService.zIndex ||this.zIndex; this.header = this.dialog.header || this.header; this.opacity = this.dialog.opacity || this.opacity; this.delay = this.dialog.delay||this.delay; this.okButton = this.dialog.okButton||this.okButton; this.offButton = this.dialog.offButton||this.offButton;if(this.dialog.accept) {
          this.dialog.acceptEvent = new EventEmitter();
          this.dialog.acceptEvent.subscribe(()=>{
            let isClose = this.dialog.accept();
            if(isClose ! = =false){ this.hide(); this.dialog = null; }})}if(this.dialog.reject) {
          this.dialog.rejectEvent = new EventEmitter();
          this.dialog.rejectEvent.subscribe(
            ()=>{
              let isClose = this.dialog.reject();
              if(isClose ! = =false){ this.hide(); this.dialog = null; }}); }if(this.delay&&this.delay! =0){ timer(this.delay).subscribe(val => this.visible =false);
        }
        this.visible = true; }}); }ngOnDestroy() {if(this.subscription){
      this.subscription.unsubscribe();
    }
  }
}
@NgModule({
  imports:[CommonModule],
  declarations:[DialogComponent,Footer],
  exports:[DialogComponent,Footer]
})
export class DialogModule{
    
}
Copy the code

This is the core code design and implementation, if you need more comprehensive code, please visit: tyht this is the NPM package address, please visit: yycf-dialog

My personal blog

• YanYun changfeng

A series of projects I worked on

1. NiceFish: Mermaid is a micro-blog system with a front-end based on Angular7.0 + PrimeNG7.1.0. (The most valuable open source project of GVIP code cloud 3160 ☆)
2. Nicefish-react: This is an implementation of the React version, consistent with the NiceFish Angular version. React Hooks version 16.8.3, developed using TypeScript, Ant Design component libraries, and Bootstrap V4.2.1. (7) being
3. OpenWMS-Frontend: The OpenWMS project Frontend is based on Angular 7.0 + PrimeNG 7.1.0. (recommended 199 ☆)
4. Nicefish-spring-cloud: This is the server-side code for Nicefish, based on SpringCloud. Some basic functions have been completed, such as SpringSecurity+OAuth2+JWT for SSO, paging queries for articles, users, comments, etc. If you need to dock with this back-end code, check out the for-Spring-Cloud branch of this project. (113 ☆)

My social page

• Yan Yun Long wind github

That’s all for today’s sharing. I wish you all the best, happy work and happy every day.

Long wind tens of thousands of miles, blowing yumen Pass.