Chuyển đến nội dung chính

Angular: Toast Notification

Hiển thị thông báo và cảnh báo là một trong những tính năng cần thiết cho website. Trong bài viết này, mình hướng dẫn các bạn tích hợp Toast Notification vào hệ thông.

Toast là một popup thông báo, được hiển thị cho người dùng với nội dung tin nhắn có thể đọc được ở cuối màn hình hoặc tại một vị trí cụ thể và tự động biến mất sau vài giây.

Cài đặt

npm install ngx-toastr --save
npm install @angular/animations --save

Thiết lập

Mở file angular.json, thêm toastr.css như sau:

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]
Mở file app.module.ts, thêm BrowserAnimationsModule, ToastrModule:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, 
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added 
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
Trường hợp bạn muốn sử dụng ToastService trong app.component.ts
import { ToastrService } from 'ngx-toastr';

@Component({...})
export class YourComponent {
	constructor(private toastr: ToastrService) {}

	showSuccess() {
		this.toastr.success('Hello world!', 'Toastr fun!');
	}
	showToaster() {
		// Display a warning toast, with no title
		// Hiển thị cảnh báo của toastr không tiêu đề
		this.toastr.warning(
		  'My name is Inigo Montoya. You killed my father, prepare to die!'
		);

		// Display a success toast, with a title
		// Thông báo hiển thị thành công
		this.toastr.success('Have fun storming the castle!', 'Miracle Max Says', {
		  timeOut: 5000,
		});

		// Display an error toast, with a title
		// Thông báo hiển thị lỗi
		this.toastr.error(
		  'I do not think that word means what you think it means.',
		  'Inconceivable!',
		  { timeOut: 5000 }
		);
		// Remove current toasts using animation
		//this.toastr.clear()
		// Override global options
		this.toastr.success(
		  'We do have the Kapua suite available.',
		  'Turtle Bay Resort',
		  { timeOut: 5000 }
		);
	}
}

Tham khảo thêm các options khác tại đây: ToastR Github

Xem ví dụ ở:  https://stackblitz.com/edit/angular-ivy-ernvvo?file=src%2Fapp%2Fapp.component.ts

Nhận xét

Bài đăng phổ biến từ blog này

[ASP.NET MVC] Authentication và Authorize

Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh. Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin.

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Tổng hợp một số kiến thức lập trình về Amibroker

Giới thiệu về Amibroker Amibroker theo developer Tomasz Janeczko được xây dựng dựa trên ngôn ngữ C. Vì vậy bộ code Amibroker Formula Language sử dụng có syntax khá tương đồng với C, ví dụ như câu lệnh #include để import hay cách gói các object, hàm trong các block {} và kết thúc câu lệnh bằng dấu “;”. AFL trong Amibroker là ngôn ngữ xử lý mảng (an array processing language). Nó hoạt động dựa trên các mảng (các dòng/vector) số liệu, khá giống với cách hoạt động của spreadsheet trên excel.