Build Beautiful Angular Apps with Bootstrap

<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" ...>
  ...
</button>

<div [ngbCollapse]="isCollapsed" class="collapse navbar-collapse" ...>
  ...
</div>

export class AppComponent implements OnInit {
  title = 'Notes';
  isAuthenticated: boolean;
  isCollapsed = true;

  ...

}

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a routerLink="/">Home</a></li>
  <li class="breadcrumb-item active">Notes</li>
</ol>
<div class="card">
  <div class="card-body">
    <h2 class="card-title">Notes List</h2>
    <div class="card-text">
      <form #f="ngForm" class="form-inline">
        <div class="form-group">
          <label for="title">Title:</label>
          <input [(ngModel)]="filter.title" id="title" name="title" class="form-control ml-2 mr-2">
        </div>

        <button (click)="search()" [disabled]="!f?.valid" class="btn btn-primary">Search</button>
        <a [routerLink]="['../notes', 'new' ]" class="btn btn-default">New</a>
      </form>
    </div>
    <div *ngIf="noteList.length > 0">
      <div *ngIf="feedback.message" class="alert alert-{{feedback.type}} m-2">{{ feedback.message }}</div>
      <div class="table-responsive">
        <table class="table table-centered table-hover mb-0" id="datatable">
          <thead>
          <tr>
            <th class="border-top-0" scope="col">Id</th>
            <th class="border-top-0" scope="col">Title</th>
            <th class="border-top-0" scope="col">Text</th>
            <th class="border-top-0" scope="col" style="width:120px"></th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of noteList" [class.active]="item === selectedNote">
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.text}}</td>
            <td style="white-space: nowrap">
              <a [routerLink]="['../notes', item.id ]" class="btn btn-secondary">Edit</a>&nbsp;
              <button (click)="delete(item)" class="btn btn-danger">Delete</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
</div>

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a routerLink="/">Home</a></li>
  <li class="breadcrumb-item active">Notes</li>
</ol>
<div class="card">
  <div class="card-body">
    <h2 class="card-title">Notes Detail</h2>
    <div class="card-text">
      <div *ngIf="feedback.message" class="alert alert-{{feedback.type}}">{{ feedback.message }}</div>
      <form *ngIf="note" #editForm="ngForm" (ngSubmit)="save()">
        <div class="form-group">
          <label>Id</label>
          {{note.id || 'n/a'}}
        </div>

        <div class="form-group">
          <label for="title">Title</label>
          <input [(ngModel)]="note.title" id="title" name="title" class="form-control">
        </div>

        <div class="form-group">
          <label for="text">Text</label>
          <input [(ngModel)]="note.text" id="text" name="text" class="form-control">
        </div>

        <button type="submit" class="btn btn-primary" [disabled]="!editForm.form.valid">Save</button>
        <button type="button" class="btn btn-secondary ml-2" (click)="cancel()">Cancel</button>
      </form>
    </div>
  </div>
</div>

<div class="form-group">
  <label for="title">Title</label>
  <input [(ngModel)]="note.title" id="title" name="title" class="form-control" required
         #name="ngModel" [ngClass]="{'is-invalid': name.touched && name.invalid,  'is-valid': name.touched && name.valid}">
  <div [hidden]="name.valid" style="display: block" class="invalid-feedback">
    Title is required
  </div>
</div>

@GetMapping("/user/notes")
fun notes(principal: Principal, title: String?): List<Note> {
    println("Fetching notes for user: ${principal.name}")
    return if (title.isNullOrEmpty()) {
        repository.findAllByUser(principal.name)
    } else {
        println("Searching for title: ${title}")
        repository.findAllByUserAndTitleContainingIgnoringCase(principal.name, title)
    }
}

@RepositoryRestResource
interface NotesRepository : JpaRepository<Note, Long> {
    fun findAllByUser(name: String): List<Note>
    fun findAllByUserAndTitleContainingIgnoreCase(name: String, term: String): List<Note>
}

import { Directive, EventEmitter, Input, Output } from '@angular/core';

export type SortDirection = 'asc' | 'desc' | '';
const rotate: { [key: string]: SortDirection } = {asc: 'desc', desc: '', '': 'asc'};

