In this quick example, let's see bootstrap collapse in angular 9/8. i explained simply about bootstrap 4 collapse in angular 9/8. if you have question about bootstrap Collapse angular 9/8 example then i will give simple example with solution. i would like to show you angular 9/8 bootstrap 4 collapse example.
Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3 and bootstrap 4 native Angular directives like model, collapse, tooltip, tabs, pagination, datepicker, buttons etc. Ng Bootstrap will help to easily use bootstrap ui.
In this example we will simply create collapse, so you can use in your angular 8 application. we will use collapse step by step, so you can easily understand.
So, let's follow this tutorial step by step.
Step 1: Create New App
You can easily create your angular app using bellow command:
ng new my-new-app
Step 2: Install Bootstrap 4
In this step, we will install bootstrap core package. so we can use bootstrap css so let's install by following command:
npm install bootstrap --save
Now, we need to include bootstrap css like "node_modules/bootstrap/dist/css/bootstrap.min.css", so let's add it on angular.json file.
angular.json
.....
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
.....
Step 3: Install Ng Bootstrap
In this step, we will install Ng Bootstrap package. so we can use bootstrap ui so let's install by following command:
npm install --save @ng-bootstrap/ng-bootstrap
Step 4: Import Module
In this step, we need to import NgbModule to app.module.ts file. so let's import it as like bellow:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5: Updated View File
Now here, we will updated our html file. we will create simple bootstrap collapse example as like bellow.
so let's put bellow code:
src/app/app.component.html
<div class="container">
<h1>Angular 8 Bootstrap Collapse Example - HDTuto.com</h1>
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Collapse Toggle
</button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle Button. This is example from HDTuto.com.
</div>
</div>
</div>
</div>
Step 6: Updated ts File
Now, let's update file as like bellow:
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'appBootstrap';
public isCollapsed = false;
constructor() {}
}
Now we are ready to run both:
Run Angular App:
ng serve
I hope it can help you...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example