angular2-expandable-list

angular2-expandable-list

Expandable lists made easy for Angular2

angular2-expandable-list is an HTML <angular2-expandable-list> tag enhanced with styling and animation

Table of contents

• Installation
• Setup
• Usage
• Design your list
• Demo App
• Contributing
• Changelog
• License

Installation

1. Install the component using npm:

# To get the latest stable version and update package.json file:
$ npm install angular2-expandable-list --save

or yarn with:

$ yarn add angular2-expandable-list

Setup

If you are using System.js you may want to add this into map and package config:

{
  "map": {
      "angular2-expandable-list": "node_modules/angular2-expandable-list"
  },
  "packages": {
      "angular2-expandable-list": {
        "main": "index.js",
        "defaultExtension": "js"
      }
  }
}

If you are using Webpack you may want to add this into your vendor.js file:

// vendor.ts
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';

// Third parties packages
import 'rxjs';
import 'angular2-expandable-list';

angular2-expandable-list class is an Angular2 module therefore, it needs to be registered in the modules array (encouraged way):

// app.module.ts
import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { ExpandableListModule } from 'angular2-expandable-list';
import { AppComponent }         from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    ExpandableListModule // import Angular's ExpandableListModule modules
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage

Use the component anywhere around your application:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
  <expandable-list>
    <expandable-list-item>
      <span title>My List</span>
      <a item href="http://www.goo.gl">Google</a>
      <a item href="http://www.goo.gl">Google</a>
      <a item href="http://www.goo.gl">Google</a>
    </expandable-list-item>
  </expandable-list>
  `
})
export class AppComponent  { }

Design your list

List and list-item

The Angular2-expandable-list is composed of a <expandable-list> wrapper and one or more <expandable-list-item>. Start your list creating these 2 html tags in your template like this:

<expandable-list>
  <expandable-list-item></expandable-list-item>
</expandable-list>

Title and secondary

Now, each <expandable-list-item> needs a title and a list of elements. It is possible to create both a primary and a secondary title for each item like the following example.

<expandable-list>
  <expandable-list-item>
    <span title>Primary Title</span>
    <span secondary>Secondary</span>
  </expandable-list-item>
</expandable-list>

List items

Now you're ready to fill your list with some items.

<expandable-list>
  <expandable-list-item>
    <span title>Primary Title</span>
    <span secondary>Secondary</span>
    <a item href="http://www.goo.gl">Google</a>
    <a item href="http://www.goo.gl">Google</a>
    <a item href="http://www.goo.gl">Google</a>
  </expandable-list-item>
</expandable-list>

It is important to append the html attribute item to each of the item you want to render in the list and it's up to you which HTML tag to use. We've just filled our list with anchor link but feel free to use any other tag.

Dividers

<expandable-list>
  <expandable-list-item>
    <span title>Primary Title</span>
    <span secondary>Secondary</span>
    <a item href="http://www.goo.gl">Google</a>
    <a item href="http://www.goo.gl">Google</a>
    <expandable-list-divider item></expandable-list-divider>
    <a item href="http://www.goo.gl">Google</a>
  </expandable-list-item>
</expandable-list>

We still need to postfix the expandable-list-divider with the item attribute to see that divider rendered on the page.

Create more

Now you can create as many <expandable-list-item> nodes as you want inside your <expandable-list>.

<expandable-list>
  <expandable-list-item>
    <span title>Primary Title</span>
    <span secondary>Secondary</span>
    <a item href="http://www.goo.gl">Google</a>
    <a item href="http://www.goo.gl">Google</a>
    <expandable-list-divider item></expandable-list-divider>
    <a item href="http://www.goo.gl">Google</a>
  </expandable-list-item>

  <expandable-list-item>
    <span title>Another list</span>
    <a item href="http://www.goo.gl">Google</a>
    <a item href="http://www.goo.gl">Google</a>
  </expandable-list-item>
</expandable-list>

Demo App

Have a look at the demo available in this repository for a real Angular2 application using the Angular2-expandable-list library.

From your terminal all the Node dependencies using npm:

$ npm install
# Or Yarn
$ yarn install

Then initialize the application with:

$ npm run demo

Open your browser to http://localhost:8080/ to see the application running.

Contributing

This package is using the AngularJS commit messages as default way to contribute with commitizen node package integrated in this repository.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: npm run commit
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Changelog

Changelog available here

License

MIT License © Andrea SonnY