npi

ngx-popover-image

ngx-popover-image

Showing:

Popularity

Downloads/wk

6

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Description

The library it's compatible with bootstrap 3 and angular 4 and it's possible add a image as a help to message.

Demo.

https://angular-popover-image.stackblitz.io

https://stackblitz.com/edit/angular-popover-image

angular 4 popover-image

Installation

To install this library, run:

$ npm install ngx-popover-image --save

Consuming your library

You can import your library in any Angular application by running:

$ npm install ngx-popover-image

and then from your Angular AppModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, ViewChild} from '@angular/core';
import {Component} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgxPopoverImageModule} from 'ngx-popover-image';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
class AppComponent {

    public imageUrl = 'image.svg';
    image = 'https://www.completedietsolutions.org/Member/completedietsolutions/Images/woman-smiling-png-e1422243041656.png';
    constructor() {
    }
}

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, NgxPopoverImageModule]
})
class AppModule {
}

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

<ngx-popover-content #myPopover
                 title="Popover title"
                 placement="right"
                 [animation]="true"
                 [imageUrl]="imageUrl"
                 [closeOnClickOutside]="false" >
    <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>.
    <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>.
    <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>.
    <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
</ngx-popover-content>
<br><br><br><br><br>
<button [popoverImage]="myPopover" class="btn btn-danger">popover.</button>

Options

  • image: source image url
  • customClass: default value ''

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Milver Flores Acevedo

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial