This blog demo how to build angualr2 master/detail page, following is the template page for now.

Angular2 Master/Detail Page Example


<h2>Detect breakpoint by use <strong>@angular/cdk</strong></h2>
<p>
  breakpoint usually is CSS, you write media query for different style for
  different view. However, sometime you might want to do that in Javascript
  instead of CSS. At this blog, we'll use <strong>@angular/cdk</strong> at
  Angular Universal App project.
</p>
<h2>First intall <strong>@angular/cdk</strong></h2>
<pre><code>
"@angular/cdk": "^7.3.3",
</code>
</pre>
<h2>Add Layout Module to root angular module</h2>
<pre><code>
import { LayoutModule } from "@angular/cdk/layout";

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: "my-app" }),
    RouterModule.forRoot([
      { path: "", component: HomeComponent, pathMatch: "full" },
      { path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" },
      { path: "lazy/nested", loadChildren: "./lazy/lazy.module#LazyModule" }
    ]),
    TransferHttpCacheModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
</code>
</pre>
<h2>Use <strong>@angular/cdk</strong> at Angular component</h2>
<pre><code>
  ngOnInit(): void {
    this.breakpointObserver
      .observe(["(min-width: 500px)"])
      .subscribe((state: BreakpointState) =&gt; {
        if (state.matches) {
          console.log("Viewport is 500px or over!");
        } else {
          console.log("Viewport is getting smaller!");
        }
      });
  }
</code>
</pre>
<h3>References</h3>
<p>
  <a
    href="https://alligator.io/angular/breakpoints-angular-cdk/"
    target="_blank"
    >https://alligator.io/angular/breakpoints-angular-cdk/</a
  >
</p>


Sample code about how to detect breakpoint at Angular.

Detect Breakpoint at Angular


<p>
  Following is for someone who one to get quick hello world angular2 running,
  the code is reference from&nbsp;<a
    href="https://github.com/angular/quickstart"
    target="_blank"
    rel="noopener"
    >angular2's original quickstart GitHub source code</a
  >&nbsp;and with additional few udpates, all code shows here are at my Github
  repository&nbsp;<a
    href="https://github.com/keke78ui9/Angular2HelloWorld"
    target="_blank"
    rel="noopener"
    >Angular2HelloWorld</a
  >
</p>
<p><strong>File Structure</strong></p>
<pre
  style="
    margin-top: 0px;
    margin-bottom: 1em;
    padding: 5px;
    border: 0px;
    font-size: 13px;
    width: auto;
    max-height: 600px;
    overflow: auto;
    font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
      'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace,
      sans-serif;
    word-wrap: normal;
    color: #242729;
    background-color: #eff0f1;
  "
><code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; white-space: inherit;">.
+-- app
|   +-- main.ts
|   +-- app.component.ts
+-- .gitignore<br />+-- index.html<br />+-- package.json<br />+-- styles.css<br />+-- systemjs.config.js<br />+-- tsconfig.json<br />+-- typings.json</code></pre>
<h3>Features</h3>
<ul>
  <li>HelloWorld Angular2</li>
  <li>Runtime TypeScript compiler</li>
  <li>One Html example</li>
  <li>Css</li>
</ul>
<h3><code>index.html</code></h3>
<p>
  index.html is the main page, <code>my-app</code> is the section will inject by
  angular2 code.
</p>
<pre class="language-javascript">
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;!-- 1. Load libraries --&gt;
     &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3><code>package.json</code></h3>
<p>
  package.json contains all the dependency modules for this app, just run
  <code>npm install -d </code>, will install all the npm modules.
</p>
<pre class="language-javascript">
{
  "name": "angular2_helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  },
  "description": "helloworld",
  "repository": "helloworld"
}
</pre>
<h3><code>styles.css</code></h3>
<p>
  Just a style for this example, later want to try how to use SASS with this
  hello world structure.
</p>
<pre class="language-css">
h1 { color: #ffffff; font-family: 'Lato', sans-serif; font-size: 54px; font-weight: 300; line-height: 58px; margin: 0 0 58px; }
body {
    background-color: #333;
}
</pre>
<h3><code>systemjs.config.js</code></h3>
<p>
  A file from original angular2 quick start example, which bootstrap the
  angualr2 code.
</p>
<pre class="language-javascript">
/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);
</pre>
<h3><code>tsconfig.json</code></h3>
<p>Typescript config files.</p>
<pre class="language-javascript">
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
</pre>
<h3><code>typings.json</code></h3>
<p>Typing script config files.</p>
<pre class="language-javascript">
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}
</pre>
<h3><code>main.ts</code></h3>
<p>HelloWorld app's main class.</p>
<pre class="language-javascript">
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
</pre>
<h3><code>app.component.ts</code></h3>
<pre class="language-javascript">
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '&lt;h1&gt;Hello World! Angular2!&lt;/h1&gt;'
})
export class AppComponent { }
</pre>
<h3><code>.gitignore</code></h3>
<p>.gitignore, so you won't check-in extra code to git.</p>
<pre class="language-javascript">
.idea
typings/**
node_modules
jspm_packages
link-checker-results.txt
**/*npm-debug.log.*
*.js
*.js.map
_test-output
_temp

!**/*e2e-spec.js
!karma*.js
!protractor*.js
!systemjs.config.js
!typings/typings.d.ts
!wallaby.js
</pre>
<h3>Get code form github</h3>
<p>
  Now, you can get code as following, first clone and download to your local.
</p>
<pre class="language-javascript">
a:\&gt;git clone https://github.com/keke78ui9/Angular2HelloWorld helloAngular2
Cloning into 'helloAngular2'...
remote: Counting objects: 15, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 15 (delta 1), reused 11 (delta 0), pack-reused 0
Unpacking objects: 100% (15/15), done.
Checking connectivity... done.
</pre>
<p>Then go to the new folder contains the code</p>
<pre class="language-javascript">
a:\&gt;cd helloAngular2
</pre>
<pre class="language-javascript">
a:\helloAngular2&gt;npm install -d
</pre>
<pre class="language-javascript">
a:\helloAngular2&gt;npm start
</pre>


Use Angular2 to create a Simple Sample App.

Category Angular

Angular2 Master/Detail Page Example

Detect Breakpoint at Angular

Angular2 HelloWorld