Showing posts with label angular 2. Show all posts
Showing posts with label angular 2. Show all posts
bower-videogular-analytics

bower-videogular-analytics

September 07, 2018
Videogular analytics plugin repository for distribution on bower.

Install

Install Videogular analytics plugin with Bower:
bower install videogular-angulartics

Install Videogular

Install Videogular with Bower:
bower install videogular

Install themes

Install Videogular themes with Bower:
bower install videogular-themes-default

Install plugins

Install Videogular plugins with Bower:
bower install videogular-controls
bower install videogular-overlay-play
bower install videogular-poster

Documentation

It's available on Videogular's project Wiki.

License

The MIT License (MIT)

Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
bower-videogular-ima-ads

bower-videogular-ima-ads

August 30, 2018
Videogular ima-ads plugin repository for distribution on bower.

Install

Install Videogular ima-ads plugin with Bower:
 bower install videogular-ima-ads  

You must add this script to your head tag:
 <script type='text/javascript'>  
      var googletag = googletag || {};  
      googletag.cmd = googletag.cmd || [];  
      (function() {  
           var gads = document.createElement('script');  
           gads.async = true; gads.type = 'text/javascript';  
           gads.src = 'http://www.googletagservices.com/tag/js/gpt.js';  
           var node = document.getElementsByTagName('script')[0];  
           node.parentNode.insertBefore(gads, node);  
      })();  
 </script>  
For more info about how to use IMA ads visit Google's IMA ads website.

Install Videogular

Install Videogular with Bower:
 bower install videogular  

Install Videogular themes

Install Videogular themes with Bower:
 bower install videogular-themes-default  

Install Videogular plugins

Install Videogular plugins with Bower:
 bower install videogular-buffering  
 bower install videogular-overlay-play  
 bower install videogular-controls  

Documentation

It's available on Videogular's project Wiki.

License

The MIT License (MIT)
Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ng-sidebar

ng-sidebar

November 14, 2017
Angular sidebar component. https://echeung.me/ng-sidebar

Installation

 npm install --save ng-sidebar  

SystemJS configuration

If you're using SystemJS, be sure to add the appropriate settings to your SystemJS config:
 var map = {  
  // ...  
  'ng-sidebar': 'node_modules/ng-sidebar',  
  // ...  
 };  
 var packages = {  
  // ...  
  'ng-sidebar': {  
   main: 'lib/index',  
   defaultExtension: 'js'  
  },  
  // ...  
 };  

Changelog

See the releases page on GitHub.

Usage

Add SidebarModule to your app module:
 import { SidebarModule } from 'ng-sidebar';  
 @NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, SidebarModule.forRoot()],  
  bootstrap: [AppComponent],  
 })  
 class AppModule {}  
In your app component, simply use add a wrapper, then place your (s) and content within it. Your page content should be in some container with a ng-sidebar-content attribute.
 @Component({  
  selector: 'app',  
  template: `  
   <!-- Container for sidebar(s) + page content -->  
   <ng-sidebar-container>  
    <!-- A sidebar -->  
    <ng-sidebar [(opened)]="_opened">  
     <p>Sidebar contents</p>  
    </ng-sidebar>  
    <!-- Page content -->  
    <div ng-sidebar-content>  
     <button (click)="_toggleSidebar()">Toggle sidebar</button>  
    </div>  
   </ng-sidebar-container>  
  `  
 })  
 class AppComponent {  
  private _opened: boolean = false;  
  private _toggleSidebar() {  
   this._opened = !this._opened;  
  }  
 }  
If nothing seems to show up, your wrappers' heights may be collapsing. Try adding a height (e.g. height: 100vh;) to the wrapper or other wrapper elements you may have. (See issue #100 for more info.)
A directive is also provided to easily close the sidebar by clicking something inside it:

 <ng-sidebar>  
  <a closeSidebar>Closes the sidebar</a>  
 </ng-sidebar>  
You can also use the open() and close() functions:
 <ng-sidebar #sidebar>  
  <button (click)="sidebar.close()">Close sidebar</button>  
 </ng-sidebar>  
 <button (click)="sidebar.open()">Open sidebar</button>  

Functions

