Ngx-Bootstrap - Guida rapida

Ngx-bootstrap è una libreria molto popolare per utilizzare componenti bootstrap in progetti basati su Angular. Contiene quasi tutti i componenti principali di Bootstrap. I componenti ngx-bootstrap sono modulari, estensibili e adattabili. Di seguito sono riportati i punti chiave di evidenziazione di questa libreria bootstrap.

Flessibilità

Tutti i componenti sono modulari per design. Modelli personalizzati, stili possono essere applicati facilmente.
Tutti i componenti sono estensibili e adattabili e funzionano su desktop e dispositivi mobili con la stessa facilità e prestazioni.

Supporto

Tutti i componenti utilizzano le ultime guide di stile e linee guida per la manutenibilità e la leggibilità del codice.
Tutti i componenti sono completamente testati e supportano le ultime versioni angolari.

Ampia documentazione

Tutti i componenti sono riccamente documentati e ben scritti.
Tutti i componenti hanno più demo di lavoro per esibire più tipi di funzionalità.

Open Source

ngx-bootstrap è un progetto open source. È supportato dalla licenza MIT.

In questo capitolo imparerai in dettaglio come configurare l'ambiente di lavoro di ngx-bootstrap sul tuo computer locale. Poiché ngx-bootstrap è principalmente per progetti angolari, assicurati di avereNode.js e npm e angular installato sul tuo sistema.

Crea un progetto angolare

Per prima cosa crea un progetto angolare per testare i componenti ngx-bootstrap usando i seguenti comandi.

ng new ngxbootstrap

Creerà un progetto angolare chiamato ngxbootstrap.

Aggiungi ngx-bootstrap come dipendenza

Puoi usare il seguente comando per installare ngx-bootstrap in un progetto appena creato

npm install ngx-bootstrap

È possibile osservare il seguente output una volta installato correttamente ngx-bootstrap:

+ [email protected]
added 1 package from 1 contributor and audited 1454 packages in 16.743s

Ora, per verificare se bootstrap funziona bene con Node.js, crea il componente di test usando il seguente comando:

ng g component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (267 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)

Cancella il contenuto di app.component.html e aggiornalo seguendo i contenuti.

app.component.html

<app-test></app-test>

Aggiorna il contenuto di app.module.ts per includere il modulo fisarmonica ngx-bootstrap. Aggiungeremo un altro modulo nei capitoli successivi. Aggiornalo seguendo i contenuti.

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'
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna il contenuto di index.html per includere bootstrap.css. Aggiornalo seguendo i contenuti.

index.html

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Nel prossimo capitolo, aggiorneremo il componente di test per utilizzare i componenti ngx-bootstrap.

La fisarmonica è un controllo per visualizzare pannelli pieghevoli e viene utilizzato per visualizzare le informazioni in uno spazio limitato.

AccordionComponent

Visualizza pannelli di contenuto comprimibili per presentare le informazioni in uno spazio limitato.

selettore

accordion

Ingressi

closeOthers - booleano, se vero l'espansione di un elemento chiuderà tutti gli altri
isAnimated - booleano, attiva / disattiva l'animazione, predefinito: false

AccordionPanelComponent

AccordionHeading

Invece di utilizzare l'attributo intestazione su accordion-group, puoi utilizzare un attributo intestazione a fisarmonica su qualsiasi elemento all'interno di un gruppo che verrà utilizzato come modello di intestazione del gruppo.

selettore

fisarmonica-gruppo, fisarmonica-pannello

Ingressi

heading - stringa, testo cliccabile nell'intestazione del gruppo della fisarmonica
isDisabled - booleano, abilita / disabilita il gruppo fisarmonica
isOpen- booleano, il gruppo di fisarmoniche è aperto o chiuso. Questa proprietà supporta l'associazione a due vie
panelClass - string, Fornisce la possibilità di utilizzare le classi del pannello contestuale di Bootstrap (panel-primary, panel-success, panel-info, ecc ...).

Uscite

isOpenChange - Emette quando lo stato di apertura cambia

AccordionConfig

Servizio di configurazione, fornisce valori predefiniti per AccordionComponent.

Proprietà

closeOthers- boolean, Indica se gli altri pannelli devono essere chiusi quando viene aperto un pannello. Predefinito: false
isAnimated - booleano, attiva / disattiva l'animazione

Esempio

Poiché utilizzeremo la fisarmonica, abbiamo aggiornato app.module.ts da utilizzare AccordionModulecome nel capitolo Configurazione dell'ambiente ngx-bootstrap .

Aggiorna test.component.html per utilizzare la fisarmonica.

test.component.html

<accordion>
   <accordion-group heading="Open By Default" [isOpen]="open">
      <p>Open By Default</p>
   </accordion-group>
   <accordion-group heading="Disabled" [isDisabled]="disabled">
      <p>Disabled</p>
   </accordion-group>
   <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)">
      <p>Open Event</p>
   </accordion-group>
