MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

Angular Bootstrap

Marc Kapke

kapkema@gmail.com


Angular UI Bootstrap Module


Adding Angular UI Bootstrap To Project

  1. Use npm to install ng-bootstrap, bootstrap@4.0.0-alpha.6, jquery, tether
  2. Update .angular-cli.json to include bootstrap
  3. Import NgbModule.forRoot() in root module
  4. Import NbgModule into sub-modules

Install Latest Version of Bootstrap and Angular UI


Update .angular-cli styles block

"styles": [
  "styles.css", "../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
],


Update App Module Imports

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ArticleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Carousel control


Carousel control

<div class="container" style="margin-top:5em;">
  <div class="row">
        <ngb-carousel class="col-12">
          <template ngbSlide *ngFor="let article of articles">
            <img class="carousel-image" [src]="getArticleImageUrl(article)" [alt]="getArticleImageCaption(article)">
            <div class="carousel-caption">
              <h3></h3>
              <p></p>
            </div>
          </template>
        </ngb-carousel>
  </div>
</div>

Accordion control


Accordion control

<div class="container" style="margin-top:5em;">
  <div class="row">
    <ngb-accordion [closeOthers]="true" activeIds="1" class="col-12">
      <ngb-panel [id]="i" [title]="article.title" *ngFor="let article of articles, let i=index">
        <template ngbPanelContent>
          <h3></h3>
          
          <img class="accordion-image" [src]="getArticleImageUrl(article)"
          [alt]="getArticleImageCaption(article)" (click)="open(article)">
        </template>
      </ngb-panel>
    </ngb-accordion>
  </div>
</div>

Modals


Modal - view

<div class="modal-header">
  <h4 class="modal-title"></h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
 <app-article-detail [article]="article" [showContent]="false"
 [showTitle]="false" style="margin-top:-5em;"></app-article-detail>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

Modal - component

@Component({
  selector: 'app-article-detail-modal',
  templateUrl: 'article-detail-modal.component.html',
  styleUrls: ['article-detail-modal.component.css']
})
export class ArticleDetailModalComponent {

  @Input() article: Article;
  constructor(private activeModal: NgbActiveModal){

  }

}

Modal - open

open(article: Article) {
  const modalRef = this.modalService.open(ArticleDetailModalComponent, {size:'lg'});
  modalRef.componentInstance.article = article;
}

Typeahead


Typeahead - view

<div class="container" style="margin-top:5em;">
  <div class="row">
    <div class="col-12">
      <label>Search for Article:</label>
      <input type="text" class="form-control" [(ngModel)]="article" [ngbTypeahead]="search" [resultFormatter]="formatter" [inputFormatter]="formatter"/>
      <hr>
    </div>
  </div>
  <div class="row">
    <app-article-detail [article]="article" *ngIf="article?.title != null" style="margin-top:-5em;"></app-article-detail>
  </div>
</div>


Typeahead - component

export class ArticleListSearchComponent extends ArticleListComponent {
  article: Article;

  formatter = (result: Article) => result.title;
  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => term.length < 2 ? []
        : this.articles.filter(v => new RegExp(term, 'gi').test(v.title)).splice(0, 10));
}

Dropdown


Dropdown - view

<div ngbDropdown class="d-inline-block">
 <label>Category: </label>
 <button class="btn btn-outline-primary" id="dropdownMenu1"
 ngbDropdownToggle></button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
   <button *ngFor="let category of categories"
   class="dropdown-item" (click)="onCategoryChange(category)"></button>
 </div>
</div>