The sidebar has a few public functions:
Function Description
open() Opens the sidebar.
close() Closes the sidebar.
triggerRerender() Manually trigger a re-render of the container. Useful if the sidebar contents might change.
 

Styling

Various class names are attached to the sidebar and container for easier styling.
If you are using Angular's default emulated view encapsulation, you may have to use the >>> selector to target the sidebar's classes. Check out Angular's documentation for more details. Note that the /deep/ selector will soon be deprecated.

Sidebar

Class name Description
ng-sidebar Always on the sidebar element.
ng-sidebar--opened When opened is true.
ng-sidebar--closed When opened is false.
ng-sidebar--left When position is 'left' (or the 'start'/'end' aliases are equivalent to 'left').
ng-sidebar--right When position is 'right' (or the 'start'/'end' aliases are equivalent to 'right').
ng-sidebar--top When position is 'top'.
ng-sidebar--bottom When position is 'bottom'.
ng-sidebar--over When mode is 'over'.
ng-sidebar--push When mode is 'push'.
ng-sidebar--slide When mode is 'slide'.
ng-sidebar--docked When the sidebar is docked (i.e. it is "closed" and dock is true).
ng-sidebar--inert Ignores pointer clicks. Class is applied when the sidebar is closed.
ng-sidebar--animate When animate is true for a sidebar.

Backdrop

Class name Description
ng-sidebar__backdrop Class of the backdrop div. Note that the div is only in the DOM when the backdrop is shown.

Page content

Class name Description
ng-sidebar__content Class of the wrapper div for the page content.
ng-sidebar__content--animate When animate is true for the container.

Options

 <ng-sidebar-container>  

Inputs

 

Property name Type Default Description
contentClass string
Additional class name on the div wrapping the page contents.
backdropClass string
Additional class name on the overlay element.
showBackdrop boolean false Controls the backdrop state of the sidebar container. This should be two-way bound.
allowSidebarBackdropControl boolean true Determines if the container component respects the sidebar's showBackdrop input option.
animate boolean true Animates the container sliding.

Outputs

Property name Callback arguments Description
showBackdropChange showBackdrop: boolean Emitted when showBackdrop is modified. This allows for you to do "two-way binding" (i.e. [(showBackdrop)]).

<ng-sidebar>

Inputs

Property name Type Default Description
opened boolean false Controls the opened state of the sidebar. This should be two-way bound.
mode 'over', 'push', 'slide' 'over' See the "Modes" section.
dock boolean false Show the sidebar as docked when closed.
dockedSize string '0px' When mode is set to 'dock', this value indicates how much of the sidebar is still visible when "closed".
position 'left', 'right', 'top', 'bottom', 'start', 'end' 'start' What side the sidebar should be docked to. 'start' and 'end' are aliases that respect the page's language (e.g. start is the same as left for English, but would be right for Hebrew.
autoCollapseHeight number
Window height in pixels in which to automatically close the sidebar.
autoCollapseWidth number
Window width in pixels in which to automatically close the sidebar.
animate boolean true Animate the opening/closing of the sidebar.
sidebarClass string
Additional class name on the sidebar element.
ariaLabel string
Value for the sidebar's aria-label attribute.
trapFocus boolean false Keeps focus within the sidebar when open. Note that this only works if there's one sidebar open at a time.
autoFocus boolean true Automatically focus the first focusable element in the sidebar when opened.
showBackdrop boolean false If a translucent black backdrop overlay should appear over the page contents when the sidebar is opened. This is ignored if the sidebar's parent container has its allowSidebarBackdropControl property set to true.
closeOnClickBackdrop boolean false Whether clicking on the backdrop of the open sidebar will close it.
closeOnClickOutside boolean false Whether clicking outside of the open sidebar will close it.
keyClose boolean false Close the sidebar when a keyboard button is pressed.
keyCode number 27 The key code for keyClose.

Outputs

Property name Callback arguments Description
openedChange opened: boolean Emitted when opened is modified. This allows for you to do "two-way binding" (i.e. [(opened)]).
onOpenStart
Emitted when the sidebar is opening.
onOpened
Emitted when the sidebar is opened.
onCloseStart
Emitted when the sidebar is closing.
onClosed
Emitted when the sidebar is closed.
onModeChange mode: string Emitted when mode is changed.
onPositionChange position: string Emitted when position is changed.