export interface SortEvent {
  column: string;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class SortableHeaderDirective {

  @Input() sortable: string;
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

import { SortableHeaderDirective } from './note-list/sortable.directive';

@NgModule({
  ...
  declarations: [
    ...
    SortableHeaderDirective
  ],
  ...
}

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import { SortableHeaderDirective, SortEvent} from './sortable.directive';

export class NoteListComponent implements OnInit {
  @ViewChildren(SortableHeaderDirective) headers: QueryList<SortableHeaderDirective>;

  ...

  onSort({column, direction}: SortEvent) {
    // reset other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.filter.column = column;
    this.filter.direction = direction;
    this.search();
  }

  ...
}

export class NoteFilter {
  title = '';
  column: string;
  direction: string;
}

import { map } from 'rxjs/operators';

...

find(filter: NoteFilter): Observable<Note[]> {
  const params: any = {
    title: filter.title,
    sort: `${filter.column},${filter.direction}`,
  };
  if (!filter.direction) { delete params.sort; }

  const userNotes = 'http://localhost:8080/user/notes';
  return this.http.get(userNotes, {params, headers}).pipe(
    map((response: any) => {
      return response.content;
    })
  );
}

<thead>
  <tr>
    <th class="border-top-0" scope="col">#</th>
    <th class="border-top-0" scope="col" sortable="title" (sort)="onSort($event)">Title</th>
    <th class="border-top-0" scope="col" sortable="text" (sort)="onSort($event)">Text</th>
    <th class="border-top-0" scope="col" style="width:120px"></th>
  </tr>
</thead>

th[sortable] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

th[sortable].desc:before, th[sortable].asc:before {
  content: '';
  display: block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  float: left;
  margin-left: -22px;
}

th[sortable].desc:before {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

package com.okta.developer.notes

import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.security.core.annotation.AuthenticationPrincipal
import org.springframework.security.oauth2.core.oidc.user.OidcUser
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController
import java.security.Principal

@RestController
class UserController(val repository: NotesRepository) {

    @GetMapping("/user/notes")
    fun notes(principal: Principal, title: String?, pageable: Pageable): Page<Note> {
        println("Fetching notes for user: ${principal.name}")
        return if (title.isNullOrEmpty()) {
            repository.findAllByUser(principal.name, pageable)
        } else {
            println("Searching for title: ${title}")
            repository.findAllByUserAndTitleContainingIgnoreCase(principal.name, title, pageable)
        }
    }

    @GetMapping("/user")
    fun user(@AuthenticationPrincipal user: OidcUser): OidcUser {
        return user;
    }
}

import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable

...

@RepositoryRestResource
interface NotesRepository : JpaRepository<Note, Long> {
    fun findAllByUser(name: String, pageable: Pageable): Page<Note>
    fun findAllByUserAndTitleContainingIgnoreCase(name: String, term: String, pageable: Pageable): Page<Note>
}

@Component
class DataInitializer(val repository: NotesRepository) : ApplicationRunner {

    @Throws(Exception::class)
    override fun run(args: ApplicationArguments) {
        for (x in 0..1000) {
            repository.save(Note(title = "Note ${x}", user = "<your username>"))
        }
        repository.findAll().forEach { println(it) }
    }
}

export class NoteFilter {
  title = '';
  column: string;
  direction: string;
  page = 0;
  size = 20;
}

<div class="d-flex justify-content-between p-2">
  <ngb-pagination [maxSize]="10"
    [collectionSize]="total$ | async" [(page)]="filter.page" [pageSize]="filter.size" (pageChange)="onPageChange(filter.page)">
  </ngb-pagination>

  <select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="filter.size" (ngModelChange)="onChange(filter.size)">
    <option [ngValue]="10">10 items per page</option>
    <option [ngValue]="20">20 items per page</option>
    <option [ngValue]="100">100 items per page</option>
  </select>
</div>

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    ...
    NgbModule
  ],
  ...
}

import { Observable } from 'rxjs';

export class NoteListComponent implements OnInit {
  total$: Observable<number>;

  ...

  search(): void {
    this.noteService.load(this.filter);
    this.total$ = this.noteService.size$;
  }

  onChange(pageSize: number) {
    this.filter.size = pageSize;
    this.filter.page = 0;
    this.search();
  }

  onPageChange(page: number) {
    this.filter.page = page - 1;
    this.search();
    this.filter.page = page;
  }

  onSort({column, direction}: SortEvent) {
    // reset other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.filter.column = column;
    this.filter.direction = direction;
    this.filter.page = 0;
    this.search();
  }
}

import { BehaviorSubject, Observable } from 'rxjs';

...

export class NoteService {
  ...
  size$ = new BehaviorSubject<number>(0);

  ...

  find(filter: NoteFilter): Observable<Note[]> {
    const params: any = {
      title: filter.title,
      sort: `${filter.column},${filter.direction}`,
      size: filter.size,
      page: filter.page
    };
    if (!filter.direction) { delete params.sort; }

    const userNotes = 'http://localhost:8080/user/notes';
    return this.http.get(userNotes, {params, headers}).pipe(
      map((response: any) => {
        this.size$.next(response.totalElements);
        return response.content;
      })
    );
  }

  ...
}