ng-bootstrap navbar demo

<!DOCTYPE html>
<html>

<head>
  <base href="." />
  <title>ng-bootstrap demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://unpkg.com/core-js@^2.4.1/client/shim.js"></script>
  <script src="https://unpkg.com/zone.js@0.8.10/dist/zone.js"></script>
  <script src="https://unpkg.com/zone.js@0.8.10/dist/long-stack-trace-zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@^0.1.8/Reflect.js"></script>
  <script src="https://unpkg.com/systemjs@^0.19.40/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app').catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>loading...</my-app>
</body>

</html>

var ver = {
    ng: '5.0.2'
  };
  
  System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  meta: {
    'typescript': {
      "exports": "ts"
    }
  },  
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {

    'app': './src',

    '@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common@' + ver.ng + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@' + ver.ng + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',

    'rxjs': 'npm:rxjs@^5.5.2',
    'tslib': 'npm:tslib/tslib.js',
    'typescript': 'npm:typescript@2.4.2/lib/typescript.js',

    '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-beta.8/bundles/ng-bootstrap.js'
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));


import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { navbar } from './navbar';
import { footer } from './footer';
import { dash } from './dash';

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.html',
  styleUrls: ['src/app.css']
})
export class App {
}   

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()], 
  declarations: [App, navbar, footer, dash]
  bootstrap: [App]
}) 
export class AppModule {}

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
  <a class="navbar-brand" href="#">Angular</a>
  <button class="navbar-toggler hidden-sm-up" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="navbarsDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="id01" href="#" ngbDropdownToggle>Files</a>
        <div class="dropdown-menu" aria-labelledby="id01" ngbDropdownMenu>
          <a class="dropdown-item" href="#">HTML</a>
          <a class="dropdown-item" href="#">TS</a>
          <a class="dropdown-item" href="#">JS</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

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

@Component({
  selector: 'app-navbar',
  templateUrl: 'src/navbar.html'
})
export class navbar {
  isNavbarCollapsed=true;
}

body {
    min-height: 75rem;
    padding-top: 5rem;
  }

<footer class="footer">
  <div class="float-right footer-text">
    <span class="text-muted">Sticky Footer</span>
  </div>
</footer>

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: 'src/footer.html',
  styleUrls: ['src/footer.css']
})
export class footer implements OnInit {
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
  }
  .footer-text {
    margin-right: 2rem;
  }

<app-navbar></app-navbar>
<div class="router-outlet">
  <app-dash></app-dash>
</div>
<app-footer></app-footer>

.router-outlet {
    margin: 2rem;
}

<form>
    <div class="form-group row">
      <label for="text1" class="col-sm-2 col-form-label">Some text</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="text1" name="text1" placeholder="{{ sometext }}" [(ngModel)]="sometext">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">File Type</label>
      <div class="col-sm-10">
        <select name="filetype" class="form-control" [(ngModel)]="fileType">
          <option *ngFor="let fileType of fileTypes" [ngValue]="fileType">{{fileType.name}}</option>
        </select>
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            <label class="form-check-label" for="gridRadios1">
              First radio
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            <label class="form-check-label" for="gridRadios2">
              Second radio
            </label>
          </div>
          <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            <label class="form-check-label" for="gridRadios3">
              Third disabled radio
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">Checkbox</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1">
            Example checkbox
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary" (click)="click_me()">Click Me</button>
      </div>
    </div>
  </form>

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { delay } from 'rxjs/operators';
import { forkJoin } from 'rxjs/observable/forkJoin';
import 'rxjs/add/operator/do';

@Component({
  selector: 'app-dash',
  templateUrl: 'src/dash.html'
})
export class dash implements OnInit {
  fileTypes = [
    {name:'html'},
    {name:'ts'},
    {name:'js'},
    {name:'css'}
  ];
  sometext = 'Some text ...';
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  constructor(private http: HttpClient) {}
  click_me(): void {
    this.sometext = '';
    forkJoin([
      of(this.first_()),
      of(this.second_())
      ]).subscribe(val => {
        this.sometext = 'done...';
      })
  }
first_(): Observable<any> {
    this.http.get<any>('data/sampledata.json', this.httpOptions)
        .do(val => {
            this.sometext = val.items[0].value;
        });
}

second_(): Observable<any> {
    this.http.get<item[]>('data/sampledata.json', this.httpOptions)
        .do(val => {
            this.sometext = val.items[1].value;
        });
  }
}

{
  "items": [
    {"id": 1, "value": "one"},
    {"id": 2, "value": "two"}
    ]
}