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 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
2.1 Write Toast components and stylesToastComponent <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:
|
<<: Solution to Linux not supporting all commands
>>: Steps to initialize the password after the first successful installation of MySQL
This article example shares the specific code of ...
You can save this logo locally as a .rar file and...
Table of contents 1. Database constraints 1.1 Int...
Docker official documentation: https://docs.docke...
A style sheet describes how a document should be ...
This may be an issue that is easily overlooked. F...
Table of contents 1. Introduction 2. Environmenta...
The operating environment of this tutorial: Windo...
Recorded the installation and use tutorial of MyS...
Preface: In the MySQL system, there are many diff...
Adding a network interface to the container 1 Run...
Dynamically adding form items iview's dynamic...
HTML tags explained 1. HTML tags Tag: !DOCTYPE De...
Installation Steps 1. Create a virtual machine 2....
The <tfoot> tag is used to define the style...