</accordion>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   open: boolean = true;
   disabled: boolean = true;
   constructor() { }
   ngOnInit(): void {
   }
   log(isOpened: boolean){
      console.log(isOpened);
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

Avvisi fornisce messaggi contestuali per azioni tipiche dell'utente come informazioni, errori con messaggi di avviso disponibili e flessibili.

AlertComponent

Visualizza pannelli di contenuto comprimibili per presentare le informazioni in uno spazio limitato.

selettore

alert,bs-alert

Ingressi

dismissible - booleano, se impostato, visualizza un pulsante "Chiudi" in linea, predefinito: false
dismissOnTimeout- stringa | numero, numero in millisecondi, dopodiché l'avviso verrà chiuso
isOpen - booleano, è visibile l'avviso, predefinito: vero
type- stringa, tipo di avviso. Fornisce una delle quattro classi contestuali supportate da bootstrap: successo, informazioni, avviso e pericolo, impostazione predefinita: avviso

Uscite

onClose - Questo evento si attiva immediatamente dopo la chiamata del metodo di istanza di chiusura, $ event è un'istanza del componente Alert.
onClosed - Questo evento si attiva alla chiusura dell'avviso, $ event è un'istanza del componente Alert

AlertConfig

Proprietà

dismissible - booleano, gli avvisi sono ignorabili per impostazione predefinita, impostazione predefinita: false
dismissOnTimeout - numero, tempo predefinito prima che l'avviso venga chiuso, valore predefinito: non definito
type - stringa, tipo di avviso predefinito, predefinito: avviso

Esempio

Poiché utilizzeremo gli avvisi, dobbiamo aggiornare app.module.ts utilizzato nel capitolo ngx-bootstrap Accordion da utilizzareAlertModule e AlertConfig.

Aggiorna app.module.ts per utilizzare AlertModule e AlertConfig.

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';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare gli avvisi.

test.component.html

<alert type="success" 
   [dismissible]="dismissible"
   [isOpen]="open"
   (onClosed)="log($event)"
   [dismissOnTimeout]="timeout">
   <h4 class="alert-heading">Well done!</h4>
   <p>Success Message</p>
</alert>
<alert type="info">
   <strong>Heads up!</strong> Info
</alert>
<alert type="warning">
   <strong>Warning!</strong> Warning
</alert>
<alert type="danger">
   <strong>Oh snap!</strong> Error
</alert>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   open: boolean = true;
   dismissible: boolean = true;
   timeout: number = 10000;
   constructor() { }
   
   ngOnInit(): void {
   }
   log(alert){
      console.log('alert message closed');
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

I pulsanti ngx-bootstrap hanno due direttive specifiche che fanno sì che un gruppo di pulsanti si comporti come casella di controllo o pulsanti di opzione o ibrido in cui un pulsante di opzione può essere deselezionato.

ButtonCheckboxDirective

Aggiungi la funzionalità della casella di controllo a qualsiasi elemento.

selettore

[btnCheckbox]

Ingressi

btnCheckboxFalse - booleano, valore Falsy, verrà impostato su ngModel, predefinito: false
btnCheckboxTrue - booleano, valore Truthy, verrà impostato su ngModel, predefinito: true

ButtonRadioDirective

Crea pulsanti di opzione o gruppi di pulsanti. Un valore di un pulsante selezionato è associato a una variabile specificata tramite ngModel.

selettore

[btnRadio]

Ingressi

btnRadio - string, il valore del pulsante di opzione, verrà impostato su ngModel
disabled - booleano, se vero - il pulsante di opzione è disabilitato
uncheckable - booleano, Se vero - il pulsante di opzione può essere deselezionato
value - stringa, valore corrente del componente o gruppo radio

ButtonRadioGroupDirective

Un gruppo di pulsanti di opzione. Un valore di un pulsante selezionato è associato a una variabile specificata tramite ngModel.

selettore

[btnRadioGroup]

Esempio

Dato che utilizzeremo i pulsanti, dobbiamo aggiornare app.module.ts utilizzato nel capitolo Avvisi ngx-bootstrap perButtonsModule. Stiamo anche aggiungendo il supporto per i controlli di input utilizzando FormModule.

Aggiorna app.module.ts per utilizzare AlertModule e AlertConfig.

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';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare i pulsanti.

test.component.html

<button type="button" class="btn btn-primary" (click)="clicked()">
   Single Button
</button>
<pre class="card card-block card-header">
   {{clickCounter}}
</pre>
<p>Button as Checkbox</p>
<div class="btn-group">
   <label class="btn btn-primary" [(ngModel)]="checkModel.left"
      btnCheckbox tabindex="0" role="button">Left</label>
   <label class="btn btn-primary" [(ngModel)]="checkModel.right"
      btnCheckbox tabindex="0" role="button">Right</label>
</div>
<pre class="card card-block card-header">
   {{checkModel | json}}
</pre>
<p>Button as RadionButton</p>
<div class="form-inline">
   <div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
      <label class="btn btn-success" btnRadio="Left">Left</label>
      <label class="btn btn-success" btnRadio="Right">Right</label>
   </div>
</div>
<pre class="card card-block card-header">
   {{radioModel}}
</pre>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   checkModel = { left: false, right: false };
   radioModel = 'Left';
   clickCounter = 0;
   constructor() { }

   ngOnInit(): void {
   }
   clicked(): void {
      this.clickCounter++;
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

ngx-bootstrap Carousel viene utilizzato per creare presentazioni di immagini o testo

CarouselComponent

Elemento base per creare giostra.

selettore

carousel

Ingressi

activeSlide - numero, indice della diapositiva attualmente visualizzata (iniziato per 0)
indicatorsByChunk - booleano, predefinito: false
interval- numero, ritardo del ciclo dell'elemento in millisecondi. Se falso, il carosello non verrà eseguito automaticamente.
isAnimated- booleano, attiva / disattiva l'animazione. L'animazione non funziona per il carousel multilist, impostazione predefinita: false
itemsPerSlide - numero, predefinito: 1
noPause - booleano
noWrap - booleano
pauseOnFocus - booleano
showIndicators - booleano
singleSlideOffset - booleano
startFromIndex - numero, predefinito: 0

Uscite

activeSlideChange- Verrà emesso quando la diapositiva attiva è stata modificata. Parte della proprietà [(activeSlide)] associabile a due vie
slideRangeChange - Verrà emesso quando le diapositive attive sono state modificate in modalità multilist

SlideComponent

selettore

slide

Ingressi

active - booleano, la diapositiva corrente è attiva

Esempio

Dato che useremo carousel, dobbiamo aggiornare app.module.ts usato nel capitolo ngx-bootstrap Buttons da usareCarouselModule.

Aggiorna app.module.ts per utilizzare CarouselModule.

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';

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

Aggiorna test.component.html per utilizzare il Carousel.

test.component.html

<div style="width: 500px; height: 500px;">
   <carousel [noWrap]="noWrapSlides" [showIndicators]="showIndicator">
      <slide *ngFor="let slide of slides; let index=index">
         <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
         <div class="carousel-caption">
			<h4>Slide {{index}}</h4>
            <p>{{slide.text}}</p>
         </div>
      </slide>
   </carousel>
   <br/>
   <div>
      <div class="checkbox">
         <label><input type="checkbox" [(ngModel)]="noWrapSlides">Disable Slide Looping</label>
         <label><input type="checkbox" [(ngModel)]="showIndicator">Enable Indicator</label>
      </div>
   </div>
</div>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

test.component.ts

import { Component, OnInit } from '@angular/core';
import { CarouselConfig } from 'ngx-bootstrap/carousel';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   providers: [
      { provide: CarouselConfig, useValue: { interval: 1500, noPause: false, showIndicators: true } }
   ],
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   slides = [
      {image: 'assets/images/nature/1.jpg', text: 'First'},
      {image: 'assets/images/nature/2.jpg',text: 'Second'},
      {image: 'assets/images/nature/3.jpg',text: 'Third'}
   ];
   noWrapSlides = false;
   showIndicator = true;
   constructor() { }

   ngOnInit(): void {
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

La direttiva ngx-bootstrap Collapse aiuta a mostrare / nascondere il contenuto di un contenitore.

CollapseDirective

selettore

[collapse]

Ingressi

collapse - booleano, un flag che indica la visibilità del contenuto (mostrato o nascosto)
display - stringa
isAnimated- booleano, attiva / disattiva l'animazione. impostazione predefinita: false

Uscite

collapsed - Questo evento si attiva non appena i contenuti vengono compressi
collapses - Questo evento si attiva quando viene avviata la compressione
expanded - Questo evento si attiva non appena il contenuto diventa visibile
expands - Questo evento si attiva quando viene avviata l'espansione

Metodi

toggle() - consente di attivare manualmente la visibilità dei contenuti
hide - permette di nascondere manualmente i contenuti
show - consente di mostrare manualmente il contenuto compresso

Esempio

Poiché utilizzeremo la compressione, dobbiamo aggiornare app.module.ts utilizzato nel capitolo Carousel ngx-bootstrap da utilizzareCollapseModule.

Aggiorna app.module.ts per utilizzare 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 { }

Aggiorna test.component.html per utilizzare il Collapse.

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>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

Seleziona la casella di controllo Comprimi e il contenuto verrà compresso.

Il componente ngx-bootstrap DatePicker è altamente configurabile e personalizzabile secondo le nostre necessità. Fornisce varie opzioni per selezionare la data o l'intervallo di date.

BsDatepickerDirective

selettore

[bsDatepicker]

Ingressi

bsConfig - Parziale <BsDatepickerConfig>, oggetto Config per datepicker
bsValue - Data, valore iniziale del datepicker
container- string, un selettore che specifica l'elemento a cui aggiungere il datepicker. predefinito: corpo
dateCustomClasses - DatepickerDateCustomClasses [], Date classi personalizzate
datesDisabled - Data [], disabilita date specifiche
datesEnabled - Data [], Abilita date specifiche
dateTooltipTexts - DatepickerDateTooltipText [], testo della descrizione comando data
daysDisabled - numero [], Disabilita determinati giorni della settimana
isDisabled - booleano, indica se il contenuto di datepicker è abilitato o meno
isOpen - booleano, restituisce se il datepicker è attualmente visualizzato o meno
maxDate - booleano, data massima disponibile per la selezione
minDate - booleano, data minima disponibile per la selezione
minMode - BsDatepickerViewMode, modalità di visualizzazione minima: giorno, mese o anno
outsideClick - booleano, Chiudi datepicker al clic esterno, impostazione predefinita: true
outsideEsc - booleano, Chiudi datepicker al clic di uscita, impostazione predefinita: true
placement- "top" | "fondo" | "sinistra" | "right", posizionamento di un datepicker. Accetta: "in alto", "in basso", "sinistra", "destra", impostazione predefinita: in basso
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi., Impostazione predefinita: clic

Uscite

bsValueChange - Emette quando il valore di datepicker è stato modificato
onHidden - Emette un evento quando il datepicker è nascosto
onShown - Emette un evento quando viene mostrato il datepicker

Metodi

show()- Apre il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
hide()- Chiude il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
toggle()- Attiva o disattiva il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
setConfig() - Imposta la configurazione per datepicker

BsDaterangepickerDirective

selettore

[bsDaterangepicker]

Ingressi

bsConfig - Parziale <BsDaterangepickerConfig>, oggetto Config per daterangepicker
bsValue - Data, valore iniziale di daterangepicker
container- string, un selettore che specifica l'elemento a cui aggiungere il daterangepicker. predefinito: corpo
dateCustomClasses - DatepickerDateCustomClasses [], Date classi personalizzate
datesDisabled - Data [], disabilita date specifiche
datesEnabled - Data [], Abilita date specifiche
dateTooltipTexts - DatepickerDateTooltipText [], testo della descrizione comando data
daysDisabled - numero [], Disabilita determinati giorni della settimana
isDisabled - booleano, indica se il contenuto di daterangepicker è abilitato o meno
isOpen - boolean, Restituisce se il daterangepicker è attualmente mostrato o meno
maxDate - booleano, data massima disponibile per la selezione
minDate - booleano, data minima disponibile per la selezione
minMode - BsDatepickerViewMode, modalità di visualizzazione minima: giorno, mese o anno
outsideClick - booleano, Chiudi daterangepicker al clic esterno, impostazione predefinita: true
outsideEsc - booleano, Chiudi daterangepicker al clic di uscita, impostazione predefinita: true
placement- "top" | "fondo" | "sinistra" | "right", Posizionamento di un daterangepicker. Accetta: "in alto", "in basso", "sinistra", "destra", impostazione predefinita: in basso
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi., Impostazione predefinita: clic

Uscite

bsValueChange - Emette quando il valore di daterangepicker è stato modificato
onHidden - Emette un evento quando il daterangepicker è nascosto
onShown - Emette un evento quando viene mostrato il daterangepicker

Metodi

show()- Apre il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
hide()- Chiude il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
toggle()- Attiva o disattiva il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
setConfig() - Imposta la configurazione per datepicker

Esempio

Dato che utilizzeremo DatePicker e DateRangePicker, dobbiamo aggiornare app.module.ts utilizzato nel capitolo Comprimi ngx-bootstrap da utilizzareBsDatepickerModule e BsDatepickerConfig.

Aggiorna app.module.ts per utilizzare BsDatepickerModule e BsDatepickerConfig.

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';

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

Aggiorna index.html per utilizzare bs-datepicker.css.

app.module.ts

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
      <link href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet" >
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Aggiorna test.component.html per utilizzare i datepicker.

test.component.html

<div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Datepicker"
         class="form-control"
         bsDatepicker
         [bsValue]="bsValue"
         [minDate]="minDate"
         [maxDate]="maxDate"
         [daysDisabled]="[6,0]"
         [datesDisabled]="disabledDates"
         [bsConfig]="{ isAnimated: true, dateInputFormat: 'YYYY-MM-DD' }">
   </div>
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker
         [(ngModel)]="bsRangeValue"
         [datesEnabled]="enabledDates"
         [bsConfig]="{ isAnimated: true }">
   </div>
</div>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {

   bsValue = new Date();
   bsRangeValue: Date[];
   maxDate = new Date();
   minDate = new Date();

   constructor() {
      this.minDate.setDate(this.minDate.getDate() - 1);
      this.maxDate.setDate(this.maxDate.getDate() + 7);
      this.bsRangeValue = [this.bsValue, this.maxDate];
   }

   ngOnInit(): void {
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

Il componente a discesa ngx-bootstrap è attivabile e fornisce un overlay contestuale per visualizzare un elenco di collegamenti, ecc. Con le direttive a discesa possiamo rendere interattivi i menu a discesa.

BsDropdownDirective

selettore

[bsDropdown],[dropdown]

Ingressi

autoClose - booleano, indica che il menu a discesa verrà chiuso al clic su un elemento o un documento e dopo aver premuto ESC
container - string, un selettore che specifica l'elemento a cui aggiungere il popover.
dropup - booleano, questo attributo indica che il menu a discesa deve essere aperto verso l'alto.
insideClick - booleano, questo attributo indica che il menu a discesa non deve chiudersi al clic interno quando autoClose è impostato su true.
isAnimated - booleano, indica che il menu a discesa sarà animato
isDisabled - booleano, Disabilita l'interruttore a discesa e nasconde il menu a discesa se aperto
isOpen - booleano, Restituisce se il popover è attualmente visualizzato o meno
placement- stringa, posizionamento di un popover. Accetta: "top", "bottom", "left", "right"
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi.

Uscite

isOpenChange - Emette un evento quando isOpen cambia
onHidden - Emette un evento quando il popover è nascosto
onShown - Emette un evento quando viene mostrato il popover

Metodi

show()- Apre il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
hide()- Chiude il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
toggle()- Attiva o disattiva il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
setConfig() - Imposta la configurazione per il popover

Esempio

Poiché utilizzeremo i menu a discesa, dobbiamo aggiornare app.module.ts utilizzato nel capitolo DatePicker di ngx-bootstrap da utilizzareBsDropdownModule e BsDropdownConfig.

Aggiorna app.module.ts per utilizzare BsDropdownModule e 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 { }

Aggiorna test.component.html per utilizzare i menu a discesa.

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>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {}
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.

Il componente modale ngx-bootstrap è un prompt di dialogo flessibile e altamente configurabile e fornisce più impostazioni predefinite e può essere utilizzato con un codice minimo.

ModalDirective

selettore

[bsModal]

Ingressi

config - ModalOptions, permette di impostare la configurazione modale tramite la proprietà dell'elemento

Uscite

onHidden - Questo evento viene generato quando il modale ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
onHide - Questo evento viene generato immediatamente quando è stato chiamato il metodo di istanza hide.
onShow - Questo evento si attiva immediatamente quando viene chiamato il metodo dell'istanza show.
onShown - Questo evento viene generato quando il modale è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).

Metodi

show() - Permette di aprire manualmente il modale.
hide() - Permette di chiudere manualmente modale.
toggle() - Consente di attivare manualmente la visibilità modale.
showElement() - Mostra finestra di dialogo.
focusOtherModal() - Trucchi per eventi.

Esempio

Poiché utilizzeremo un modale, dobbiamo aggiornare app.module.ts utilizzato nel capitolo a discesa ngx-bootstrap da utilizzareModalModule e BsModalService.

Aggiorna app.module.ts per utilizzare ModalModule e BsModalService.

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';
import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';

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

Aggiorna test.component.html per utilizzare il modal.

test.component.html

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>

<ng-template #template>
   <div class="modal-header">
      <h4 class="modal-title pull-left">Modal</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
         <span aria-hidden="true">×</span>
      </button>
   </div>
   <div class="modal-body">
      This is a sample modal dialog box.
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
   </div>
</ng-template>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

test.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

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

   modalRef: BsModalRef;
   constructor(private modalService: BsModalService) {}

   openModal(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template);
   }

   ngOnInit(): void {
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

Il componente di paginazione ngx-bootstrap fornisce collegamenti di paginazione o un componente di paginazione al tuo sito o componente.

PaginationComponent

selettore

pagination

Ingressi

align - booleano, se vero allinea ogni collegamento ai lati del cercapersone
boundaryLinks - booleano, se falso il primo e l'ultimo pulsante saranno nascosti
customFirstTemplate - TemplateRef <PaginationLinkContext>, modello personalizzato per il primo collegamento
customLastTemplate - TemplateRef <PaginationLinkContext>, modello personalizzato per l'ultimo collegamento
customNextTemplate - TemplateRef <PaginationLinkContext>, modello personalizzato per il collegamento successivo
customPageTemplate - TemplateRef <PaginationLinkContext>, modello personalizzato per il collegamento alla pagina
customPreviousTemplate - TemplateRef <PaginationLinkContext>, modello personalizzato per il collegamento precedente
directionLinks - booleano, se falso i pulsanti precedente e successivo verranno nascosti
disabled - booleano, se vero il componente di paginazione sarà disabilitato
firstText - booleano, testo del primo pulsante
itemsPerPage- numero, numero massimo di elementi per pagina. Se il valore è inferiore a 1, verranno visualizzati tutti gli elementi su una pagina
lastText - stringa, testo dell'ultimo pulsante
maxSize - numero, numero limite per i collegamenti alle pagine nel cercapersone
nextText - stringa, testo del pulsante successivo
pageBtnClass - stringa, aggiungi classe a <li>
previousText - stringa, testo del pulsante precedente
rotate - booleano, se true la pagina corrente sarà al centro dell'elenco delle pagine
totalItems - numero, numero totale di elementi in tutte le pagine

Uscite

numPages - attivato quando cambia il conteggio delle pagine totali, $ event: number è uguale al conteggio delle pagine totali.
pageChanged - attivato quando la pagina è stata modificata, $ event: {page, itemsPerPage} è uguale all'oggetto con l'indice della pagina corrente e il numero di elementi per pagina.

Esempio

Dato che useremo una paginazione, dobbiamo aggiornare app.module.ts usato nel capitolo ngx-bootstrap Modals da usarePaginationModule e PaginationConfig.

Aggiorna app.module.ts per usare PaginationModule e PaginationConfig.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';

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

Aggiorna test.component.html per utilizzare il modal.

test.component.html

<div class="row">
   <div class="col-xs-12 col-12">
      <div class="content-wrapper">
         <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
      </div>
      <pagination [boundaryLinks]="showBoundaryLinks" 
         [directionLinks]="showDirectionLinks" 
         [totalItems]="contentArray.length"
         [itemsPerPage]="5"
         (pageChanged)="pageChanged($event)"></pagination>
   </div>
</div>
<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="showBoundaryLinks">Show Boundary Links</label>
      <br/>
      <label><input type="checkbox" [(ngModel)]="showDirectionLinks">Show Direction Links</label>
   </div>
</div>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

test.component.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   contentArray: string[] = new Array(50).fill('');
   returnedArray: string[];
   showBoundaryLinks: boolean = true;
   showDirectionLinks: boolean = true;
   constructor() {}

   pageChanged(event: PageChangedEvent): void {
      const startItem = (event.page - 1) * event.itemsPerPage;
      const endItem = event.page * event.itemsPerPage;
      this.returnedArray = this.contentArray.slice(startItem, endItem);
   }
   ngOnInit(): void {
      this.contentArray = this.contentArray.map((v: string, i: number) => {
         return 'Line '+ (i + 1);
      });
      this.returnedArray = this.contentArray.slice(0, 5);
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

Il componente popover ngx-bootstrap fornisce un piccolo componente di sovrapposizione per fornire piccole informazioni su un componente.

PopoverDirective

selettore

popover

Ingressi

adaptivePosition - booleano, imposta la disabilitazione della posizione adattiva.
container - string, un selettore che specifica l'elemento a cui aggiungere il popover.
containerClass - stringa, classe Css per il contenitore popover
delay - numero, ritardo prima di mostrare il suggerimento
isOpen - booleano, Restituisce se il popover è attualmente visualizzato o meno
outsideClick - booleano, Chiudi popover su clic esterno, impostazione predefinita: false
placement- "top" | "fondo" | "sinistra" | "giusto" | "auto" | "in alto a sinistra" | "in alto a destra" | "in alto a destra" | "in basso a destra" | "in basso a destra" | "in basso a sinistra" | "in basso a sinistra" | "left top", posizionamento di un popover. Accetta: "top", "bottom", "left", "right".
popover- stringa | TemplateRef <any>, Contenuto da visualizzare come popover.
popoverContext - any, contesto da utilizzare se il popover è un modello.
popoverTitle - stringa, titolo di un popover.
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi.

Uscite

onHidden - Emette un evento quando il popover è nascosto.
onShown - Emette un evento quando viene mostrato il popover.

Metodi

setAriaDescribedBy() - Imposta l'attributo aria-descrittoBy per la direttiva dell'elemento e imposta l'ID per il popover.
show()- Apre il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
hide()- Chiude il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
toggle()- Attiva o disattiva il popover di un elemento. Questo è considerato un trigger "manuale" del popover.

Esempio

Dato che useremo un popover, dobbiamo aggiornare app.module.ts usato nel capitolo Pagination ngx-bootstrap da usarePopoverModule e PopoverConfig.

Aggiorna app.module.ts per utilizzare PopoverModule e PopoverConfig.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';

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

Aggiorna test.component.html per utilizzare il modal.

test.component.html

<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint." [outsideClick]="true">
   Default Popover
</button>
<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint."
   popoverTitle="Tutorialspoint" 
   [outsideClick]="true"
   placement="right">
   Right Aligned popover
</button>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

test.component.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

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

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

Il componente barra di avanzamento ngx-bootstrap fornisce un componente di avanzamento per mostrare l'avanzamento di un flusso di lavoro con barre flessibili.

ProgressbarComponent

selettore

progressbar

Ingressi

animate - booleano, se vero il valore della modifica della barra di avanzamento verrà animato.
max - numero, valore totale massimo dell'elemento di avanzamento.
striped - booleano, se true, vengono applicate le classi con striping.
type - ProgressbarType, fornisce una delle quattro classi contestuali supportate: successo, informazioni, avviso, pericolo.
value- numero | qualsiasi [], valore corrente della barra di avanzamento. Potrebbe essere un numero o un array di oggetti come {"value": 15, "type": "info", "label": "15%"}.

Esempio

Poiché utilizzeremo una barra di avanzamento, dobbiamo aggiornare app.module.ts utilizzato nel capitolo popover ngx-bootstrap da utilizzareProgressbarModule e ProgressbarConfig.

Aggiorna app.module.ts per utilizzare ProgressbarModule e ProgressbarConfig.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';

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

Aggiorna test.component.html per utilizzare il modal.

test.component.html

<div class="row">
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value"></progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="warning"
            [striped]="true">{{value}}%</progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="danger" 
            [striped]="true" [animate]="true"
            ><i>{{value}} / {{max}}</i></progressbar>
      </div>
   </div>
</div>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {

   max: number = 100;
   value: number = 25;
   constructor() {}

   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200.

Il componente di valutazione ngx-bootstrap fornisce un componente di valutazione configurabile, una barra a stella per impostazione predefinita.

RatingComponent

selettore

rating

Ingressi

customTemplate - TemplateRef <any>, modello personalizzato per le icone.
max- numero, no. di icone, predefinito: 5.
readonly - booleano, se true non reagirà a nessun evento utente.
titles - stringa [], array di titoli di icone, predefinito: ([1, 2, 3, 4, 5])

Uscite

onHover - attivato quando l'icona è selezionata, $ event: number è uguale alla valutazione selezionata.
onLeave - attivato quando viene selezionata l'icona, $ event: number è uguale al valore di valutazione precedente.

Esempio

Dato che useremo una valutazione, dobbiamo aggiornare app.module.ts usato nel capitolo ngx-bootstrap ProgressBar da usareRatingModule, RatingConfig.

Aggiorna app.module.ts per utilizzare RatingModule e RatingConfig.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare la valutazione.

test.component.html

<rating [(ngModel)]="value" 
   [max]="max" 
   [readonly]="false" 
   [titles]="['one','two','three','four']"></rating>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   max: number = 10;
   value: number = 5;
   constructor() {}
   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

Il componente ordinabile ngx-bootstrap fornisce un componente ordinabile configurabile, con supporto del trascinamento.

SortableComponent

selettore

bs-sortable

Ingressi

fieldName - stringa, nome del campo se l'array di input è costituito da oggetti.
itemActiveClass - stringa, nome della classe per l'elemento attivo.
itemActiveStyle- {[chiave: stringa]: stringa; }, oggetto di stile per l'elemento attivo.
itemClass - stringa, nome della classe per l'elemento
itemStyle - stringa, nome della classe per l'elemento
itemTemplate- TemplateRef <any>, utilizzato per specificare un modello di elemento personalizzato. Variabili del modello: elemento e indice;
placeholderClass - stringa, nome della classe per segnaposto
placeholderItem - stringa, elemento segnaposto che verrà mostrato se la raccolta è vuota
placeholderStyle - stringa, oggetto di stile per segnaposto
wrapperClass - stringa, nome della classe per il wrapper degli elementi
wrapperStyle- {[chiave: stringa]: stringa; }, oggetto di stile per il wrapper degli elementi

Uscite

onChange- attivato al cambio di array (riordino, inserimento, rimozione), come ngModelChange. Restituisce la nuova raccolta di elementi come carico utile.

Esempio

Dato che utilizzeremo un ordinabile, dobbiamo aggiornare app.module.ts utilizzato nel capitolo Valutazione ngx-bootstrap da utilizzareSortableModule e DraggableItemService.

Aggiorna app.module.ts per utilizzare SortableModule e DraggableItemService.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna styles.css per utilizzare gli stili per il componente ordinabile.

Styles.css

.sortableItem {
   padding: 6px 12px;
   margin-bottom: 4px;
   font-size: 14px;
   line-height: 1.4em;
   text-align: center;
   cursor: grab;
   border: 1px solid transparent;
   border-radius: 4px;
   border-color: #adadad;
}

.sortableItemActive {
   background-color: #e6e6e6;
   box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.sortableWrapper {
   min-height: 150px;
}

Aggiorna test.component.html per utilizzare il componente ordinabile.

test.component.html

<bs-sortable
   [(ngModel)]="items"
   fieldName="name"
   itemClass="sortableItem"
   itemActiveClass="sortableItemActive"
   wrapperClass="sortableWrapper">
</bs-sortable>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   items = [
      {
         id: 1,
         name: 'Apple'
      },
      {
         id: 2,
         name: 'Orange'
      },
      {
         id: 3,
         name: 'Mango'
      }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200.

Il componente ngx-bootstrap tabs fornisce un componente Tab facile da usare e altamente configurabile.

TabsetComponent

selettore

tabset

Ingressi

justified - booleano, se le tabulazioni vere riempiono il contenitore e hanno una larghezza costante.
type - stringa, classe del contesto di navigazione: "schede" o "pillole".
vertical - se le schede vere saranno posizionate verticalmente.

TabDirective

selettore

tab, [tab]

Ingressi

active - booleano, attiva / disattiva lo stato della scheda.
customClass- la stringa, se impostata, verrà aggiunta all'attributo class della scheda. Sono supportate più classi.
disabled - booleano, se la scheda true non può essere attivata.
heading - stringa, testo dell'intestazione della tabulazione.
id- stringa, tab id. Lo stesso ID con il suffisso "-link" verrà aggiunto al corrispondente
element.
removable - booleano, se la scheda vera può essere rimovibile, verrà visualizzato un pulsante aggiuntivo.

Uscite

deselect - attivato quando la scheda è diventata inattiva, $ event: Tab è uguale all'istanza deselezionata del componente Tab.
removed - attivato prima che la scheda venga rimossa, $ event: la scheda è uguale all'istanza della scheda rimossa.
selectTab - attivato quando la scheda è diventata attiva, $ event: Tab è uguale all'istanza selezionata del componente Tab.

Esempio

Dato che useremo una scheda, dobbiamo aggiornare app.module.ts usato nel capitolo ordinabile ngx-bootstrap da usareTabsModule e TabsetConfig.

Aggiorna app.module.ts per utilizzare TabsModule e TabsetConfig.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare il componente schede.

test.component.html

<tabset>
   <tab heading="Home">Home</tab>
   <tab *ngFor="let tabz of tabs"
      [heading]="tabz.title"
      [active]="tabz.active"
      (selectTab)="tabz.active = true"        
      [disabled]="tabz.disabled">
      {{tabz?.content}}
   </tab>
</tabset>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   tabs = [
      { title: 'First', content: 'First Tab Content' },
      { title: 'Second', content: 'Second Tab Content', active: true },
      { title: 'Third', content: 'Third Tab Content', removable: true },
      { title: 'Four', content: 'Fourth Tab Content', disabled: true }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

Il componente ngx-bootstrap timepicker fornisce un componente Time Picker facile da usare e altamente configurabile.

TimepickerComponent

selettore

timepicker

Ingressi

arrowkeys - booleano, se true i valori di ore e minuti possono essere modificati utilizzando i tasti freccia su / giù della tastiera.
disabled - booleano, se vero i campi delle ore e dei minuti saranno disabilitati.
hoursPlaceholder - stringa, segnaposto per il campo delle ore nel timepicker.
hourStep - numero, ora cambia passo.
max - Data, tempo massimo che l'utente può selezionare.
meridians - stringa [], etichette dei meridiani basate sulla località.
min - Data, tempo minimo che l'utente può selezionare.
minutesPlaceholder - stringa, segnaposto per il campo dei minuti nel timepicker.
minuteStep - numero, ora cambia passo.
mousewheel - booleano, se è vero lo scorrimento all'interno delle ore e dei minuti inseriti cambierà il tempo.
readonlyInput - booleano, se vero i campi delle ore e dei minuti saranno di sola lettura.
secondsPlaceholder - stringa, segnaposto per il campo dei secondi nel timepicker.
secondsStep - numero, i secondi cambiano passo.
showMeridian - booleano, se verrà mostrato il vero meridiano.
showMinutes - booleano, mostra i minuti nel timepicker.
showSeconds - booleano, mostra i secondi nel timepicker.
showSpinners - booleano, se vere frecce di selezione sopra e sotto gli input verranno mostrate.

Uscite

isValid - emette true se il valore è una data valida.

Esempio

Dato che utilizzeremo un TimePicker, dobbiamo aggiornare app.module.ts usato nel capitolo Tabs ngx-bootstrap da usareTimepickerModule.

Aggiorna app.module.ts per utilizzare TimepickerModule.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare il componente timepicker.

test.component.html

<timepicker [(ngModel)]="time"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

<timepicker [(ngModel)]="time" [showMeridian]="false"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   time: Date = new Date();
   constructor() {}
   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

Il componente Tooltip ngx-bootstrap fornisce un componente Tooltip facile da usare e altamente configurabile.

TooltipDirective

selettore

[tooltip], [tooltipHtml]

Ingressi

adaptivePosition - booleano, imposta la disabilitazione della posizione adattiva.
container - string, un selettore che specifica l'elemento a cui aggiungere il tooltip.
containerClass - stringa, classe Css per il contenitore dei tooltip.
delay - numero, ritardo prima di mostrare il suggerimento.
isDisabled - booleano, consente di disabilitare il tooltip.
isOpen - booleano, Restituisce se il tooltip è attualmente visualizzato o meno.
placement- stringa, posizionamento di un suggerimento. Accetta: "top", "bottom", "left", "right".
tooltip- stringa | TemplateRef <any>, Contenuto da visualizzare come tooltip.
tooltipAnimation - booleano, predefinito: vero.
tooltipAppendToBody - booleano.
tooltipClass - stringa.
tooltipContext - qualsiasi.
tooltipEnable - booleano.
tooltipFadeDuration - numero, predefinito: 150.
tooltipHtml- stringa | TemplateRef <qualsiasi>.
tooltipIsOpen - booleano.
tooltipPlacement - stringa
tooltipPopupDelay - numero
tooltipTrigger- stringa | corda[]
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi.

Uscite

onHidden - Emette un evento quando il suggerimento è nascosto.
onShown - Emette un evento quando viene visualizzato il suggerimento.
tooltipChange - Sparato quando il contenuto della descrizione comando cambia.
tooltipStateChanged - Sparato quando lo stato del tooltip cambia.

Esempio

Poiché utilizzeremo Tooltip, dobbiamo aggiornare app.module.ts utilizzato nel capitolo TimePicker di ngx-bootstrap da utilizzareTooltipModule.

Aggiorna app.module.ts per utilizzare TooltipModule.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TooltipModule  } from 'ngx-bootstrap/tooltip';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TooltipModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare il componente timepicker.

test.component.html

<timepicker [(ngModel)]="time"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

<timepicker [(ngModel)]="time" [showMeridian]="false"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   time: Date = new Date();
   constructor() {}
   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

La direttiva ngx-bootstrap Typeahead fornisce un componente Typeahead facile da usare, altamente configurabile e facile da usare.

TypeaheadDirective

selettore

[typeahead]

Ingressi

adaptivePosition - booleano, i set usano la posizione adattiva.
container - string, un selettore che specifica l'elemento a cui aggiungere il typeahead.
dropup - booleano, questo attributo indica che il menu a discesa deve essere aperto verso l'alto, impostazione predefinita: false.
isAnimated - booleano, attiva / disattiva l'animazione, predefinito: false.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, utilizzato per specificare un modello di elenco di opzioni personalizzato. Variabili del modello: corrispondenze, itemTemplate, query.
typeahead - Typeahead, sorgente delle opzioni, può essere Array of strings, objects o un Observable for external matching process.
typeaheadAsync- booleano, dovrebbe essere usato solo nel caso in cui l'attributo typeahead sia Observable of array. Se true - il caricamento delle opzioni sarà asincrono, altrimenti - sync. true ha senso se l'array di opzioni è grande.
typeaheadGroupField - stringa, quando la sorgente delle opzioni è un array di oggetti, il nome del campo che contiene il valore del gruppo, le corrispondenze vengono raggruppate da questo campo quando impostate.
typeaheadHideResultsOnBlur - booleano, utilizzato per nascondere il risultato sulla sfocatura.
typeaheadIsFirstItemActive- booleano, rende attivo il primo elemento in una lista. Predefinito: vero.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, utilizzato per specificare un modello di elemento personalizzato. Le variabili del modello esposte sono chiamate elemento e indice.
typeaheadLatinize- booleano, abbina i simboli latini. Se vero, la parola súper corrisponderebbe a super e viceversa. Predefinito: vero.
typeaheadMinLength- numero, numero minimo di caratteri che deve essere inserito prima dell'inizio del testo. Quando è impostato su 0, typeahead viene visualizzato in primo piano con l'elenco completo delle opzioni (limitato normalmente da typeaheadOptionsLimit)
typeaheadMultipleSearch- booleano, può essere utilizzato per eseguire una ricerca di più elementi e avere suggerimenti non per l'intero valore dell'input ma per il valore che viene dopo un delimitatore fornito tramite l'attributo typeaheadMultipleSearchDelimiters. Questa opzione può essere utilizzata solo insieme all'opzione typeaheadSingleWords se typeaheadWordDelimiters e typeaheadPhraseDelimiters sono diversi da typeaheadMultipleSearchDelimiters per evitare conflitti nel determinare quando delimitare più ricerche e quando una singola parola.
typeaheadMultipleSearchDelimiters- stringa, deve essere utilizzato solo nel caso in cui l'attributo typeaheadMultipleSearch sia true. Imposta il delimitatore di ricerca multipla per sapere quando iniziare una nuova ricerca. Il valore predefinito è virgola. Se è necessario utilizzare lo spazio, impostare in modo esplicito typeaheadWordDelimiters su qualcosa di diverso dallo spazio perché lo spazio è utilizzato per impostazione predefinita OPPURE impostare l'attributo typeaheadSingleWords su false se non è necessario utilizzarlo insieme a ricerche multiple.
typeaheadOptionField- stringa, quando la sorgente delle opzioni è un array di oggetti, il nome del campo che contiene il valore delle opzioni, usiamo l'elemento dell'array come opzione nel caso in cui questo campo sia mancante. Supporta proprietà e metodi annidati.
typeaheadOptionsInScrollableView - numero, valore predefinito: 5, specifica il numero di opzioni da mostrare nella visualizzazione a scorrimento
typeaheadOptionsLimit- numero, lunghezza massima dell'elenco degli elementi delle opzioni. Il valore predefinito è 20.
typeaheadOrderBy- TypeaheadOrder, utilizzato per specificare un ordine personalizzato delle corrispondenze. Quando la sorgente delle opzioni è un array di oggetti, è necessario impostare un campo per l'ordinamento. Nel caso in cui la sorgente delle opzioni sia un array di stringhe, un campo per l'ordinamento è assente. La direzione dell'ordine potrebbe essere modificata in ascendente o discendente.
typeaheadPhraseDelimiters- stringa, deve essere utilizzato solo nel caso in cui l'attributo typeaheadSingleWords sia vero. Imposta il delimitatore di parola in modo che corrisponda alla frase esatta. Il valore predefinito è virgolette semplici e doppie.
typeaheadScrollable - booleano, valore predefinito: false, specifica se typeahead è scorrevole
typeaheadSelectFirstItem - booleano, Valore predefinito: true, attivato quando un elenco di opzioni è stato aperto e l'utente ha fatto clic su Tab Se un valore è uguale a true, verrà scelto l'elemento primo o attivo nell'elenco Se il valore è false, verrà scelto un elemento attivo in l'elenco o niente
typeaheadSingleWords - booleano, Valore predefinito: true, Può essere utilizzato per cercare parole inserendo un singolo spazio bianco tra ogni carattere, ad esempio "C alifornia" corrisponderà a "California".
typeaheadWaitMs - numero, tempo di attesa minimo dopo l'ultimo carattere digitato prima dell'inizio della digitazione
typeaheadWordDelimiters- stringa, deve essere utilizzato solo nel caso in cui l'attributo typeaheadSingleWords sia vero. Imposta il delimitatore di parola per interrompere le parole. Il valore predefinito è spazio.

Uscite

typeaheadLoading - attivato quando lo stato "occupato" di questo componente è stato modificato, attivato solo in modalità asincrona, restituisce un valore booleano.
typeaheadNoResults - attivato su ogni evento chiave e restituisce true in caso di corrispondenze non rilevate.
typeaheadOnBlur- attivato quando si verifica un evento di sfocatura. restituisce l'elemento attivo.
typeaheadOnSelect - attivato quando l'opzione è stata selezionata, restituisce l'oggetto con i dati di questa opzione.

Esempio

Dato che utilizzeremo un Typeahead, dobbiamo aggiornare app.module.ts usato nel capitolo ngx-bootstrap Timepicker da usareTypeaheadModule.

Aggiorna app.module.ts per utilizzare TypeaheadModule.

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna test.component.html per utilizzare il componente timepicker.

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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 {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   constructor() {}
   ngOnInit(): void {
   } 
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.