Skip to content

Instantly share code, notes, and snippets.

@fourgates

fourgates/angular-standalone-barrel-example.ts

Last active July 31, 2023 20:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fourgates/703b0b58c3d9ef1db3e05f5cc2c6308e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fourgates/703b0b58c3d9ef1db3e05f5cc2c6308e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fourgates revised this gist Jul 31, 2023. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions angular-standalone-barrel-example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,8 @@
    // sort a table!
    //
    // however, you can also just import the table or the table-sort directive if you wanted to!
    //
    // FYI -- this angular library gets built with the following cmd: `yarn build-lib && yarn pack-lib`

    // 1. export a group of components from an angular library / project / component

  2. fourgates created this gist Jul 31, 2023.
    43 changes: 43 additions & 0 deletions angular-standalone-barrel-example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    // This is a way to get best of both worlds of grouping component together
    // into "modules" (barrels) and using standalone components!
    //
    // using a "barrel" export you can group together angular components so you only need to
    // import one object
    //
    // a good use case for this is components that are dependent on each other or commonly used together
    // in this example we have a table and table-sort directive bc you almost always want to be able to
    // sort a table!
    //
    // however, you can also just import the table or the table-sort directive if you wanted to!

    // 1. export a group of components from an angular library / project / component

    @Directive({...standalone: true...})
    export class OurTableSortByDirective { .. }

    @Component({...standalone: true...})
    export class OurTableComponent {...}

    // 2. THIS IS THE BARREL!
    export const OUR_TABLE = [
    OurTableComponent,
    OurTableSortByDirective
    ] as const;

    // 3. import the barrel into the client component!
    // some-example-component-with-tables.component.ts
    import {
    OUR_TABLE,
    } from 'our-ui-library';
    ...
    @Component({
    ...
    standalone: true,
    imports: [
    ...
    OUR_TABLE,
    ...
    ],
    ...
    })
    export class SearchTableComponent {...}