Ngx-Bootstrap - Dropdown

ngx-bootstrap komponen dropdown dapat diubah dan menyediakan overlay kontekstual untuk menampilkan daftar link dll. Dengan perintah dropdown kita dapat membuat dropdown menjadi interaktif.

BsDropdownDirective

pemilih

  • [bsDropdown],[dropdown]

Masukan

  • autoClose - boolean, Menunjukkan bahwa dropdown akan ditutup pada item atau klik dokumen, dan setelah menekan ESC

  • container - string, selektor yang menentukan elemen popover yang harus ditambahkan.

  • dropup - boolean, Atribut ini menunjukkan bahwa dropdown harus dibuka ke atas.

  • insideClick - boolean, Atribut ini menunjukkan bahwa dropdown seharusnya tidak menutup di dalam klik ketika autoClose disetel ke true.

  • isAnimated - boolean, Menunjukkan bahwa dropdown akan dianimasikan

  • isDisabled - boolean, Nonaktifkan toggle dropdown dan sembunyikan menu dropdown jika dibuka

  • isOpen - boolean, Mengembalikan apakah popover sedang ditampilkan atau tidak

  • placement- string, Penempatan popover. Menerima: "top", "bottom", "left", "right"

  • triggers- string, Menentukan peristiwa yang harus dipicu. Mendukung daftar nama acara yang dipisahkan spasi.

Keluaran

  • isOpenChange - Memancarkan acara saat perubahan isOpen

  • onHidden - Memancarkan acara saat popover disembunyikan

  • onShown - Memancarkan acara saat popover ditampilkan

Metode

  • show()- Membuka popover elemen. Ini dianggap sebagai pemicu 'manual' dari popover.

  • hide()- Menutup popover elemen. Ini dianggap sebagai pemicu 'manual' dari popover.

  • toggle()- Mengalihkan popover elemen. Ini dianggap sebagai pemicu 'manual' dari popover.

  • setConfig() - Atur konfigurasi untuk popover

Contoh

Karena kita akan menggunakan dropdown, Kami telah memperbarui app.module.ts yang digunakan dalam ngx-bootstrap chapter DatePicker untuk digunakan.BsDropdownModule dan BsDropdownConfig.

Perbarui app.module.ts untuk menggunakan BsDropdownModule dan BsDropdownConfig.

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';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';

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

Perbarui test.component.html untuk menggunakan dropdown.

test.component.html

<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
   <button id="button-basic" dropdownToggle type="button" 
      class="btn btn-primary dropdown-toggle"
      aria-controls="dropdown-basic">
      Menu <span class="caret"></span>
   </button>
   <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">File</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Edit</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Search</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Recents</a>
      </li>
   </ul>
</div>
<button type="button" class="btn btn-primary" 
   (click)="dropdown.isOpen = !dropdown.isOpen">Show/Hide
</button>

Perbarui test.component.ts untuk variabel dan metode yang sesuai.

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 {
   constructor() {}

   ngOnInit(): void {}
}

Bangun dan Sajikan

Jalankan perintah berikut untuk memulai server sudut.

ng serve

Setelah server aktif dan berjalan. Buka http: // localhost: 4200 dan verifikasi keluaran berikut.