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
Recent Comments