Necessitates Proper Modularity

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Accordian Forms

    This Material is an expansion panel that allows you to project any component form.

    The result is a form array of all the form groups created. You can add/delete of update any expansion panel content.

    The component also can take a data structure and create the panels with the projected for along with patching the data.

    You can also move panels around with drag and drop.


    npm install accordian-forms




    The following Inputs are available [data]="info" [formObject]="myForm" [controls]="false" [hideToggle]="false" [multi]="false"

    Input Type Defaut Description
    data ANY[] [] data for form array of form groups
    formObject FormGroup NULL form group for projected component form
    controls BOOLEAN NULL controls to add/delete panel
    hideToggle BOOLEAN false display toggle on panel
    multi BOOLEAN false open multiple panels


    Define the form group for the component being injected that will be replicated in the expansion panel

    myForm ={
        first: [null, Validators.required],
        last: [null, Validators.required]
        street: [null],
          country: [null],
          region: [null],
          city: [null]

    Define the data to be patched to the form

    info = [
        name: { first: 'Jimmy', last: 'Smith'},
        address: {
          street: '12 Baker Street',
          location: {
            country: 'Canada', region: 'Vancover', city: 'Unknown'
        name: { first: 'Jake', last: 'Smith'},
        address: {
          street: '6 Kermit Road',
          location: {
            country: 'Canada', region: 'Vancover', city: 'Unknown'

    Place the component and define any inputs.

    [data] is your data to patch the form with

    [formObject] is your form to replicate in the panel

    Now your ready to define the component

      <!-- Form Component to Project -->
        <ng-template let-row #formTemplateRef>
          <app-general-info [rowForm]="row"></app-general-info>

    in the component tags you will use the ng-template which will replicate the component (form) We create a reference formTemplateRef to access any events - in this case we aew using Add and Clear buttons outside this component to execute these functions inside the accordian-form component. We will use a viewChild get connect this and the following functions.

    @ViewChild('expansion_panel', { static: false }) expansion_panel: AccordianFormsComponent
    add() {
    clear() {

    Now we add our component that has the form. [rowForm] is the input value of the form group that will be injected into the component form.

    <app-general-info [rowForm]="row"></app-general-info>

    Here is a sample of the event we wish to call from outside of this compoenent using the viewChild to connect the event.

    <!-- append a new form group panel -->
    <div style="margin-bottom: 16px; padding: 8px;">
      <div style="padding: 8px;"><h1>Sample Controls</h1></div>
      <div fxFlex></div>
      <button mat-icon-button style="margin-top: 8px;" (click)="add()">
    <!-- clear -->
    <div style="padding: 16px;">
      <button mat-stroked-button (click)="clear()">Clear All</button>


    npm i accordian-forms

    DownloadsWeekly Downloads






    Unpacked Size

    100 kB

    Total Files


    Last publish


    • wavecoders