https://github.com/passenger6/ngx-aside

Simple angular sidebar panel
https://github.com/passenger6/ngx-aside

angular angular-2 angular-components typescript

Last synced: 3 months ago
JSON representation

Simple angular sidebar panel

• Host: GitHub
• URL: https://github.com/passenger6/ngx-aside
• Owner: passenger6
• Archived: true
• Created: 2016-10-27T12:03:13.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-25T14:34:42.000Z (about 6 years ago)
• Last Synced: 2024-09-19T12:33:30.481Z (3 months ago)
• Topics: angular, angular-2, angular-components, typescript
• Language: TypeScript
• Homepage:
• Size: 422 KB
• Stars: 22
• Watchers: 5
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - ngx-aside - Simple angular sidebar panel (Uncategorized / Uncategorized)

README

        
# NgxAside

Angular Aside Component. Simple Angular Sidebar Panel.

  



[Demo](https://stackblitz.com/edit/github-2w7ln4?file=src%2Fapp%2Fapp.module.ts)



# Installation

```shell

npm install --save ngx-aside

yarn add ngx-aside

```

# Usage

```TypeScript

//app.module.ts

import { NgxAsideModule } from 'ngx-aside';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

    imports: [

        NgxAsideModule,

        BrowserAnimationsModule

        ]

    })

```

For animations please import the ```BrowserAnimationsModule```.

```Html

           

Show Sidebar panel

```

You can disable default header and footer of panel

```Html    

    [showDefaultFooter]="false"

    [showDefaultHeader]="false"

```

Add custom header and footer to the panel

```Html

    

    

        My own header with own styles

        

    

        

            My own footer, with custom buttons

            

                Close

            

        

    

    

```

# Screenshots

 Position left |  Position right

 ------------ | -------------

![alt text](screenshot.png "Sidebar panel.") | ![alt text](screenshot-right.png "Sidebar panel.")


Custom header and footer |  

![alt text](screenshot-custom.png "Sidebar panel.") |

# NgxAsideDemo

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.5.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build --prod ngx-aside` to build the library. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## publish

After making build go to relevant directory and hit `npm update && npm publish`

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).