GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Gbuomprisco → ng2-expansion-panels

Gbuomprisco / ng2-expansion-panels

Licence: other
Expansion Panels component for Angular 2

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
HTML
75241 projects
CSS
56736 projects

Labels

angularmaterial-designangular-componentsexpansion-panels

Projects that are alternatives of or similar to ng2-expansion-panels

Fef
The Front End Framework is a Thomson Reuters Tax and Accounting project to create a re-usable library for creating rich HTML based applications. The end goal is to assemble the publicly available libraries into a reference application with documentation along with best practice architecture.
Stars: ✭ 96 (+405.26%)
Mutual labels:  angular-components
Fundamental Ngx
Angular components implementation of Fundamental Library Styles guidelines. The library is aiming to provide an Angular implementation of the components designed in Fundamental Library Styles.
Stars: ✭ 166 (+773.68%)
Mutual labels:  angular-components
Alyle Ui
Minimal Design, a set of components for Angular 9+
Stars: ✭ 234 (+1131.58%)
Mutual labels:  angular-components
Barista
Barista - the Dynatrace design system. Tailored to scale.
Stars: ✭ 107 (+463.16%)
Mutual labels:  angular-components
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (+652.63%)
Mutual labels:  angular-components
Fc Angular
快速搭建angular后台管理系统的admin template。Fast development platform based on angular8, ng.ant.design built multi-tab page background management system (continuous upgrade) ^_^
Stars: ✭ 171 (+800%)
Mutual labels:  angular-components
Nx Packaged
Angular libraries with ng-packagr embedded in Nx Workspace.
Stars: ✭ 82 (+331.58%)
Mutual labels:  angular-components
ngx-mat-timepicker
A true material timepicker
Stars: ✭ 45 (+136.84%)
Mutual labels:  angular-components
Ej2 Angular Ui Components
Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.
Stars: ✭ 159 (+736.84%)
Mutual labels:  angular-components
Ngx Quill Editor
🍡@quilljs editor component for @angular
Stars: ✭ 234 (+1131.58%)
Mutual labels:  angular-components
Ng Simple Slideshow
A simple, responsive slideshow for Angular 4+.
Stars: ✭ 119 (+526.32%)
Mutual labels:  angular-components
Learn Angular From Scratch Step By Step
Angular step by step tutorial covering from basic concepts of Angular Framework to building a complete Angular app using Angular Material components. We will go through the main building blocks of an Angular 7 application as well as the best practices for building a complete app with Angular.
Stars: ✭ 140 (+636.84%)
Mutual labels:  angular-components
Awesome Ionic2 Components
Should help you to get awesome components and plugins for Ionic2
Stars: ✭ 209 (+1000%)
Mutual labels:  angular-components
Ng Nest
NG-NEST 是一个开源的 Web 应用程序框架，基于 Angular 和 Nest ，主要用于研发企业级中后台产品
Stars: ✭ 106 (+457.89%)
Mutual labels:  angular-components
Ng Select
⭐ Native angular select component
Stars: ✭ 2,781 (+14536.84%)
Mutual labels:  angular-components
Ng Wizi Bulma
Bulma components for Angular
Stars: ✭ 94 (+394.74%)
Mutual labels:  angular-components
Ngx Ueditor
Angular for Baidu UEditor
Stars: ✭ 169 (+789.47%)
Mutual labels:  angular-components
ngx-sortable
ngx-sortable is an angular sortable list components that support drag and drop sorting
Stars: ✭ 19 (+0%)
Mutual labels:  angular-components
ngx-wall
Helps build content editor for note-taking application
Stars: ✭ 78 (+310.53%)
Mutual labels:  angular-components
Ng Drag Drop
Drag & Drop for Angular - based on HTML5 with no external dependencies. 🎉
Stars: ✭ 233 (+1126.32%)
Mutual labels:  angular-components
View All Similar Projects ➔

Ng2 Expansion Panels Build Status

This is a component for Angular 2. Design is inspired by Material Design's component Expansion Panels.

Development is in very early stage

Demo

Check out the live demo (with source code) here http://www.buompris.co/ng2-expansion-panels.

Installing

npm install ng2-expansion-panels --save

Configuration

Ensure you import the module:

import { ExpansionPanelsModule } from 'ng2-expansion-panels';

// please notice this is the new way of telling a Component
// to import another component...no more directives[]
@NgModule({
   imports: [ExpansionPanelsModule]
})
export class MyModule {}

API

  • onOpen - [?onOpen(panel: ExpansionPanelComponent)] - event fired when a panel is opened
  • onClose - [?onClose(panel: ExpansionPanelComponent)] - event fired when a panel is closed
  • onSubmit - [?onSubmit()] - event fired when submit is called
  • onCancel - [?onCancel()] - event fired when cancel is called

Examples

Basic Example

<expansion-panels-container>
    <expansion-panel>
        <expansion-panel-title>
            Title
        </expansion-panel-title>

        <expansion-panel-description-hidden>
            Description when hidden
        </expansion-panel-description-hidden>

        <expansion-panel-description-toggled>
            Description when toggled
        </expansion-panel-description-toggled>

        <expansion-panel-content>
            Content
        </expansion-panel-content>
    </expansion-panel>

    </expansion-panel>...</expansion-panel>
    </expansion-panel>...</expansion-panel>
    </expansion-panel>...</expansion-panel>
</expansion-panels-container>

Add Buttons to a panel

Every panel has already defined two methods, cancel and submit. In order to bind those to the buttons we define, we need to create a reference to the panel. In this example, I called it #panel and them I'm calling panel.cancel() and panel.submit().

It is possible to listen to these events with the outputs onCancel and onSubmit.

<expansion-panels-container>
    <expansion-panel (onCancel)='resetForm()' (onSubmit)='saveForm()'>
        <expansion-panel-title>
            Title
        </expansion-panel-title>

        <expansion-panel-description-hidden>
            Description when hidden
        </expansion-panel-description-hidden>

        <expansion-panel-description-toggled>
            Description when toggled
        </expansion-panel-description-toggled>

        <expansion-panel-content>
            Content
        </expansion-panel-content>

        <expansion-panel-buttons>
            <button (click)='pancel.cancel()'>Cancel</button>
            <button (click)='pancel.submit()'>Submit</button>
        </expansion-panel-buttons>
    </expansion-panel>

</expansion-panels-container>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].