Author: therichpost

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Toastr Notifications Working Example.

Toastr Notifications are the well designed  popup message and easy to use and implement. Today I am implementing Toastr Notifications in Angular 9. I am very happy for Angular 9.

I am showing toastr notifications in Angular 9 button click event. We can use this in many ways.

Here is the working picture of Toastr Notifications in Angular 9 Application:

Here are the working steps you need to follow:

1. Here are the few commands to install Angular 9:

npm install -g @angular/cli 

ng new angulartoastr //Create new Angular Project

$ cd angulartoastr // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above commands, you need to below command to install toastr into your application:

npm install ngx-toastr --save

npm install @angular/animations --save

1. After all ablove, you need to add below into src/styles.css:

// regular style toast 
@import '~ngx-toastr/toastr.css';

4. Now, add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now add below code into your app.component.ts file:

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angulartoastr';
  constructor(private toastr: ToastrService) {}
  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!',
    {timeOut: 2000});;
  }
  showError() {
  this.toastr.error('everything is broken', 'Major Error', {
  timeOut: 3000
});
}
}

5. Now, finally add below code into app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Angular Toastr:
  </h1>
</div>
<button (click) = "showSuccess()">Oprn Angular Toastr Success</button>
<br/><br/>
<button (click) = "showError()">Oprn Angular Toastr Error</button>

Now, you done, if you have any query related to this post, then please do comment below or ask questions.

Thank you,

Jass

TheRichPost

Hello to all, welcome to therichpost.com. In this post, I will show you, Angular 9 image cropper working example.

Post Working:

In this post, I am showing how to crop image in Angular 9.

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 9 application on your machine:

$ npm install -g @angular/cli

$ ng new angularimage // Set Angular9 Application on your pc

cd angularimage // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. Now run below command into your terminal to include image cropper package into your angular 9 application:

npm install ngx-image-cropper --save

 

3. Now add below code into your app.module.ts file:

import { ImageCropperModule } from 'ngx-image-cropper';
@NgModule({
    imports: [
        ...
        ImageCropperModule
    ],

 

4. Add, below code into your app.component.ts file:

import { ImageCroppedEvent } from 'ngx-image-cropper';

export class YourComponent {

    imageChangedEvent: any = '';
    croppedImage: any = '';
    
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded() {
        // show cropper
    }
    cropperReady() {
        // cropper ready
    }
    loadImageFailed() {
        // show message
    }
}

 

5. Finally add below code into app.component.html file:

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

 

This is it and if you have any kind of query then please let me know. Don’t forget to run ng serve command.

Jas

Thank you

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 skeleton loader during API call.

Post Working:

In this post, I am showing skelton loader in Angular 8 during API call.

Here is the working code snippet and please follow carefully:

1. Very first, you need to run below commands to install Angular 8 fresh setup:

$ npm install -g @angular/cli

$ ng new angularloader // Set Angular8 Application on your pc

cd angularloader // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. You need to run below command to install Skelton Loader module into your Angular 8 setup:

npm install ngx-skeleton-loader --save

3. You need to add below code into your app.module.ts file:

import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { HttpClientModule } from '@angular/common/http';


 imports: [
...
 HttpClientModule,
 NgxSkeletonLoaderModule

...

 ]

 

4. Now add below code into your app.component.ts file:

import { HttpClient} from '@angular/common/http';

 export class AppComponent {

skeletonloader = true;
  data: any;
  constructor( private http: HttpClient) {
   
    this.http.get('http:YourAPiURL').subscribe(data => {
        this.data = data;
        this.skeletonloader = false;
        }, error => console.error(error));
   }

 }

 

5. Now add below code into your app.component.html file:

 

<ngx-skeleton-loader count="5" appearance="circle" *ngIf="skeletonloader"> </ngx-skeleton-loader>
    <div *ngIf="!skeletonloader"><h1>Data Loaded</h1></div>

 

This is it and if you have any query then please do comment below.

Jas

Thank you