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.
Table of contents
Installation
- 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.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Add your changes:
git add .
- Commit your changes:
npm run commit
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :sunglasses:
License
MIT License © Andrea SonnY