Modes

over This is the default mode. The sidebar slides in over the page contents.
push
The page contents is pushed to make space for the sidebar.
slide
The entire page slides over to show the sidebar. Note that this only works if you have one sidebar open at a time.

Note: Special thanks to Eugene Cheung
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ng-inline-svg

ng-inline-svg

November 13, 2017
Angular directive for inserting an SVG file inline within an element. https://echeung.me/ng-inline-svg/

Formerly called ng2-inline-svg

Angular directive for inserting an SVG inline within an element, allowing for easily styling with CSS like fill: currentColor;.

This is based on md-icon, except this is meant purely for inserting SVG files within an element, without the extra things like font icons.

Installation

 npm install --save ng-inline-svg  
IMPORTANT: If you're using a version of Angular prior to v4.3.0, you must use ng-inline-svg v3.4.0 or earlier.

Usage

Add InlineSVGModule to your list of module imports:
 import { InlineSVGModule } from 'ng-inline-svg';  
 @NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, InlineSVGModule],  
  bootstrap: [AppComponent]  
 })  
 class AppModule {}  
If you want to configure the base URL, you can use the forRoot function:
 InlineSVGModule.forRoot({ baseUrl: 'https://mysite.com/myapp/' })  
If you want to configure the base URL later, use the service's function:
 import { SVGCacheService } from 'ng-inline-svg';  
 class YourComponent {  
  constructor(svgService: SVGCacheService) {  
   svgService.setBaseUrl({ baseUrl: 'https://mysite.com/myapp/' });  
  }  
 }  
You can then use the directive in your templates:
 @Component({  
  selector: 'app',  
  template: `  
   <div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>  
  `  
 })  
 export class AppComponent {  
 }  
The SVG file (if found) will be inserted inside the element with the [inlineSVG] directive. Support for icons using the symbol method is also supported (e.g. [inlineSVG]="'#shape-id'").

Options

Inputs

Property name Type Default Description
cacheSVG boolean true Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page.
prepend boolean false Inserts before the first child instead of appending, overwrites replaceContents
replaceContents boolean true Replaces the contents of the element with the SVG instead of just appending it to its children.
injectComponent boolean false Injects an <inline-svg> component containing the SVG inside the element with the directive.
removeSVGAttributes string[]
An array of attribute names to remove from all child elements within the SVG.
forceEvalStyles boolean false Forces embeded style tags' contents to be evaluated (for IE 11).
evalScripts 'always', 'once', 'none' 'always' Whether to evaluate embedded scripts in the loaded SVG files.
fallbackImgUrl string
URL for a regular image to be displayed as a fallback if the SVG fails to load.

Outputs

Property name Callback arguments Description
onSVGInserted e: SVGElement Emits the SVGElement post-insertion.
onSVGFailed e: any Emits when there is some error (e.g. embed SVG not supported, fetch failed, etc.)

Note: Special thanks to Eugene Cheung
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
angular-connect-demo

angular-connect-demo

November 10, 2017
Angular Connect 2016 VR demo

Prerequisites

You need to have Node.js and npm
  • Support Node v4 - latest
  • Support npm v3 - latest

Installation

 npm install  

NPM commands

Start development server:
 npm start  
Build app for development:
 npm run build  
Start production server:
 npm run start:prod  
Build app for production:
 npm run build:prod  

License

MIT
Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
videogular2

videogular2

November 09, 2017
Videogular is an HTML5 video player for Angular 2.0. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

You can see a demo here: https://videogular.github.io/videogular2-showroom/#/

Documentation: https://videogular.github.io/videogular2

How to install

To get up and running quickly, check out the getting started guide.

NPM commands

Run start to compile the project, execute tests and check coverage:
 npm start  
Run build to compile the project:
 npm run build  
Run test to test the project:
 npm test  
Run coverage to check the coverage report:
 npm run coverage  
To start the example app run the following commands and open http://localhost:8080:
 cd examples  
 npm install  
 npm run build  
 npm start  

Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.