Ngm-popover NPM

ngm-popover

Screenshot

###to angular 4, 5, 6 , 7 use the 0.1.5 version This library support to angular 8. There are options to

Demo

https://demo-ngm-popover.stackblitz.io

https://stackblitz.com/edit/demo-ngm-popover

Installation

To install this library, run:

$ npm install ngm-popover --save

Options

Function name	Description
`maxWidth`	The default value is `400px`. this value it's going to set in the style `max-width`
`minWidth`	The default value is `200px`. this value it's going to set in the style `min-width`
`placement`	The default value is `auto` but you can to change the value with these options `bottom-right` , `bottom-left`, `top-left`, `top-right`, `right`, `left`, `top` and `bottom`

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ngm-popover --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
  
import { AppComponent } from './app.component';  
  
// Import your library  
import  { NgmPopoverModule }  from  'ngm-popover';  
  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
  
    // Specify your library as an import  
    NgmPopoverModule.forRoot()
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->  
<div id="specify" class="content active">
	<a class="btn btn-default" [popover]="popoverId">
		 <i class="glyphicon glyphicon-cloud"></i>
	</a>  
</div>  

<ngm-popover #popoverId placement="auto">   
 <b>Very</b> <span style="color: #C21F39">Dynamic</span>
 <span style="color: #00b3ee">Reusable</span>  
 <b><i><span style="color: #ffc520">Popover With</span></i></b>  
 <small> Html support</small>  
  and <span style="color: #C21F39"> autoposition</span>.  
  <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>  
 <b><i><span style="color: #ffc520">Popover With</span></i></b>  
 <small> Html support</small>  
  and <span style="color: #C21F39"> autoposition</span>.  
</ngm-popover>