1.0.1 • Published 5 years ago
an-messages v1.0.1
Messages module for Angular6+ applications
Installation
Download from npm
npm install --save an-messages
Angular installation
In app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AnMessagesModule } from 'an-messages';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AnMessagesModule.forRoot(), // <-- import here, forRoot() is necessary
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
In app.component.html
<an-messages></an-messages>
In your component
import { AnMessagesService } from 'an-messages';
constructor(private messagesService: AnMessagesService){}
Then anywhere in your app, third parameter is options.
this.messagesService.message_add('succ', 'Message that we want to show', 3000);
this.messagesService.message_add('err', 'Message that we want to show', 3000);
this.messagesService.message_add('info', 'Message that we want to show');
Edit css
Main wrapper class z-index for .an-messages is 9000
.an-messages {
// <-- wrapper
&--item {
// <-- messages item
}
&--succ {
// <-- styles for succ
}
&--err {
// <-- styles for err
}
&--info {
// <-- styles for info
}
}