Ngx-Bootstrap - Thu gọn

ngx-bootstrap Chỉ thị thu gọn giúp hiển thị / ẩn nội dung vùng chứa.

CollapseDirective

bộ chọn

[collapse]

Đầu vào

collapse - boolean, Cờ biểu thị khả năng hiển thị của nội dung (hiển thị hoặc ẩn)
display - chuỗi
isAnimated- boolean, bật / tắt hoạt ảnh. default: false

Kết quả đầu ra

collapsed - Sự kiện này kích hoạt ngay khi nội dung bị sập
collapses - Sự kiện này xảy ra khi bắt đầu thu gọn
expanded - Sự kiện này kích hoạt ngay khi hiển thị nội dung
expands - Sự kiện này xảy ra khi bắt đầu mở rộng

Phương pháp

toggle() - cho phép chuyển đổi chế độ hiển thị nội dung theo cách thủ công
hide - cho phép ẩn nội dung theo cách thủ công
show - cho phép hiển thị nội dung thu gọn theo cách thủ công

Thí dụ

Vì chúng ta sẽ sử dụng tính năng thu gọn, chúng ta phải cập nhật app.module.ts được sử dụng trong chương Băng chuyền ngx-bootstrap để sử dụngCollapseModule.

Cập nhật app.module.ts để sử dụng CollapseModule.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật test.component.html để sử dụng Thu gọn.

test.component.html

<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="isCollapsed">Collapse</label>
   </div>
</div>
<div [collapse]="isCollapsed" [isAnimated]="true">
   <div class="well well-lg card card-block card-header">Welcome to Tutorialspoint.</div>
</div>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   isCollapsed: boolean = false;
   constructor() { }

   ngOnInit(): void {
   }
}