Use Angular CDK to implement a Service pop-up Toast component function

Use Angular CDK to implement a Service pop-up Toast component function

In Angular, while developing the Material component library, the official team also developed a Component dev kit, which is the famous CDK in the Angular world. This toolkit provides many common functions for front-end development. Almost all well-known Angular component libraries rely on this development kit. Such as ANT, PrimeNG, etc.

This article mainly uses CDK to implement a simple Toast component, using the overlay module in CDK.

1. Environmental Installation

cdk is not a default module of angular, you need to install it manually yarn add @angular/cdk

Introduce OverlayModule in cdk in app.module

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OverlayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Create Toast components and ToastService

  • Use ng gc Toast command to quickly create a component template
  • Use ng gs Toast to create a Service template

2.1 Write Toast components and styles

ToastComponent

<div class="q-toast">
    <div class="q-toast-mask"></div>
    <p class="q-toast-msg">{{msg}}</p>
</div>

.q-toast {
  padding: .2rem .5rem;
  width: 5rem;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  

  .q-toast-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: .8;
    border-radius: 2rem;
  }

  .q-toast-msg {
    color: white;
    z-index: 999;
  }
}

ToastService

import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { Injectable, InjectionToken, Injector } from '@angular/core';
import { ToastComponent } from './toast.component';

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  constructor(private overlay: Overlay) { }

  Show(msg: string) {
    const config = new OverlayConfig();
    const positionStrategy = this.overlay.position()
      .global().centerVertically().centerHorizontally();
    config.positionStrategy = positionStrategy;
    let overlayRef = this.overlay.create(config);
    const inject = Injector.create({
      providers:
        {
          provide: Toast_Ref,
          useValue:overlayRef
        },
        {
          provide: Toast_Msg,
          useValue:msg
        }
      ]
    })
    console.log(inject.get<string>(Toast_Ref))
    let partal = new ComponentPortal(ToastComponent, null, inject);
    overlayRef.attach(partal)
    setTimeout(() => {
      overlayRef.detach()
      overlayRef.dispose();
    }, 2000);
  }

}

export const Toast_Ref = new InjectionToken<{}>('Toast_Ref');
export const Toast_Msg = new InjectionToken<{}>('Toast_Msg');

Using Toast

After writing the Service, Angular will inject it into the root module by default. You only need to write the corresponding ToastService in the construction method of the component where Toast needs to pop up, and it will run normally.

export class AppComponent {
  constructor(private toast:ToastService) {
  }
  test() {

    this.toast.Show('hello cdk!')
  }
}

GIF effect picture

This is the end of this article about using Angular CDK to implement a Service pop-up Toast component. For more information about Angular CDK implementing the Toast component, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed steps to implement drag and drop of page elements through angular CDK
  • Use Angular material theme to define the color scheme of your component library
  • Angular6 develops steps bar component
  • Angular 2 uses routing to customize the pop-up component toast operation example
  • Angular2 uses SVG to customize chart (bar chart, line chart) component example
  • Angular encapsulated search box component operation example

<<:  Solution to Linux not supporting all commands

>>:  Steps to initialize the password after the first successful installation of MySQL

Recommend

How to use HTML+CSS to create TG-vision homepage

This time we use HTML+CSS layout to make a prelim...

HTML+CSS+jQuery imitates the search hot list tab effect with screenshots

Copy code The code is as follows: <!DOCTYPE ht...

How to retrieve password for mysql 8.0.22 on Mac

Mac latest version of MySQL 8.0.22 password recov...

MySQL chooses the right storage engine

When it comes to databases, one of the most frequ...

Vue page monitoring user preview time function implementation code

A recent business involves such a requirement tha...

Tips for List Building for Website Maintenance Pages

And, many times, maintenance requires your website...

Case study of dynamic data binding of this.$set in Vue

I feel that the explanation of this.$set on the I...

jQuery canvas generates a poster with a QR code

This article shares the specific code for using j...

CSS solution for centering elements with variable width and height

1. Horizontal center Public code: html: <div c...

Vue practice of preventing multiple clicks

Generally, click events will be divided into diff...

How to run py files directly in linux

1. First create the file (cd to the directory whe...