Hello to all,  welcome to my world oh mean to say welcome to therichpost.com. Thank to blogging, now I am getting better in my english and writing skills.

Let’s come to the point, In this post, I will tell you, How to implement Slimscroll  in Angular 7? and this is very interesting.

Here is the working picture:

I must sure that, you all like this post and this post will be helpful to all. Slimscroll  is in very in demand because it makes div scroll bar or any other scroll bar looks better and perfect.

I already do this in Angular 6 and you all like it very much and here is the working link:

https://therichpost.com/angular-slimscroll-bar

Here are the steps to Implement Slimscroll  in Angular 7 Application:

1. Very first, here are the some commons commands to include Angular 7 Application on your machine:

$ npm install -g @angular/cli

$  ng new angularslimscroll // Set Angular7 Application on your pc

$ cd angularslimscroll // Go inside project folder

$ ng serve // Run project

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

2. Now, come to main thing, run below command to add slimscroll into Angular 7 App:

$ npm install ngx-slimscroll

3. After all above commands, come to the coding side. Add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSlimScrollModule, SLIMSCROLL_DEFAULTS } from 'ngx-slimscroll';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgSlimScrollModule
  ],
  providers: [{
      provide: SLIMSCROLL_DEFAULTS,
      useValue: {
        alwaysVisible: false,
        gridOpacity: '0.2', barOpacity: '0.5',
        gridBackground: '#fff',
        gridWidth: '6',
        gridMargin: '2px 2px',
        barBackground: '#fff',
        barWidth: '20',
        barMargin: '2px 2px'
      }
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { Component, OnInit, EventEmitter } from '@angular/core';
import { ISlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  opts: ISlimScrollOptions;
  scrollEvents: EventEmitter<SlimScrollEvent>;
    ngOnInit() {
    
  this.scrollEvents = new EventEmitter<SlimScrollEvent>();
    this.opts = {
      position: "right", // left | right
      barBackground: "red", // #C9C9C9
      barOpacity: "0.8", // 0.8
      barWidth: "10", // 10
      barBorderRadius: "20", // 20
      barMargin: "0", // 0
      gridBackground: "#d9d9d9", // #D9D9D9
      gridOpacity: "1", // 1
      gridWidth: "2", // 2
      gridBorderRadius: "20", // 20
      gridMargin: "0", // 0
      alwaysVisible: true, // true
      visibleTimeout: 1000, // 1000

    }
    }
}

5. Finally output time, add below code into your app.component.html file:

<style>
.scroll-window {
    width: 100%;
    height: 300px;
    font-size: 13px;
    padding: 10px;
    font-size: 15px;
    line-height: 20px;
    color: #000;
}
</style>
<div class="jumbotron text-center">
  <h1>Angular Slim Scroller Bar
</h1>
</div>
<div class="scroll-window" slimScroll [options]="opts" [scrollEvents]="scrollEvents">
  <p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.
For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.
The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.
For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.
The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.
For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.
The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.
For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.
The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.
For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.
The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.
For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.
The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
</div>

This is it, if you have any query related to this post, then please do comment below or ask question.

Thank you

Jatt Souda

TheRichPost

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 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 7. I am very happy for Angular 7.

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

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

Here are the working steps you need to follow:

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

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

3. 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,

Jatt

TheRichPost