npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-expandable-list

v0.0.2

Published

Expandable lists made easy for Angular2+

Downloads

6

Readme

angular-expandable-list

Expandable lists made easy for Angular

Angular Expandable List is an HTML <angular-expandable-list> tag enhanced with styling and animation. now compatible with Angular9 too.

screenshot

Table of contents

Installation

  1. Install the component using npm:
# To get the latest stable version and update package.json file:
$ npm install angular-expandable-list --save

or yarn with:

$ yarn add angular-expandable-list

Setup

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

{
  "map": {
    "angular-expandable-list": "node_modules/angular-expandable-list/bundles/angular-expandable-list.umd.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 'angular-expandable-list';

angular-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 'angular-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>
      <expandable-list-divider></expandable-list-divider>
      <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 angular-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 be rendered 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></expandable-list-divider>
    <a item href="http://www.goo.gl">Google</a>
  </expandable-list-item>
</expandable-list>

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></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-Cookie-Law library.

From your terminal all the Node dependencies using npm:

$ npm run demo

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

Options

Properties

isExpanded

| Type | Default value | | --- | --- | | boolean | false |

Used for interacting with the expandable-list-item element.

Example:

@Component({
  selector: 'app',
  template: `
    <expandable-list class="expandable-list">
      <expandable-list-item [isExpanded]="listExpanded">
        <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 {
  listExpanded = true;
}

Attributes

| Name | Type | Description | | --- | --- | --- | | disabled | boolean | When applied to the expandable-list-item, disabled the | is-expanded | boolean | Reflect the expandable state of the item list element

Events

| Name | Type | Description | | --- | --- | --- | | onExpanded | boolean | Triggered when the list expansion status changes

Example:

@Component({
  selector: 'app',
  template: `
    <expandable-list class="expandable-list">
      <expandable-list-item [isExpanded]="listExpanded"
                            (onExpanded)="listExpanded = $event">
        <span title>My list</span>
        <a item href="http://www.goo.gl">Google</a>
      </expandable-list-item>
    </expandable-list>
  `
})
export class AppComponent {
  listExpanded = true;
}

Angular 9

This module will work with Angular 9 projects but requires @angular/animations to be included in your project as the Angular animations are not part of the @angular/core library starting from the version >=4.

Make sure to include the BrowserAnimationsModule in your App module like in the following example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Angular 4+ Only
  ],
})
export class AppModule { }

Everything else will just work as before.

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:

License

MIT License © Andrea SonnY