https://github.com/thecodinghouse/ng2-popover
An angular 2 popover component using bootstrap.
https://github.com/thecodinghouse/ng2-popover
Last synced: 7 months ago
JSON representation
An angular 2 popover component using bootstrap.
- Host: GitHub
- URL: https://github.com/thecodinghouse/ng2-popover
- Owner: thecodinghouse
- Created: 2016-04-05T08:17:44.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-29T13:54:48.000Z (over 9 years ago)
- Last Synced: 2025-06-28T07:41:19.065Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## An Angular2 popover component with bootstrap presets
**```ng2-popover```** provides angular 2 popover using bootstrap css.
In addition to a simple popover with a title and content, **```ng2-popover```** can also dynamically load a component on popover.
### Popover properties
- `popover` (`string`) - Text to be displayed as title
- `popoverPlacement` (`?string='top'`) - Popover positioning instruction, supported positions: 'top', 'bottom', 'left', 'right'
- `popoverContent` (`?string`) - Text to be displayed as content
- `popoverComponent` (`?getPopoverComponent()`) - Binds `popoverComponent` to the response of method `getPopoverComponent()`
- `popoverOnClick` (`?boolean`) - Show popover on click
### Demo
To run the demo locally follow these steps :
git clone https://github.com/tixdo/ng2-popover.git
npm install
typings install
webpack-dev-server // development, webpack -p to build.
browse to localhost:4200
### Usage
Import **```PopoverModule```** and add in your module's imports.
```typescript
import { PopoverModule } from './ng2-popover/popover.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
PopoverModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
- **A simple popover with a title and content**
For a simple popover add follwing popover properties on a DOM element.
`popover`=" text for Popover title"
`popoverContent`="text for Popover content "
`popoverPlacement`="position"
In given example a popover will be displayed on a input tag.
``` html
```
- **A popover with a dyanamic component as content**
For loading a component dynamically on popover add follwing popover properties on a DOM element.
`popover`= " text for Popover title"
`[popoverComponent]` = "getDynamicInput()"
`popoverPlacement`="position"
`getPopoverComponent()` is a method which returns a component that will be loaded on popover.
> Note : import the component to be loaded and include in module's imports.
In the example given below a popover will be displayed on a anchor tag with a dynamic component
`About` as content.
app.component.ts :
```typescript
import {AboutComponent} from './about/about.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(
) {}
getDynamicInput(){
return AboutComponent;
}
}
```
app.html :
``` html
Hover to load dynamic component on poppver
```
### Reference
- https://github.com/valor-software/ng2-bootstrap