Code Playground.

I'll explain step by step tutorial how to produce angular 8 toaster oven announcements. it's simple illustration of how to use toaster oven in angular 8. I ’m going to show you about toaster oven alert in angular 8. Then you'll learn toaster oven alert angular 8. 

We'll use ngx- toastr npm package for toastr announcement in angular 8 operation. we need to install two npm packages ngx- toastr and@angular/ robustness that give to use success, error, warning and word alert dispatches. 

I'll give you veritably simple illustration and step by step so you can fluently apply toaster oven announcement in your angular 8 operation. you can see bellow exercise for alert too. 

Step 1 create New App 

You can fluently produce your angular 8 app using bellow command 

ng new my-new- app 

Step 2 Install Toastr 

In this step, we will install ngx- toastr and@angular/animations npm packages. so let's run both command as like bellow.

npm install ngx-toastr --save

npm install @angular/animations --save

Now, we need to include toastr css like "node_modules/ngx-toastr/toastr.css", so let's add it onangular.json file.

angular.json

.....
    "styles": [
      "node_modules/ngx-toastr/toastr.css",
      "src/styles.css"
    ],
.....

Step 3 Import Module 

In this step, we need to import ToastrModule and BrowserAnimationsModule toapp.module.ts file. so let's import it as like bellow: 

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Create Service for Notification

Then, we will produce separate announcement for Toastr. so you can use showSuccess(), showError(), showInfo() and showWarning() in any element.

so let's put bellow code: 

run bellow command:

ng generate service notification

src/app/notification.service.ts

import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
  
@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  
  constructor(private toastr: ToastrService) { }
  
  showInfo(message, title){
      this.toastr.info(message, title)
  }
  
  showWarning(message, title){
      this.toastr.warning(message, title)
  }

  showSuccess(message, title){
      this.toastr.success(message, title)
  }
  
  showError(message, title){
      this.toastr.error(message, title)
  }
  
}

Step 5: Updated View File

Now here, we will updated our html file. we will create simple four buttons for alert messages.

so let's put bellow code:

src/app/app.component.html

<h1>Angular 8 Toastr Notifications Example - Apna Video Wala</h1>
  
<button class="error" (click)="showToasterError()">
    Error Toaster
</button>

<button class="success" (click)="showToasterSuccess()">
    Success Toaster
</button>
  
<button class="warning" (click)="showToasterWarning()">
    Warning Toaster
</button>

<button class="info" (click)="showToasterInfo()">
    Info Toaster
</button>

Step 6: Use Component ts File

Now we need to modernize ourcomponent.ts file then we will use announcement service and call alert, let's modernize as like bellow 

src/app/app.component.ts

import { Component } from '@angular/core';
import { NotificationService } from './notification.service'
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'toaster-not';
  
  constructor(private notifyService : NotificationService) { }
  
  showToasterWarning(){
      this.notifyService.showWarning("This is warning", "Apna Video Wala")
  }
  
  showToasterError(){
      this.notifyService.showError("Something is wrong", "Apna Video Wala")
  }

  showToasterSuccess(){
      this.notifyService.showSuccess("Data shown successfully !!", "Apna Video Wala")
  }
  
  showToasterInfo(){
      this.notifyService.showInfo("This is info", "Apna Video Wala")
  }
  
}

Now we are ready to run both:

Run Angular App:

ng serve