https://github.com/alexkhymenko/ngx-collapse-animated

Bootstrap-like collapse for Angular
https://github.com/alexkhymenko/ngx-collapse-animated

angular bootstrap collapse collapsible

Last synced: about 1 month ago
JSON representation

Bootstrap-like collapse for Angular

• Host: GitHub
• URL: https://github.com/alexkhymenko/ngx-collapse-animated
• Owner: AlexKhymenko
• License: mit
• Created: 2024-06-10T13:53:40.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-12T14:35:45.000Z (5 months ago)
• Last Synced: 2024-09-18T17:49:27.809Z (about 2 months ago)
• Topics: angular, bootstrap, collapse, collapsible
• Language: TypeScript
• Homepage:
• Size: 291 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NgxCollapseAnimated

Bootstrap-like collapse for Angular

Try it https://stackblitz.com/~/github.com/AlexKhymenko/ngx-collapse-animated

## Installation

- Simply run `npm i ngx-collapse-animated`.

- Add animation `provideAnimations` provider to your project

`````

bootstrapApplication(AppComponent, {

                      providers: [provideAnimations(),

                                  provideZoneChangeDetection({ eventCoalescing: true }),

                                  provideRouter(routes)]

}).catch((err) => console.error(err));

  

`````

- Add the following css in styles.scss of your application

````

.collapse:not(.show) {

  display: none;

}

.collapsing {

  height: 0;

  overflow: hidden;

  transition: height 0.35s ease;

}

````

or import scss file

`````

  @use 'ngx-collapse-animated';

`````

## Usage

Add ngxCollapseAnimated directive to where the content should be visible

`````

  

  


    Show animation

    


      Hello to You!

    

  


`````

Import  NgxCollapseAnimatedDirective in Your component

````` 

@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, NgxCollapseAnimatedDirective],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css'

})

export class AppComponent {

  title = 'collapse-animated';

  visible = true;

}

`````