├── demos
├── demo-angular-four
│ ├── src
│ │ ├── assets
│ │ │ └── .gitkeep
│ │ ├── app
│ │ │ ├── about
│ │ │ │ ├── about.component.css
│ │ │ │ ├── about.component.html
│ │ │ │ └── about.component.ts
│ │ │ ├── home
│ │ │ │ ├── home.component.css
│ │ │ │ ├── home.component.ts
│ │ │ │ └── home.component.html
│ │ │ ├── github
│ │ │ │ ├── repo-list
│ │ │ │ │ ├── repo-list.component.css
│ │ │ │ │ ├── repo-list.component.html
│ │ │ │ │ └── repo-list.component.ts
│ │ │ │ ├── repo-browser
│ │ │ │ │ ├── repo-browser.component.css
│ │ │ │ │ ├── repo-browser.component.html
│ │ │ │ │ └── repo-browser.component.ts
│ │ │ │ ├── repo-detail
│ │ │ │ │ ├── repo-detail.component.css
│ │ │ │ │ ├── repo-detail.component.html
│ │ │ │ │ └── repo-detail.component.ts
│ │ │ │ ├── organisation
│ │ │ │ │ ├── organisation.component.html
│ │ │ │ │ └── organisation.component.ts
│ │ │ │ ├── github.component.ts
│ │ │ │ └── shared
│ │ │ │ │ └── github.service.ts
│ │ │ ├── app.resolver.ts
│ │ │ ├── app.component.scss
│ │ │ ├── app.component.html
│ │ │ ├── app.routes.ts
│ │ │ ├── app.component.ts
│ │ │ └── app.module.ts
│ │ ├── environments
│ │ │ ├── environment.prod.ts
│ │ │ └── environment.ts
│ │ ├── styles.css
│ │ ├── favicon.ico
│ │ ├── typings.d.ts
│ │ ├── tsconfig.app.json
│ │ ├── index.html
│ │ ├── main.ts
│ │ ├── tsconfig.spec.json
│ │ ├── test.ts
│ │ └── polyfills.ts
│ ├── e2e
│ │ ├── app.po.ts
│ │ ├── tsconfig.e2e.json
│ │ └── app.e2e-spec.ts
│ ├── .editorconfig
│ ├── tsconfig.json
│ ├── .gitignore
│ ├── protractor.conf.js
│ ├── karma.conf.js
│ ├── README.md
│ ├── .angular-cli.json
│ ├── package.json
│ └── tslint.json
└── demo-angular-six
│ ├── src
│ ├── assets
│ │ └── .gitkeep
│ ├── app
│ │ ├── app.component.scss
│ │ ├── shared
│ │ │ ├── about
│ │ │ │ ├── about.component.css
│ │ │ │ ├── about.component.html
│ │ │ │ └── about.component.ts
│ │ │ ├── home
│ │ │ │ ├── home.component.css
│ │ │ │ ├── home.component.ts
│ │ │ │ └── home.component.html
│ │ │ ├── github
│ │ │ │ ├── repo-list
│ │ │ │ │ ├── repo-list.component.css
│ │ │ │ │ ├── repo-list.component.html
│ │ │ │ │ └── repo-list.component.ts
│ │ │ │ ├── repo-detail
│ │ │ │ │ ├── repo-detail.component.css
│ │ │ │ │ ├── repo-detail.component.html
│ │ │ │ │ └── repo-detail.component.ts
│ │ │ │ ├── organisation
│ │ │ │ │ ├── organisation.component.html
│ │ │ │ │ └── organisation.component.ts
│ │ │ │ └── github.component.ts
│ │ │ └── github.service.ts
│ │ ├── github
│ │ │ └── repo-browser
│ │ │ │ ├── repo-browser.component.css
│ │ │ │ ├── repo-browser.component.html
│ │ │ │ └── repo-browser.component.ts
│ │ ├── app.resolver.ts
│ │ ├── app.component.html
│ │ ├── app.routes.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── styles.scss
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ ├── tslint.json
│ ├── browserslist
│ ├── main.ts
│ ├── index.html
│ ├── test.ts
│ ├── karma.conf.js
│ └── polyfills.ts
│ ├── projects
│ ├── bootstrap-demo
│ │ ├── src
│ │ │ ├── assets
│ │ │ │ └── .gitkeep
│ │ │ ├── app
│ │ │ │ ├── app.component.css
│ │ │ │ ├── github
│ │ │ │ │ └── repo-browser
│ │ │ │ │ │ ├── repo-browser.component.css
│ │ │ │ │ │ ├── repo-browser.component.html
│ │ │ │ │ │ └── repo-browser.component.ts
│ │ │ │ ├── app.component.scss
│ │ │ │ ├── app.component.spec.ts
│ │ │ │ ├── app.routes.ts
│ │ │ │ ├── app.component.ts
│ │ │ │ ├── app.module.ts
│ │ │ │ └── app.component.html
│ │ │ ├── environments
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── styles.css
│ │ │ ├── favicon.ico
│ │ │ ├── main.ts
│ │ │ ├── index.html
│ │ │ ├── test.ts
│ │ │ └── polyfills.ts
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.spec.json
│ │ ├── tslint.json
│ │ ├── browserslist
│ │ └── karma.conf.js
│ ├── material-demo
│ │ ├── src
│ │ │ ├── assets
│ │ │ │ └── .gitkeep
│ │ │ ├── app
│ │ │ │ ├── github
│ │ │ │ │ └── repo-browser
│ │ │ │ │ │ ├── repo-browser.component.css
│ │ │ │ │ │ ├── repo-browser.component.html
│ │ │ │ │ │ └── repo-browser.component.ts
│ │ │ │ ├── app.component.scss
│ │ │ │ ├── layout
│ │ │ │ │ ├── layout.component.html
│ │ │ │ │ └── layout.component.ts
│ │ │ │ ├── app.component.spec.ts
│ │ │ │ ├── app.routes.ts
│ │ │ │ ├── app.component.html
│ │ │ │ ├── app.component.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── environments
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── favicon.ico
│ │ │ ├── styles.css
│ │ │ ├── main.ts
│ │ │ ├── index.html
│ │ │ ├── test.ts
│ │ │ └── polyfills.ts
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.spec.json
│ │ ├── tslint.json
│ │ ├── browserslist
│ │ └── karma.conf.js
│ ├── bootstrap-demo-e2e
│ │ ├── src
│ │ │ ├── app.po.ts
│ │ │ └── app.e2e-spec.ts
│ │ ├── tsconfig.e2e.json
│ │ └── protractor.conf.js
│ └── material-demo-e2e
│ │ ├── src
│ │ ├── app.po.ts
│ │ └── app.e2e-spec.ts
│ │ ├── tsconfig.e2e.json
│ │ └── protractor.conf.js
│ ├── e2e
│ ├── src
│ │ ├── app.po.ts
│ │ └── app.e2e-spec.ts
│ ├── tsconfig.e2e.json
│ └── protractor.conf.js
│ ├── .editorconfig
│ ├── build.ps1
│ ├── tsconfig.json
│ ├── .gitignore
│ ├── README.md
│ ├── package.json
│ ├── tslint.json
│ └── angular.json
├── .gitignore
├── src
├── breadcrumb.ts
├── index.ts
├── breadcrumb.module.ts
├── breadcrumb.component.ts
└── breadcrumb.service.ts
├── style.css
├── rollup.config.js
├── tsconfig.json
├── LICENSE
├── package-dist.json
├── .github
└── ISSUE_TEMPLATE.md
├── package.json
├── tslint.json
└── README.md
/demos/demo-angular-four/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .tmp
3 | dist
4 | node_modules
5 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/about/about.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/home/home.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/about/about.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/home/home.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-list/repo-list.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-browser/repo-browser.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-detail/repo-detail.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/github/repo-browser/repo-browser.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/repo-list/repo-list.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/repo-detail/repo-detail.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/about/about.component.html:
--------------------------------------------------------------------------------
1 |
This is the about component!
2 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/github/repo-browser/repo-browser.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/github/repo-browser/repo-browser.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/about/about.component.html:
--------------------------------------------------------------------------------
1 | This is the about component!
2 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emilol/angular-crumbs/HEAD/demos/demo-angular-six/src/favicon.ico
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emilol/angular-crumbs/HEAD/demos/demo-angular-four/src/favicon.ico
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-detail/repo-detail.component.html:
--------------------------------------------------------------------------------
1 | {{ repoDetails.full_name }}
2 |
3 | this.repoDetails = {{ repoDetails | json }}
4 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emilol/angular-crumbs/HEAD/demos/demo-angular-six/projects/bootstrap-demo/src/favicon.ico
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emilol/angular-crumbs/HEAD/demos/demo-angular-six/projects/material-demo/src/favicon.ico
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/repo-detail/repo-detail.component.html:
--------------------------------------------------------------------------------
1 | {{ repoDetails.full_name }}
2 |
3 | this.repoDetails = {{ repoDetails | json }}
4 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import '~primeicons/primeicons.css';
2 | @import '~primeng/resources/themes/nova-light/theme.css';
3 | @import '~primeng/resources/primeng.min.css';
4 |
--------------------------------------------------------------------------------
/src/breadcrumb.ts:
--------------------------------------------------------------------------------
1 | import { Route } from "@angular/router";
2 |
3 | export class Breadcrumb {
4 | displayName: string;
5 | terminal: boolean;
6 | url: string;
7 | route: Route | null;
8 | }
9 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/organisation/organisation.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{organisation.name}}
4 |
5 |
6 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/organisation/organisation.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{organisation.name}}
4 |
5 |
6 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/app.resolver.ts:
--------------------------------------------------------------------------------
1 | import {GithubService} from "./github/shared/github.service";
2 |
3 | // an array of services to resolve routes with data
4 | export const APP_RESOLVER_PROVIDERS = [
5 | GithubService
6 | ];
7 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/github.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'github',
5 | template: ' '
6 | })
7 | export class GitHubComponent { }
8 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/app.resolver.ts:
--------------------------------------------------------------------------------
1 | import { GithubService } from "src/app/shared/github.service";
2 |
3 | // an array of services to resolve routes with data
4 | export const APP_RESOLVER_PROVIDERS = [
5 | GithubService
6 | ];
7 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { Breadcrumb } from './breadcrumb';
2 | export { BreadcrumbModule } from './breadcrumb.module';
3 | export { BreadcrumbService } from './breadcrumb.service';
4 | export { BreadcrumbComponent } from './breadcrumb.component';
5 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/github.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'github',
5 | template: ' '
6 | })
7 | export class GitHubComponent { }
8 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | html, body {
3 | height: 100%;
4 | }
5 |
6 | body {
7 | padding: 0px;
8 | margin: 0px;
9 | }
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-list/repo-list.component.html:
--------------------------------------------------------------------------------
1 | Repositories
2 |
9 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | @import '~bootstrap/dist/css/bootstrap.min.css';
2 |
3 | .sidenav, .main-content {
4 | min-height: calc(100vh - 96px);
5 | }
6 |
7 | .main-content {
8 | padding: 20px 50px 50px 20px;
9 | }
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'home',
5 | styleUrls: ['./home.component.css'],
6 | templateUrl: './home.component.html'
7 | })
8 | export class HomeComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/about/about.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'about',
5 | styleUrls: ['./about.component.css'],
6 | templateUrl: './about.component.html'
7 | })
8 | export class AboutComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-browser/repo-browser.component.html:
--------------------------------------------------------------------------------
1 | GitHub Browser
2 |
3 |
4 | Search Orgs
5 |
6 |
7 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/repo-list/repo-list.component.html:
--------------------------------------------------------------------------------
1 | Repositories
2 |
9 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'home',
5 | styleUrls: ['./home.component.css'],
6 | templateUrl: './home.component.html'
7 | })
8 | export class HomeComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class DemoPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "node"
10 | ]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/about/about.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'about',
5 | styleUrls: ['./about.component.css'],
6 | templateUrl: './about.component.html'
7 | })
8 | export class AboutComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "es2015",
6 | "types": []
7 | },
8 | "exclude": [
9 | "src/test.ts",
10 | "**/*.spec.ts"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "es2015",
6 | "baseUrl": "",
7 | "types": []
8 | },
9 | "exclude": [
10 | "test.ts",
11 | "**/*.spec.ts"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo-e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "module": "es2015",
6 | "types": []
7 | },
8 | "exclude": [
9 | "src/test.ts",
10 | "**/*.spec.ts"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo-e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "module": "es2015",
6 | "types": []
7 | },
8 | "exclude": [
9 | "src/test.ts",
10 | "**/*.spec.ts"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | .breadcrumb {
2 | display: inline-block;
3 | }
4 | .breadcrumb:first-child:before {
5 | display: none;
6 | }
7 | .breadcrumb:before {
8 | content: '>';
9 | vertical-align: top;
10 | display: inline-block;
11 | margin: 0 10px 0 8px;
12 | -webkit-font-smoothing: antialiased;
13 | }
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/github/repo-browser/repo-browser.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo-e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo-e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/demos/demo-angular-six/build.ps1:
--------------------------------------------------------------------------------
1 | ng build --prod --output-path "./dist" --base-href "https://emilol.github.io/angular-crumbs/"
2 | ng build bootstrap-demo --prod --output-path "./dist/bootstrap" --base-href "https://emilol.github.io/angular-crumbs/bootstrap/"
3 | ng build material-demo --prod --output-path "./dist/material" --base-href "https://emilol.github.io/angular-crumbs/material/"
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Demo
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { DemoPage } from './app.po';
2 |
3 | describe('demo App', () => {
4 | let page: DemoPage;
5 |
6 | beforeEach(() => {
7 | page = new DemoPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('Welcome to app!!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "module": "commonjs",
6 | "types": [
7 | "jasmine",
8 | "node"
9 | ]
10 | },
11 | "files": [
12 | "test.ts",
13 | "polyfills.ts"
14 | ],
15 | "include": [
16 | "**/*.spec.ts",
17 | "**/*.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule);
12 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('workspace-project App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('Welcome to demo-angular-six!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 | More demos
2 |
13 |
14 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/home/home.component.html:
--------------------------------------------------------------------------------
1 | More demos
2 |
13 |
14 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "baseUrl": "",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts"
15 | ],
16 | "include": [
17 | "**/*.spec.ts",
18 | "**/*.d.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo-e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('workspace-project App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('Welcome to bootstrap-demo!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo-e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('workspace-project App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('Welcome to material-demo!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/github/repo-browser/repo-browser.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | search
5 |
6 |
7 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/spec",
5 | "module": "commonjs",
6 | "types": [
7 | "jasmine",
8 | "node"
9 | ]
10 | },
11 | "files": [
12 | "src/test.ts",
13 | "src/polyfills.ts"
14 | ],
15 | "include": [
16 | "**/*.spec.ts",
17 | "**/*.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/spec",
5 | "module": "commonjs",
6 | "types": [
7 | "jasmine",
8 | "node"
9 | ]
10 | },
11 | "files": [
12 | "src/test.ts",
13 | "src/polyfills.ts"
14 | ],
15 | "include": [
16 | "**/*.spec.ts",
17 | "**/*.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | @import "~@angular/material/prebuilt-themes/indigo-pink.css";
2 | @import '~angular-crumbs/style';
3 |
4 | .breadcrumb {
5 | text-decoration: none;
6 | }
7 | .breadcrumb:before {
8 | content: '|';
9 | }
10 | .example-container {
11 | min-height: calc(100vh - 128px);
12 | }
13 |
14 | main {
15 | padding: 20px 50px 50px 20px;
16 | }
17 | .spacer {
18 | flex: 1 1 auto;
19 | }
20 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "baseUrl": "src",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2016",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2017",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | @import '~angular-crumbs/style';
2 |
3 | a {
4 | text-decoration: none;
5 | }
6 |
7 | .wrapper {
8 | display: flex;
9 | flex-direction: row;
10 | width: 100%;
11 | align-items: stretch;
12 | justify-content: stretch;
13 |
14 | main {
15 | flex: 1;
16 | }
17 | }
18 |
19 | header {
20 | padding: 8px;
21 | }
22 |
23 | nav {
24 | a {
25 | padding: 8px;
26 | display: block;
27 | }
28 | }
29 |
30 | breadcrumb {
31 | padding: 8px;
32 | display: block;
33 | background-color: #efefef;
34 | }
35 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/github/repo-browser/repo-browser.component.html:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular Breadcrumb demos
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | angular-crumbs demo
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | entry: 'dist/index.js',
3 | dest: 'dist/bundles/angular-crumbs.umd.js',
4 | sourceMap: false,
5 | format: 'umd',
6 | moduleName: 'ng.angular-crumbs',
7 | globals: {
8 | '@angular/core': 'ng.core',
9 | '@angular/common': 'ng.common',
10 | '@angular/platform-browser': 'ng.platform-browser',
11 | '@angular/router': 'ng.router',
12 | 'rxjs/Observable': 'Rx',
13 | 'rxjs/ReplaySubject': 'Rx',
14 | 'rxjs/add/operator/map': 'Rx.Observable.prototype',
15 | 'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
16 | 'rxjs/add/observable/fromEvent': 'Rx.Observable',
17 | 'rxjs/add/observable/of': 'Rx.Observable'
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | angular-crumbs demo
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | yarn-error.log
34 | testem.log
35 | /typings
36 |
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 |
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 |
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/github/repo-browser/repo-browser.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { GithubService } from 'src/app/shared/github.service';
4 |
5 | @Component({
6 | selector: 'repo-browser',
7 | templateUrl: './repo-browser.component.html',
8 | styleUrls: ['./repo-browser.component.css']
9 | })
10 | export class RepoBrowserComponent {
11 |
12 | constructor(private router: Router, private github: GithubService) {
13 | }
14 |
15 | searchForOrganisation(orgName: string) {
16 | this.github.getOrg(orgName)
17 | .subscribe((org) => {
18 | this.router.navigate(['/github', org.login]);
19 | });
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, to ignore zone related error stack frames such as
11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 | * import the following file, but please comment it out in production mode
13 | * because it will have performance impact when throw error
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-browser/repo-browser.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { GithubService } from '../shared/github.service';
4 |
5 | @Component({
6 | selector: 'repo-browser',
7 | templateUrl: './repo-browser.component.html',
8 | styleUrls: ['./repo-browser.component.css']
9 | })
10 | export class RepoBrowserComponent {
11 |
12 | constructor(private router: Router, private github: GithubService) {
13 | }
14 |
15 | searchForOrg(orgName: string) {
16 | this.github.getOrg(orgName)
17 | .subscribe(({name}) => {
18 | console.log(name);
19 | this.router.navigate(['/github', orgName]);
20 | });
21 | }
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/src/breadcrumb.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule, Router } from '@angular/router';
4 |
5 | import { BreadcrumbService } from './breadcrumb.service';
6 | import { BreadcrumbComponent } from './breadcrumb.component';
7 |
8 | export function breadcrumbServiceFactory(router: Router) {
9 | return new BreadcrumbService(router);
10 | }
11 |
12 | @NgModule({
13 | imports: [CommonModule, RouterModule],
14 | providers: [
15 | { provide: BreadcrumbService, useFactory: breadcrumbServiceFactory, deps: [Router] }
16 | ],
17 | declarations: [BreadcrumbComponent],
18 | exports: [BreadcrumbComponent]
19 | })
20 | export class BreadcrumbModule { }
21 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/github/repo-browser/repo-browser.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { GithubService } from 'src/app/shared/github.service';
4 |
5 | @Component({
6 | selector: 'repo-browser',
7 | templateUrl: './repo-browser.component.html',
8 | styleUrls: ['./repo-browser.component.css']
9 | })
10 | export class RepoBrowserComponent {
11 |
12 | constructor(private router: Router, private github: GithubService) {
13 | }
14 |
15 | searchForOrganisation(orgName: string) {
16 | this.github.getOrg(orgName)
17 | .subscribe((org) => {
18 | this.router.navigate(['/github', org.login]);
19 | });
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, to ignore zone related error stack frames such as
11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 | * import the following file, but please comment it out in production mode
13 | * because it will have performance impact when throw error
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/github/repo-browser/repo-browser.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { GithubService } from 'src/app/shared/github.service';
4 |
5 | @Component({
6 | selector: 'repo-browser',
7 | templateUrl: './repo-browser.component.html',
8 | styleUrls: ['./repo-browser.component.css']
9 | })
10 | export class RepoBrowserComponent {
11 |
12 | constructor(private router: Router, private github: GithubService) {
13 | }
14 |
15 | searchForOrganisation(orgName: string) {
16 | this.github.getOrg(orgName)
17 | .subscribe((org) => {
18 | this.router.navigate(['/github', org.login]);
19 | });
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, to ignore zone related error stack frames such as
11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 | * import the following file, but please comment it out in production mode
13 | * because it will have performance impact when throw error
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/layout/layout.component.html:
--------------------------------------------------------------------------------
1 |
2 | menu
3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "",
4 | "declaration": true,
5 | "stripInternal": true,
6 | "experimentalDecorators": true,
7 | "strictNullChecks": true,
8 | "noImplicitAny": true,
9 | "module": "es2015",
10 | "moduleResolution": "node",
11 | "paths": {
12 | "@angular/*": [
13 | "node_modules/@angular/*"
14 | ],
15 | "rxjs/*": [
16 | "node_modules/rxjs/*"
17 | ]
18 | },
19 | "rootDir": "src",
20 | "outDir": "dist",
21 | "sourceMap": true,
22 | "inlineSources": true,
23 | "target": "es5",
24 | "skipLibCheck": true,
25 | "lib": [
26 | "es2015",
27 | "dom"
28 | ]
29 | },
30 | "files": [
31 | "./src/index.ts"
32 | ],
33 | "angularCompilerOptions": {
34 | "strictMetadataEmit": true,
35 | "genDir": ".tmp"
36 | }
37 | }
--------------------------------------------------------------------------------
/demos/demo-angular-four/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-list/repo-list.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {GithubService} from '../shared/github.service';
3 | import {Observable} from 'rxjs/Observable';
4 | import {ActivatedRoute} from '@angular/router';
5 |
6 | @Component({
7 | selector: 'repo-list',
8 | styleUrls: ['./repo-list.component.css'],
9 | templateUrl: './repo-list.component.html',
10 | })
11 | export class RepoListComponent implements OnInit {
12 | org: string;
13 | repos: Observable;
14 |
15 | constructor(
16 | public github: GithubService,
17 | private route: ActivatedRoute) {
18 | }
19 |
20 | ngOnInit() {
21 | this.route.params.subscribe(params => {
22 | this.org = params['org'];
23 | if (this.org) {
24 | this.repos = this.github.getReposForOrg(this.org);
25 | }
26 | });
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/repo-list/repo-list.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {ActivatedRoute} from '@angular/router';
3 | import { Observable } from 'rxjs';
4 | import { GithubService } from 'src/app/shared/github.service';
5 |
6 | @Component({
7 | selector: 'repo-list',
8 | styleUrls: ['./repo-list.component.css'],
9 | templateUrl: './repo-list.component.html',
10 | })
11 | export class RepoListComponent implements OnInit {
12 | org: string;
13 | repos: Observable;
14 |
15 | constructor(
16 | public github: GithubService,
17 | private route: ActivatedRoute) {
18 | }
19 |
20 | ngOnInit() {
21 | this.route.params.subscribe(params => {
22 | this.org = params['org'];
23 | if (this.org) {
24 | this.repos = this.github.getReposForOrg(this.org);
25 | }
26 | });
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: require('path').join(__dirname, './tsconfig.e2e.json')
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/shared/github.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, URLSearchParams } from '@angular/http';
3 | import 'rxjs/add/operator/map';
4 |
5 | @Injectable()
6 | export class GithubService {
7 | constructor(private http: Http) {}
8 |
9 | getOrg(org: string) {
10 | return this.makeRequest(`orgs/${org}`);
11 | }
12 |
13 | getReposForOrg(org: string) {
14 | return this.makeRequest(`orgs/${org}/repos`);
15 | }
16 |
17 | getRepoForOrg(org: string, repo: string) {
18 | return this.makeRequest(`repos/${org}/${repo}`);
19 | }
20 |
21 | private makeRequest(path: string) {
22 | let params = new URLSearchParams();
23 | params.set('per_page', '100');
24 |
25 | let url = `https://api.github.com/${ path }`;
26 | return this.http.get(url, {search: params})
27 | .map((res) => res.json());
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo-e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: require('path').join(__dirname, './tsconfig.e2e.json')
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo-e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: require('path').join(__dirname, './tsconfig.e2e.json')
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/layout/layout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Directive, ChangeDetectorRef, OnDestroy } from '@angular/core';
2 | import {MediaMatcher} from '@angular/cdk/layout';
3 |
4 | @Component({
5 | selector : 'app-layout',
6 | templateUrl: './layout.component.html'
7 | })
8 | export class LayoutComponent implements OnDestroy {
9 | mobileQuery: MediaQueryList;
10 | private _mobileQueryListener: () => void;
11 |
12 | constructor(
13 | changeDetectorRef: ChangeDetectorRef,
14 | media: MediaMatcher) {
15 | this.mobileQuery = media.matchMedia('(max-width: 600px)');
16 | this._mobileQueryListener = () => changeDetectorRef.detectChanges();
17 | this.mobileQuery.addListener(this._mobileQueryListener);
18 | }
19 |
20 | ngOnDestroy(): void {
21 | this.mobileQuery.removeListener(this._mobileQueryListener);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../../coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../../coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, URLSearchParams } from '@angular/http';
3 | import { map } from 'rxjs/operators';
4 |
5 | @Injectable()
6 | export class GithubService {
7 | constructor(private http: Http) {}
8 |
9 | getOrg(org: string) {
10 | return this.makeRequest(`orgs/${org}`);
11 | }
12 |
13 | getReposForOrg(org: string) {
14 | return this.makeRequest(`orgs/${org}/repos`);
15 | }
16 |
17 | getRepoForOrg(org: string, repo: string) {
18 | return this.makeRequest(`repos/${org}/${repo}`);
19 | }
20 |
21 | getShorcuts() {
22 | return [
23 | { title: "Angular Repos", id: "angular" },
24 | { title: "Bootstrap Repos", id: "twbs" },
25 | { title: "PrimeFaces Repos", id: "primefaces" }
26 | ];
27 | }
28 |
29 | private makeRequest(path: string) {
30 | let params = new URLSearchParams();
31 | params.set('per_page', '100');
32 |
33 | let url = `https://api.github.com/${ path }`;
34 | return this.http.get(url, {search: params})
35 | .pipe(map(res => res.json()));
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Emily Taylor
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/README.md:
--------------------------------------------------------------------------------
1 | # DemoAngularSix
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 | describe('AppComponent', () => {
4 | beforeEach(async(() => {
5 | TestBed.configureTestingModule({
6 | declarations: [
7 | AppComponent
8 | ],
9 | }).compileComponents();
10 | }));
11 | it('should create the app', async(() => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.debugElement.componentInstance;
14 | expect(app).toBeTruthy();
15 | }));
16 | it(`should have as title 'app'`, async(() => {
17 | const fixture = TestBed.createComponent(AppComponent);
18 | const app = fixture.debugElement.componentInstance;
19 | expect(app.title).toEqual('app');
20 | }));
21 | it('should render title in a h1 tag', async(() => {
22 | const fixture = TestBed.createComponent(AppComponent);
23 | fixture.detectChanges();
24 | const compiled = fixture.debugElement.nativeElement;
25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to bootstrap!');
26 | }));
27 | });
28 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 | describe('AppComponent', () => {
4 | beforeEach(async(() => {
5 | TestBed.configureTestingModule({
6 | declarations: [
7 | AppComponent
8 | ],
9 | }).compileComponents();
10 | }));
11 | it('should create the app', async(() => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.debugElement.componentInstance;
14 | expect(app).toBeTruthy();
15 | }));
16 | it(`should have as title 'app'`, async(() => {
17 | const fixture = TestBed.createComponent(AppComponent);
18 | const app = fixture.debugElement.componentInstance;
19 | expect(app.title).toEqual('app');
20 | }));
21 | it('should render title in a h1 tag', async(() => {
22 | const fixture = TestBed.createComponent(AppComponent);
23 | fixture.detectChanges();
24 | const compiled = fixture.debugElement.nativeElement;
25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to material-demo!');
26 | }));
27 | });
28 |
--------------------------------------------------------------------------------
/package-dist.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-crumbs",
3 | "version": "3.0.1",
4 | "description": "A route-based Angular breadcrumb component and service. Allows breadcrumb descriptions to be set based on route data, or as the result of an API call.",
5 | "main": "bundles/angular-crumbs.umd.min.js",
6 | "module": "index.js",
7 | "typings": "index.d.ts",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/emilol/angular-crumbs.git"
11 | },
12 | "keywords": [
13 | "angular",
14 | "angular2",
15 | "breadcrumb"
16 | ],
17 | "author": "Emily Taylor",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/emilol/angular-crumbs/issues"
21 | },
22 | "homepage": "https://github.com/emilol/angular-crumbs#readme",
23 | "peerDependencies": {
24 | "@angular/common": ">=2.0.0 <7.0.0",
25 | "@angular/core": ">=2.0.0 <7.0.0",
26 | "@angular/platform-browser": ">=2.0.0 <7.0.0",
27 | "@angular/router": ">=2.0.0 <7.0.0",
28 | "reflect-metadata": "^0.1.8",
29 | "rxjs": ">=5.0.3",
30 | "zone.js": "^0.8.12"
31 | }
32 | }
--------------------------------------------------------------------------------
/demos/demo-angular-four/README.md:
--------------------------------------------------------------------------------
1 | # Demo
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.3.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | Before running the tests make sure you are serving the app via `ng serve`.
25 |
26 | ## Further help
27 |
28 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
29 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/long-stack-trace-zone';
4 | import 'zone.js/dist/proxy.js';
5 | import 'zone.js/dist/sync-test';
6 | import 'zone.js/dist/jasmine-patch';
7 | import 'zone.js/dist/async-test';
8 | import 'zone.js/dist/fake-async-test';
9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 |
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 |
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 | BrowserDynamicTestingModule,
25 | platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/repo-detail/repo-detail.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {ActivatedRoute} from '@angular/router';
3 | import {BreadcrumbService} from 'angular-crumbs';
4 | import {GithubService} from '../shared/github.service';
5 |
6 | @Component({
7 | selector: 'repo-detail',
8 | styleUrls: ['./repo-detail.component.css'],
9 | templateUrl: './repo-detail.component.html'
10 | })
11 | export class RepoDetailComponent implements OnInit {
12 | private org: string;
13 | private repo: string;
14 | public repoDetails: any = {};
15 |
16 | constructor(public github: GithubService, private breadcrumbService: BreadcrumbService, private route: ActivatedRoute) {
17 | }
18 |
19 | ngOnInit() {
20 | this.route.params.subscribe(params => {
21 | this.org = this.route.snapshot.parent.params['org'];
22 | this.repo = params['repo'] || '';
23 |
24 | if (this.repo) {
25 | this.github.getRepoForOrg(this.org, this.repo)
26 | .subscribe(repoDetails => {
27 | this.repoDetails = repoDetails;
28 | this.breadcrumbService.changeBreadcrumb(this.route.snapshot, repoDetails.name);
29 | });
30 | }
31 | });
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/repo-detail/repo-detail.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {ActivatedRoute} from '@angular/router';
3 | import {BreadcrumbService} from 'angular-crumbs';
4 | import { GithubService } from 'src/app/shared/github.service';
5 |
6 | @Component({
7 | selector: 'repo-detail',
8 | styleUrls: ['./repo-detail.component.css'],
9 | templateUrl: './repo-detail.component.html'
10 | })
11 | export class RepoDetailComponent implements OnInit {
12 | private org: string;
13 | private repo: string;
14 | public repoDetails: any = {};
15 |
16 | constructor(public github: GithubService, private breadcrumbService: BreadcrumbService, private route: ActivatedRoute) {
17 | }
18 |
19 | ngOnInit() {
20 | this.route.params.subscribe(params => {
21 | this.org = this.route.snapshot.parent.params['org'];
22 | this.repo = params['repo'] || '';
23 |
24 | if (this.repo) {
25 | this.github.getRepoForOrg(this.org, this.repo)
26 | .subscribe(repoDetails => {
27 | this.repoDetails = repoDetails;
28 | this.breadcrumbService.changeBreadcrumb(this.route.snapshot, repoDetails.name);
29 | });
30 | }
31 | });
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/shared/github/organisation/organisation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { BreadcrumbService } from 'angular-crumbs';
4 | import { GithubService } from 'src/app/shared/github.service';
5 |
6 | @Component({
7 | selector: 'organisation',
8 | templateUrl: './organisation.component.html'
9 | })
10 | export class OrganisationComponent {
11 | organisation: { name?:string, avatar_url?:string } = {};
12 |
13 | constructor(private route: ActivatedRoute, private github: GithubService, private breadcrumbService: BreadcrumbService) {
14 | this.searchForOrganisation(route.snapshot.params['org']);
15 | route.params.subscribe(params => {
16 | this.searchForOrganisation(params['org']);
17 | });
18 | }
19 |
20 | searchForOrganisation(orgName: string) {
21 | if (!orgName) return;
22 |
23 | this.github.getOrg(orgName)
24 | .subscribe((org) => {
25 | this.organisation = org;
26 | this.setOrganisationCrumb();
27 | });
28 | }
29 |
30 | setOrganisationCrumb() {
31 | if (!this.organisation.name) return;
32 | this.breadcrumbService.changeBreadcrumb(this.route.snapshot, this.organisation.name);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/breadcrumb.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { Breadcrumb } from './breadcrumb';
4 | import { BreadcrumbService } from './breadcrumb.service';
5 |
6 | @Component({
7 | // tslint:disable-next-line:component-selector
8 | selector: 'breadcrumb',
9 | template:
10 | `
11 |
12 |
13 | `
22 | })
23 | export class BreadcrumbComponent {
24 | breadcrumbs: Breadcrumb[];
25 |
26 | constructor(private breadcrumbService: BreadcrumbService) {
27 | breadcrumbService.breadcrumbChanged.subscribe((crumbs: Breadcrumb[]) => { this.onBreadcrumbChange(crumbs); });
28 | }
29 |
30 | private onBreadcrumbChange(crumbs: Breadcrumb[]) {
31 | this.breadcrumbs = crumbs;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/github/organisation/organisation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { BreadcrumbService } from 'angular-crumbs';
4 | import { GithubService } from '../shared/github.service';
5 |
6 | @Component({
7 | selector: 'organisation',
8 | templateUrl: './organisation.component.html'
9 | })
10 | export class OrganisationComponent {
11 | organisation: { name?:string, avatar_url?:string } = {};
12 |
13 | constructor(
14 | private route: ActivatedRoute,
15 | private github: GithubService,
16 | private breadcrumbService: BreadcrumbService) {
17 | this.searchForOrganisation(route.snapshot.params['org']);
18 | route.params.subscribe(params => {
19 | this.searchForOrganisation(params['org']);
20 | });
21 | }
22 |
23 | searchForOrganisation(orgName: string) {
24 | if (!orgName) return;
25 |
26 | this.github.getOrg(orgName)
27 | .subscribe((org) => {
28 | this.organisation = org;
29 | this.setOrganisationCrumb();
30 | });
31 | }
32 |
33 | setOrganisationCrumb() {
34 | if (!this.organisation.name) return;
35 | this.breadcrumbService.changeBreadcrumb(this.route.snapshot, this.organisation.name);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import {Routes} from '@angular/router';
2 | import {AboutComponent} from './about/about.component';
3 | import {HomeComponent} from './home/home.component';
4 | import {RepoBrowserComponent} from './github/repo-browser/repo-browser.component';
5 | import {RepoListComponent} from './github/repo-list/repo-list.component';
6 | import {RepoDetailComponent} from './github/repo-detail/repo-detail.component';
7 | import { GitHubComponent } from './github/github.component';
8 | import { OrganisationComponent } from './github/organisation/organisation.component';
9 |
10 | export const rootRouterConfig: Routes = [
11 | {path: '', redirectTo: 'home', pathMatch: 'full'},
12 | {path: 'home', component: HomeComponent, data: { breadcrumb: 'Home'}},
13 | {path: 'about', component: AboutComponent, data: { breadcrumb: 'About'}},
14 | {path: 'github', component: GitHubComponent, data: { breadcrumb: 'GitHub'},
15 | children: [
16 | {path: '', component: RepoBrowserComponent},
17 | {path: ':org', component: OrganisationComponent, data: { breadcrumb: 'Organisation'},
18 | children: [
19 | {path: '', component: RepoListComponent },
20 | {path: ':repo', component: RepoDetailComponent, data: { breadcrumb: 'Repo'}}
21 | ]
22 | }
23 | ]
24 | }
25 | ];
26 |
27 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 | import { Breadcrumb, BreadcrumbService } from 'angular-crumbs';
4 |
5 | @Component({
6 | selector : 'app-root',
7 | templateUrl: './app.component.html',
8 | styleUrls: ['./app.component.scss'],
9 | encapsulation: ViewEncapsulation.None
10 | })
11 | export class AppComponent implements OnInit {
12 | constructor(
13 | private titleService: Title,
14 | private breadcrumbService: BreadcrumbService) { }
15 |
16 | ngOnInit() {
17 | this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
18 | this.titleService.setTitle(this.createTitle(crumbs));
19 | });
20 | }
21 |
22 | private createTitle(routesCollection: Breadcrumb[]) {
23 | const title = 'Angular Breadcrumb';
24 | const titles = routesCollection.filter((route) => route.displayName);
25 |
26 | if (!titles.length) { return title; }
27 |
28 | const routeTitle = this.titlesToString(titles);
29 | return `${routeTitle} ${title}`;
30 | }
31 |
32 | private titlesToString(titles) {
33 | return titles.reduce((prev, curr) => {
34 | return `${curr.displayName} - ${prev}`;
35 | }, '');
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import {Routes} from '@angular/router';
2 | import {HomeComponent} from './shared/home/home.component';
3 | import { AboutComponent } from './shared/about/about.component';
4 | import { GitHubComponent } from './shared/github/github.component';
5 | import { OrganisationComponent } from './shared/github/organisation/organisation.component';
6 | import { RepoListComponent } from './shared/github/repo-list/repo-list.component';
7 | import { RepoDetailComponent } from './shared/github/repo-detail/repo-detail.component';
8 | import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
9 |
10 | export const rootRouterConfig: Routes = [
11 | {path: '', redirectTo: 'home', pathMatch: 'full'},
12 | {path: 'home', component: HomeComponent, data: { breadcrumb: 'Home'}},
13 | {path: 'about', component: AboutComponent, data: { breadcrumb: 'About'}},
14 | {path: 'github', component: GitHubComponent, data: { breadcrumb: 'GitHub'},
15 | children: [
16 | {path: '', component: RepoBrowserComponent},
17 | {path: ':org', component: OrganisationComponent, data: { breadcrumb: 'Organisation'},
18 | children: [
19 | {path: '', component: RepoListComponent },
20 | {path: ':repo', component: RepoDetailComponent, data: { breadcrumb: 'Repo'}}
21 | ]
22 | }
23 | ]
24 | }
25 | ];
26 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "project": {
4 | "name": "demo"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "polyfills": "polyfills.ts",
17 | "test": "test.ts",
18 | "tsconfig": "tsconfig.app.json",
19 | "testTsconfig": "tsconfig.spec.json",
20 | "prefix": "app",
21 | "styles": [
22 | "styles.css"
23 | ],
24 | "scripts": [],
25 | "environmentSource": "environments/environment.ts",
26 | "environments": {
27 | "dev": "environments/environment.ts",
28 | "prod": "environments/environment.prod.ts"
29 | }
30 | }
31 | ],
32 | "e2e": {
33 | "protractor": {
34 | "config": "./protractor.conf.js"
35 | }
36 | },
37 | "lint": [
38 | {
39 | "project": "src/tsconfig.app.json"
40 | },
41 | {
42 | "project": "src/tsconfig.spec.json"
43 | },
44 | {
45 | "project": "e2e/tsconfig.e2e.json"
46 | }
47 | ],
48 | "test": {
49 | "karma": {
50 | "config": "./karma.conf.js"
51 | }
52 | },
53 | "defaults": {
54 | "styleExt": "css",
55 | "component": {}
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import {Routes} from '@angular/router';
2 | import { AboutComponent } from 'src/app/shared/about/about.component';
3 | import { HomeComponent } from 'src/app/shared/home/home.component';
4 | import {RepoBrowserComponent} from './github/repo-browser/repo-browser.component';
5 | import {RepoDetailComponent} from 'src/app/shared/github/repo-detail/repo-detail.component';
6 | import { GitHubComponent } from 'src/app/shared/github/github.component';
7 | import { OrganisationComponent } from 'src/app/shared/github/organisation/organisation.component';
8 | import { RepoListComponent } from 'src/app/shared/github/repo-list/repo-list.component';
9 |
10 | export const rootRouterConfig: Routes = [
11 | {path: '', redirectTo: 'home', pathMatch: 'full'},
12 | {path: 'home', component: HomeComponent, data: { breadcrumb: 'Home'}},
13 | {path: 'about', component: AboutComponent, data: { breadcrumb: 'About'}},
14 | {path: 'github', component: GitHubComponent, data: { breadcrumb: 'GitHub'},
15 | children: [
16 | {path: '', component: RepoBrowserComponent},
17 | {path: ':org', component: OrganisationComponent, data: { breadcrumb: 'Organisation'},
18 | children: [
19 | {path: '', component: RepoListComponent },
20 | {path: ':repo', component: RepoDetailComponent, data: { breadcrumb: 'Repo'}}
21 | ]
22 | }
23 | ]
24 | }
25 | ];
26 |
27 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 | import { AboutComponent } from 'src/app/shared/about/about.component';
3 | import { HomeComponent } from 'src/app/shared/home/home.component';
4 | import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
5 | import { RepoDetailComponent } from 'src/app/shared/github/repo-detail/repo-detail.component';
6 | import { GitHubComponent } from 'src/app/shared/github/github.component';
7 | import { OrganisationComponent } from 'src/app/shared/github/organisation/organisation.component';
8 | import { RepoListComponent } from 'src/app/shared/github/repo-list/repo-list.component';
9 |
10 | export const rootRouterConfig: Routes = [
11 | {path: '', redirectTo: 'home', pathMatch: 'full'},
12 | {path: 'home', component: HomeComponent, data: { breadcrumb: 'Home'}},
13 | {path: 'about', component: AboutComponent, data: { breadcrumb: 'About'}},
14 | {path: 'github', component: GitHubComponent, data: { breadcrumb: 'GitHub'},
15 | children: [
16 | {path: '', component: RepoBrowserComponent},
17 | {path: ':org', component: OrganisationComponent, data: { breadcrumb: 'Organisation'},
18 | children: [
19 | {path: '', component: RepoListComponent },
20 | {path: ':repo', component: RepoDetailComponent, data: { breadcrumb: 'Repo'}}
21 | ]
22 | }
23 | ]
24 | }
25 | ];
26 |
27 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | home
3 | Other Demos
4 |
5 |
6 |
7 | Home
8 | About
9 | GitHub
10 |
11 |
12 | keyboard_arrow_right {{item.title}}
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {{ route.displayName }}
23 | {{ route.displayName }}
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 | import { Breadcrumb, BreadcrumbService } from 'angular-crumbs';
4 | import { GithubService } from 'src/app/shared/github.service';
5 |
6 | @Component({
7 | selector : 'app-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.scss'],
10 | encapsulation: ViewEncapsulation.None
11 | })
12 | export class AppComponent implements OnInit {
13 | constructor(
14 | private titleService: Title,
15 | private breadcrumbService: BreadcrumbService,
16 | private github: GithubService) { }
17 |
18 | ngOnInit() {
19 | this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
20 | this.titleService.setTitle(this.createTitle(crumbs));
21 | });
22 | }
23 |
24 | get shortcuts() {
25 | return this.github.getShorcuts();
26 | }
27 |
28 | private createTitle(routesCollection: Breadcrumb[]) {
29 | const title = 'Angular Breadcrumb';
30 | const titles = routesCollection.filter((route) => route.displayName);
31 |
32 | if (!titles.length) { return title; }
33 |
34 | const routeTitle = this.titlesToString(titles);
35 | return `${routeTitle} ${title}`;
36 | }
37 |
38 | private titlesToString(titles) {
39 | return titles.reduce((prev, curr) => {
40 | return `${curr.displayName} - ${prev}`;
41 | }, '');
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 |
4 | import { Breadcrumb, BreadcrumbService } from 'angular-crumbs';
5 | import { GithubService } from 'src/app/shared/github.service';
6 |
7 | @Component({
8 | selector : 'app-root',
9 | templateUrl: './app.component.html',
10 | styleUrls: ['./app.component.scss'],
11 | encapsulation: ViewEncapsulation.None
12 | })
13 | export class AppComponent implements OnInit {
14 |
15 | constructor(
16 | private titleService: Title,
17 | private breadcrumbService: BreadcrumbService,
18 | private github: GithubService) {
19 | }
20 |
21 | get shortcuts() {
22 | return this.github.getShorcuts();
23 | }
24 |
25 | ngOnInit() {
26 | this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
27 | this.titleService.setTitle(this.createTitle(crumbs));
28 | });
29 | }
30 |
31 | private createTitle(routesCollection: Breadcrumb[]) {
32 | const title = 'Angular Breadcrumb';
33 | const titles = routesCollection.filter((route) => route.displayName);
34 |
35 | if (!titles.length) { return title; }
36 |
37 | const routeTitle = this.titlesToString(titles);
38 | return `${routeTitle} ${title}`;
39 | }
40 |
41 | private titlesToString(titles) {
42 | return titles.reduce((prev, curr) => {
43 | return `${curr.displayName} - ${prev}`;
44 | }, '');
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/animations": "^4.0.0",
16 | "@angular/common": "^4.0.0",
17 | "@angular/compiler": "^4.0.0",
18 | "@angular/core": "^4.0.0",
19 | "@angular/forms": "^4.0.0",
20 | "@angular/http": "^4.0.0",
21 | "@angular/platform-browser": "^4.0.0",
22 | "@angular/platform-browser-dynamic": "^4.0.0",
23 | "@angular/router": "^4.0.0",
24 | "angular-crumbs": "^3.0.1",
25 | "core-js": "^2.4.1",
26 | "rxjs": "^5.1.0",
27 | "zone.js": "^0.8.4"
28 | },
29 | "devDependencies": {
30 | "@angular/cli": "1.1.3",
31 | "@angular/compiler-cli": "^4.0.0",
32 | "@angular/language-service": "^4.0.0",
33 | "@types/jasmine": "2.5.45",
34 | "@types/node": "~6.0.60",
35 | "codelyzer": "~3.0.1",
36 | "jasmine-core": "~2.6.2",
37 | "jasmine-spec-reporter": "~4.1.0",
38 | "karma": "^3.0.0",
39 | "karma-chrome-launcher": "~2.1.1",
40 | "karma-cli": "~1.0.1",
41 | "karma-coverage-istanbul-reporter": "^1.2.1",
42 | "karma-jasmine": "~1.1.0",
43 | "karma-jasmine-html-reporter": "^0.2.2",
44 | "protractor": "^5.4.0",
45 | "ts-node": "~3.0.4",
46 | "tslint": "~5.3.2",
47 | "typescript": "~2.3.3"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo-angular-six",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "^6.0.3",
15 | "@angular/cdk": "^6.4.7",
16 | "@angular/common": "^6.0.3",
17 | "@angular/compiler": "^6.0.3",
18 | "@angular/core": "^6.0.3",
19 | "@angular/forms": "^6.0.3",
20 | "@angular/http": "^6.0.3",
21 | "@angular/material": "^6.4.7",
22 | "@angular/platform-browser": "^6.0.3",
23 | "@angular/platform-browser-dynamic": "^6.0.3",
24 | "@angular/router": "^6.0.3",
25 | "angular-crumbs": "^3.0.1",
26 | "bootstrap": "^4.1.3",
27 | "core-js": "^2.5.4",
28 | "primeicons": "^1.0.0-beta.10",
29 | "primeng": "^6.1.3",
30 | "rxjs": "^6.0.0",
31 | "zone.js": "^0.8.26"
32 | },
33 | "devDependencies": {
34 | "@angular/compiler-cli": "^6.0.3",
35 | "@angular-devkit/build-angular": "~0.6.8",
36 | "typescript": "~2.7.2",
37 | "@angular/cli": "~6.0.8",
38 | "@angular/language-service": "^6.0.3",
39 | "@types/jasmine": "~2.8.6",
40 | "@types/jasminewd2": "~2.0.3",
41 | "@types/node": "~8.9.4",
42 | "codelyzer": "~4.2.1",
43 | "jasmine-core": "~2.99.1",
44 | "jasmine-spec-reporter": "~4.2.1",
45 | "karma": "^3.0.0",
46 | "karma-chrome-launcher": "~2.2.0",
47 | "karma-coverage-istanbul-reporter": "~2.0.0",
48 | "karma-jasmine": "~1.1.1",
49 | "karma-jasmine-html-reporter": "^0.2.2",
50 | "protractor": "^5.4.0",
51 | "ts-node": "~5.0.1",
52 | "tslint": "~5.9.1"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core'
2 | import {RouterModule} from '@angular/router';
3 | import {rootRouterConfig} from './app.routes';
4 | import {AppComponent} from './app.component';
5 | import {FormsModule} from '@angular/forms';
6 | import {BrowserModule} from '@angular/platform-browser';
7 | import {HttpModule} from '@angular/http';
8 | import {LocationStrategy, HashLocationStrategy} from '@angular/common';
9 |
10 | import {BreadcrumbModule} from 'angular-crumbs';
11 |
12 | import {AboutComponent} from './about/about.component';
13 | import {HomeComponent} from './home/home.component';
14 | import {RepoBrowserComponent} from './github/repo-browser/repo-browser.component';
15 | import {RepoListComponent} from './github/repo-list/repo-list.component';
16 | import {RepoDetailComponent} from './github/repo-detail/repo-detail.component';
17 | import { GitHubComponent } from './github/github.component';
18 | import { OrganisationComponent } from './github/organisation/organisation.component';
19 |
20 | import { APP_RESOLVER_PROVIDERS } from './app.resolver';
21 |
22 | const APP_PROVIDERS = [
23 | ...APP_RESOLVER_PROVIDERS,
24 | ];
25 |
26 | @NgModule({
27 | declarations: [
28 | AppComponent,
29 | AboutComponent,
30 | GitHubComponent,
31 | OrganisationComponent,
32 | RepoBrowserComponent,
33 | RepoListComponent,
34 | RepoDetailComponent,
35 | HomeComponent
36 | ],
37 | imports: [
38 | BrowserModule,
39 | BreadcrumbModule,
40 | FormsModule,
41 | HttpModule,
42 | RouterModule.forRoot(rootRouterConfig)
43 | ],
44 | providers: [
45 | APP_PROVIDERS,
46 | {provide: LocationStrategy, useClass: HashLocationStrategy}
47 | ],
48 | bootstrap: [AppComponent]
49 | })
50 |
51 | export class AppModule {
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
6 |
7 | ## I'm submitting a...
8 |
9 |
10 | [ ] Regression (a behavior that used to work and stopped working in a new release)
11 | [ ] Bug report
12 | [ ] Feature request
13 | [ ] Documentation issue or request
14 |
15 |
16 | ## Current behavior
17 |
18 |
19 |
20 | ## Expected behavior
21 |
22 |
23 |
24 | ## Minimal reproduction of the problem with instructions
25 |
29 |
30 | ## What is the motivation / use case for changing the behavior?
31 |
32 |
33 |
34 | ## Environment
35 |
36 |
37 | Angular version: X.Y.Z
38 |
39 |
40 | Browser:
41 | - [ ] Chrome (desktop) version XX
42 | - [ ] Chrome (Android) version XX
43 | - [ ] Chrome (iOS) version XX
44 | - [ ] Firefox version XX
45 | - [ ] Safari (desktop) version XX
46 | - [ ] Safari (iOS) version XX
47 | - [ ] IE version XX
48 | - [ ] Edge version XX
49 |
50 | For Tooling issues:
51 | - Node version: XX
52 | - Platform:
53 |
54 | Others:
55 |
56 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-crumbs",
3 | "version": "3.0.1",
4 | "description": "A route-based Angular breadcrumb component and service. Allows breadcrumb descriptions to be set based on route data, or as the result of an API call.",
5 | "main": "index.js",
6 | "files": [
7 | "style.css"
8 | ],
9 | "scripts": {
10 | "lint": "tslint \"src/**/*.ts\" --project tsconfig.json --type-check",
11 | "clean": "rimraf .tmp && rimraf dist",
12 | "transpile": "ngc",
13 | "package": "rollup -c",
14 | "minify": "uglifyjs dist/bundles/angular-crumbs.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/angular-crumbs.umd.min.js",
15 | "copy": "cpx \"./package-dist.json\" dist && cpx \"./README.md\" dist && cpx \"./style.css\" dist && renamer --find \"package-dist.json\" --replace \"package.json\" ./dist/*",
16 | "build": "npm run clean && npm run transpile && npm run package && npm run minify && npm run copy"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/emilol/angular-crumbs.git"
21 | },
22 | "keywords": [
23 | "angular",
24 | "angular2",
25 | "breadcrumb"
26 | ],
27 | "author": "Emily Taylor",
28 | "license": "MIT",
29 | "bugs": {
30 | "url": "https://github.com/emilol/angular-crumbs/issues"
31 | },
32 | "homepage": "https://github.com/emilol/angular-crumbs#readme",
33 | "dependencies": {
34 | "@angular/common": "^4.2.4",
35 | "@angular/core": "^4.2.4",
36 | "@angular/platform-browser": "^4.2.4",
37 | "@angular/router": "^4.2.4",
38 | "rxjs": "^5.0.3",
39 | "zone.js": "^0.8.12"
40 | },
41 | "devDependencies": {
42 | "@angular/compiler": "^4.2.4",
43 | "@angular/compiler-cli": "^4.2.4",
44 | "codelyzer": "^3.1.1",
45 | "cpx": "^1.5.0",
46 | "renamer": "^0.6.1",
47 | "rimraf": "^2.5.4",
48 | "rollup": "^0.43.0",
49 | "tslint": "^5.4.3",
50 | "typescript": "^2.4.1",
51 | "uglify-js": "^3.0.20"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { NoopAnimationsModule } from '@angular/platform-browser/animations';
4 | import { RouterModule } from '@angular/router';
5 | import { BreadcrumbModule } from 'angular-crumbs';
6 | import { FormsModule } from '@angular/forms';
7 | import { BrowserModule } from '@angular/platform-browser';
8 | import { HttpModule } from '@angular/http';
9 | import { LocationStrategy, HashLocationStrategy } from '@angular/common';
10 |
11 | import { rootRouterConfig } from './app.routes';
12 | import { AppComponent } from './app.component';
13 | import { AboutComponent } from 'src/app/shared/about/about.component';
14 | import { HomeComponent } from 'src/app/shared/home/home.component';
15 | import { GitHubComponent } from 'src/app/shared//github/github.component';
16 | import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
17 | import { RepoListComponent } from 'src/app/shared//github/repo-list/repo-list.component';
18 | import { RepoDetailComponent } from 'src/app/shared//github/repo-detail/repo-detail.component';
19 | import { OrganisationComponent } from 'src/app/shared/github/organisation/organisation.component';
20 |
21 | import { APP_RESOLVER_PROVIDERS } from 'src/app/app.resolver';
22 |
23 | const APP_PROVIDERS = [
24 | ...APP_RESOLVER_PROVIDERS,
25 | ];
26 |
27 | @NgModule({
28 | declarations: [
29 | AppComponent,
30 | AboutComponent,
31 | RepoBrowserComponent,
32 | RepoListComponent,
33 | RepoDetailComponent,
34 | HomeComponent,
35 | GitHubComponent,
36 | OrganisationComponent
37 | ],
38 | imports: [
39 | BrowserModule,
40 | BreadcrumbModule,
41 | FormsModule,
42 | HttpModule,
43 | CommonModule,
44 | NoopAnimationsModule,
45 | RouterModule.forRoot(rootRouterConfig)
46 | ],
47 | providers: [
48 | APP_PROVIDERS,
49 | {provide: LocationStrategy, useClass: HashLocationStrategy}
50 | ],
51 | bootstrap: [AppComponent]
52 | })
53 |
54 | export class AppModule {
55 |
56 | }
57 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 | import { MenuItem } from 'primeng/components/common/menuitem';
4 | import { BreadcrumbService, Breadcrumb } from 'angular-crumbs';
5 | import { GithubService } from './shared/github.service';
6 |
7 | @Component({
8 | selector : 'app-root',
9 | templateUrl: './app.component.html',
10 | styleUrls: ['./app.component.scss'],
11 | encapsulation: ViewEncapsulation.None
12 | })
13 | export class AppComponent {
14 |
15 | items: MenuItem[];
16 | menuBarItems: MenuItem[];
17 | breadcrumbs: MenuItem[];
18 |
19 | constructor(
20 | private titleService: Title,
21 | private breadcrumbService: BreadcrumbService,
22 | private github: GithubService) {
23 | }
24 |
25 | ngOnInit() {
26 | this.menuBarItems = [
27 | { icon: 'fa fa-home', routerLink: ['/home'] },
28 | { label: 'Other Demos', routerLink: ['/home'] },
29 | ];
30 | this.items = [
31 | { label: 'Home', routerLink: ['/home'] },
32 | { label: 'About', routerLink: ['/about'] },
33 | { label: 'GitHub', routerLink: ['/github'] }
34 | ];
35 |
36 | this.items = this.items.concat(this.shortcuts);
37 |
38 | this.breadcrumbService.breadcrumbChanged.subscribe(crumbs => {
39 | this.titleService.setTitle(this.createTitle(crumbs));
40 | this.breadcrumbs = this.mapPrimeNgCrumbs(crumbs)
41 | });
42 | }
43 |
44 | get shortcuts() {
45 | return this.github.getShorcuts().map(s =>
46 | { label: s.title, icon: 'fa fa-chevron-right', routerLink: ['/github', s.id] }
47 | );
48 | }
49 |
50 | private createTitle(routesCollection: Breadcrumb[]) {
51 | const title = 'Angular Breadcrumb';
52 | const titles = routesCollection.filter((route) => route.displayName);
53 |
54 | if (!titles.length) { return title; }
55 |
56 | const routeTitle = this.titlesToString(titles);
57 | return `${routeTitle} ${title}`;
58 | }
59 |
60 | private titlesToString(titles) {
61 | return titles.reduce((prev, curr) => {
62 | return `${curr.displayName} - ${prev}`;
63 | }, '');
64 | }
65 |
66 | private mapPrimeNgCrumbs(crumbs: Breadcrumb[]) : MenuItem[] {
67 | return crumbs.map(c => { label: c.displayName, url: `#${c.url}`});
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
14 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | {{ route.displayName }}
42 |
43 | {{ route.displayName }}
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core'
2 | import {RouterModule} from '@angular/router';
3 | import {rootRouterConfig} from './app.routes';
4 | import {FormsModule} from '@angular/forms';
5 | import {BrowserModule} from '@angular/platform-browser';
6 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
7 | import {HttpModule} from '@angular/http';
8 | import {LocationStrategy, HashLocationStrategy} from '@angular/common';
9 |
10 | import {PanelMenuModule} from 'primeng/components/panelmenu/panelmenu';
11 | import {MenuModule} from 'primeng/components/menu/menu';
12 | import {MenubarModule} from 'primeng/components/menubar/menubar';
13 | import {CardModule} from 'primeng/components/card/card';
14 | import {InputTextModule} from 'primeng/components/inputtext/inputtext';
15 | import {ButtonModule} from 'primeng/components/button/button';
16 | import {BreadcrumbModule as PrimeNGBreadcrumbModule} from 'primeng/breadcrumb';
17 |
18 | import { AppComponent } from './app.component';
19 | import { HomeComponent } from './shared/home/home.component';
20 | import { AboutComponent } from './shared/about/about.component';
21 | import { GitHubComponent } from './shared/github/github.component';
22 | import { OrganisationComponent } from './shared/github/organisation/organisation.component';
23 | import { RepoListComponent } from './shared/github/repo-list/repo-list.component';
24 | import { RepoDetailComponent } from './shared/github/repo-detail/repo-detail.component';
25 | import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
26 | import { APP_RESOLVER_PROVIDERS } from './app.resolver';
27 | import { BreadcrumbModule } from 'angular-crumbs';
28 |
29 | const APP_PROVIDERS = [
30 | ...APP_RESOLVER_PROVIDERS,
31 | ];
32 |
33 | @NgModule({
34 | declarations: [
35 | AppComponent,
36 | AboutComponent,
37 | RepoBrowserComponent,
38 | RepoListComponent,
39 | RepoDetailComponent,
40 | HomeComponent,
41 | GitHubComponent,
42 | OrganisationComponent
43 | ],
44 | imports: [
45 | BrowserModule,
46 | BrowserAnimationsModule,
47 | FormsModule,
48 | HttpModule,
49 | BreadcrumbModule,
50 | PrimeNGBreadcrumbModule,
51 | PanelMenuModule,
52 | MenuModule,
53 | MenubarModule,
54 | CardModule,
55 | InputTextModule,
56 | ButtonModule,
57 | RouterModule.forRoot(rootRouterConfig)
58 | ],
59 | providers: [
60 | APP_PROVIDERS,
61 | {provide: LocationStrategy, useClass: HashLocationStrategy}
62 | ],
63 | bootstrap: [AppComponent]
64 | })
65 |
66 | export class AppModule {}
67 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following to support `@angular/animation`. */
41 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | import 'core-js/es6/reflect';
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/
50 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
51 |
52 |
53 |
54 | /***************************************************************************************************
55 | * Zone JS is required by Angular itself.
56 | */
57 | import 'zone.js/dist/zone'; // Included with Angular CLI.
58 |
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
65 | /**
66 | * Date, currency, decimal and percent pipes.
67 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
68 | */
69 | // import 'intl'; // Run `npm install --save intl`.
70 | /**
71 | * Need to import at least one locale-data with intl.
72 | */
73 | // import 'intl/locale-data/jsonp/en';
74 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { NoopAnimationsModule } from '@angular/platform-browser/animations';
4 | import { RouterModule } from '@angular/router';
5 | import { BreadcrumbModule } from 'angular-crumbs';
6 | import {FormsModule} from '@angular/forms';
7 | import {BrowserModule} from '@angular/platform-browser';
8 | import {HttpModule} from '@angular/http';
9 | import {LocationStrategy, HashLocationStrategy} from '@angular/common';
10 |
11 | import {MatListModule} from '@angular/material/list';
12 | import {MatToolbarModule} from '@angular/material/toolbar';
13 | import {MatSidenavModule} from '@angular/material/sidenav';
14 | import {MatButtonModule} from '@angular/material/button';
15 | import {MatInputModule} from '@angular/material/input';
16 | import {MatIconModule} from '@angular/material/icon';
17 | import {MatFormFieldModule} from '@angular/material/form-field';
18 | import {MatExpansionModule} from '@angular/material/expansion';
19 | import {MatMenuModule} from '@angular/material/menu';
20 |
21 | import { rootRouterConfig } from './app.routes';
22 | import { AppComponent } from './app.component';
23 | import { LayoutComponent } from './layout/layout.component';
24 | import { AboutComponent } from 'src/app/shared/about/about.component';
25 | import { HomeComponent } from 'src/app/shared/home/home.component';
26 | import { GitHubComponent } from 'src/app/shared/github/github.component';
27 | import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
28 | import { RepoListComponent } from 'src/app/shared/github/repo-list/repo-list.component';
29 | import { RepoDetailComponent } from 'src/app/shared/github/repo-detail/repo-detail.component';
30 | import { OrganisationComponent } from 'src/app/shared/github/organisation/organisation.component';
31 |
32 | import { APP_RESOLVER_PROVIDERS } from 'src/app/app.resolver';
33 |
34 | const APP_PROVIDERS = [
35 | ...APP_RESOLVER_PROVIDERS,
36 | ];
37 |
38 | @NgModule({
39 | declarations: [
40 | AppComponent,
41 | LayoutComponent,
42 | AboutComponent,
43 | RepoBrowserComponent,
44 | RepoListComponent,
45 | RepoDetailComponent,
46 | HomeComponent,
47 | GitHubComponent,
48 | OrganisationComponent
49 | ],
50 | imports: [
51 | BrowserModule,
52 | BreadcrumbModule,
53 | FormsModule,
54 | HttpModule,
55 | CommonModule,
56 | NoopAnimationsModule,
57 | MatListModule,
58 | MatToolbarModule,
59 | MatSidenavModule,
60 | MatButtonModule,
61 | MatInputModule,
62 | MatIconModule,
63 | MatFormFieldModule,
64 | MatExpansionModule,
65 | MatMenuModule,
66 | RouterModule.forRoot(rootRouterConfig)
67 | ],
68 | providers: [
69 | APP_PROVIDERS,
70 | {provide: LocationStrategy, useClass: HashLocationStrategy}
71 | ],
72 | bootstrap: [AppComponent]
73 | })
74 |
75 | export class AppModule {
76 |
77 | }
78 |
--------------------------------------------------------------------------------
/src/breadcrumb.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, EventEmitter } from '@angular/core';
2 | import { Router, ActivatedRouteSnapshot, Event, NavigationEnd } from '@angular/router';
3 |
4 | import { Breadcrumb } from './breadcrumb';
5 |
6 | @Injectable()
7 | export class BreadcrumbService {
8 | breadcrumbChanged = new EventEmitter(false);
9 |
10 | private breadcrumbs = new Array();
11 |
12 | constructor(private router: Router) {
13 | this.router.events.subscribe((routeEvent) => { this.onRouteEvent(routeEvent); });
14 | }
15 |
16 | public changeBreadcrumb(route: ActivatedRouteSnapshot, name: string) {
17 | const rootUrl = this.createRootUrl(route);
18 | const breadcrumb = this.breadcrumbs.find(function (bc) { return bc.url === rootUrl; });
19 |
20 | if (!breadcrumb) { return; }
21 |
22 | breadcrumb.displayName = name;
23 |
24 | this.breadcrumbChanged.emit(this.breadcrumbs);
25 | }
26 |
27 | private onRouteEvent(routeEvent: Event) {
28 | if (!(routeEvent instanceof NavigationEnd)) { return; }
29 |
30 | let route = this.router.routerState.root.snapshot;
31 | let url = '';
32 |
33 | var breadCrumbIndex = 0;
34 | var newCrumbs = [];
35 |
36 | while (route.firstChild != null) {
37 | route = route.firstChild;
38 |
39 | if (route.routeConfig === null) { continue; }
40 | if (!route.routeConfig.path) { continue; }
41 |
42 | url += `/${this.createUrl(route)}`;
43 |
44 | if (!route.data['breadcrumb']) { continue; }
45 |
46 | var newCrumb = this.createBreadcrumb(route, url)
47 |
48 | if (breadCrumbIndex < this.breadcrumbs.length) {
49 | var existing = this.breadcrumbs[breadCrumbIndex++];
50 |
51 | if (existing && existing.route == route.routeConfig) {
52 | newCrumb.displayName = existing.displayName;
53 | }
54 | }
55 |
56 | newCrumbs.push(newCrumb);
57 | }
58 |
59 | this.breadcrumbs = newCrumbs;
60 | this.breadcrumbChanged.emit(this.breadcrumbs);
61 | }
62 |
63 | private createBreadcrumb(route: ActivatedRouteSnapshot, url: string): Breadcrumb {
64 | return {
65 | displayName: route.data['breadcrumb'],
66 | terminal: this.isTerminal(route),
67 | url: url,
68 | route: route.routeConfig
69 | }
70 | }
71 |
72 | private isTerminal(route: ActivatedRouteSnapshot) {
73 | return route.firstChild === null
74 | || route.firstChild.routeConfig === null
75 | || !route.firstChild.routeConfig.path;
76 | }
77 |
78 | private createUrl(route: ActivatedRouteSnapshot) {
79 | return route.url.map(function (s) { return s.toString(); }).join('/');
80 | }
81 |
82 | private createRootUrl(route: ActivatedRouteSnapshot) {
83 | let url = '';
84 | let next = route.root;
85 |
86 | while (next.firstChild !== null) {
87 | next = next.firstChild;
88 |
89 | if (next.routeConfig === null) { continue; }
90 | if (!next.routeConfig.path) { continue; }
91 |
92 | url += `/${this.createUrl(next)}`;
93 |
94 | if (next === route) { break; }
95 | }
96 |
97 | return url;
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-shadowed-variable": true,
69 | "no-string-literal": false,
70 | "no-string-throw": true,
71 | "no-switch-case-fall-through": true,
72 | "no-trailing-whitespace": true,
73 | "no-unnecessary-initializer": true,
74 | "no-unused-expression": true,
75 | "no-use-before-declare": true,
76 | "no-var-keyword": true,
77 | "object-literal-sort-keys": false,
78 | "one-line": [
79 | true,
80 | "check-open-brace",
81 | "check-catch",
82 | "check-else",
83 | "check-whitespace"
84 | ],
85 | "prefer-const": true,
86 | "quotemark": [
87 | true,
88 | "single"
89 | ],
90 | "radix": true,
91 | "semicolon": [
92 | true,
93 | "always"
94 | ],
95 | "triple-equals": [
96 | true,
97 | "allow-null-check"
98 | ],
99 | "typedef-whitespace": [
100 | true,
101 | {
102 | "call-signature": "nospace",
103 | "index-signature": "nospace",
104 | "parameter": "nospace",
105 | "property-declaration": "nospace",
106 | "variable-declaration": "nospace"
107 | }
108 | ],
109 | "unified-signatures": true,
110 | "variable-name": false,
111 | "whitespace": [
112 | true,
113 | "check-branch",
114 | "check-decl",
115 | "check-operator",
116 | "check-separator",
117 | "check-type"
118 | ],
119 | "no-output-on-prefix": true,
120 | "use-input-property-decorator": true,
121 | "use-output-property-decorator": true,
122 | "use-host-property-decorator": true,
123 | "no-input-rename": true,
124 | "no-output-rename": true,
125 | "use-life-cycle-interface": true,
126 | "use-pipe-transform-interface": true,
127 | "component-class-suffix": true,
128 | "directive-class-suffix": true
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /**
50 | * Web Animations `@angular/platform-browser/animations`
51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 | **/
54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
55 |
56 | /**
57 | * By default, zone.js will patch all possible macroTask and DomEvents
58 | * user can disable parts of macroTask/DomEvents patch by setting following flags
59 | */
60 |
61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 |
65 | /*
66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 | */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 |
71 | /***************************************************************************************************
72 | * Zone JS is required by default for Angular itself.
73 | */
74 | import 'zone.js/dist/zone'; // Included with Angular CLI.
75 |
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/bootstrap-demo/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /**
50 | * Web Animations `@angular/platform-browser/animations`
51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 | **/
54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
55 |
56 | /**
57 | * By default, zone.js will patch all possible macroTask and DomEvents
58 | * user can disable parts of macroTask/DomEvents patch by setting following flags
59 | */
60 |
61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 |
65 | /*
66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 | */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 |
71 | /***************************************************************************************************
72 | * Zone JS is required by default for Angular itself.
73 | */
74 | import 'zone.js/dist/zone'; // Included with Angular CLI.
75 |
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/demos/demo-angular-six/projects/material-demo/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /**
50 | * Web Animations `@angular/platform-browser/animations`
51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 | **/
54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
55 |
56 | /**
57 | * By default, zone.js will patch all possible macroTask and DomEvents
58 | * user can disable parts of macroTask/DomEvents patch by setting following flags
59 | */
60 |
61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 |
65 | /*
66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 | */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 |
71 | /***************************************************************************************************
72 | * Zone JS is required by default for Angular itself.
73 | */
74 | import 'zone.js/dist/zone'; // Included with Angular CLI.
75 |
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/demos/demo-angular-four/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true,
18 | "rxjs"
19 | ],
20 | "import-spacing": true,
21 | "indent": [
22 | true,
23 | "spaces"
24 | ],
25 | "interface-over-type-literal": true,
26 | "label-position": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-access": false,
32 | "member-ordering": [
33 | true,
34 | "static-before-instance",
35 | "variables-before-functions"
36 | ],
37 | "no-arg": true,
38 | "no-bitwise": true,
39 | "no-console": [
40 | true,
41 | "debug",
42 | "info",
43 | "time",
44 | "timeEnd",
45 | "trace"
46 | ],
47 | "no-construct": true,
48 | "no-debugger": true,
49 | "no-duplicate-super": true,
50 | "no-empty": false,
51 | "no-empty-interface": true,
52 | "no-eval": true,
53 | "no-inferrable-types": [
54 | true,
55 | "ignore-params"
56 | ],
57 | "no-misused-new": true,
58 | "no-non-null-assertion": true,
59 | "no-shadowed-variable": true,
60 | "no-string-literal": false,
61 | "no-string-throw": true,
62 | "no-switch-case-fall-through": true,
63 | "no-trailing-whitespace": true,
64 | "no-unnecessary-initializer": true,
65 | "no-unused-expression": true,
66 | "no-use-before-declare": true,
67 | "no-var-keyword": true,
68 | "object-literal-sort-keys": false,
69 | "one-line": [
70 | true,
71 | "check-open-brace",
72 | "check-catch",
73 | "check-else",
74 | "check-whitespace"
75 | ],
76 | "prefer-const": true,
77 | "quotemark": [
78 | true,
79 | "single"
80 | ],
81 | "radix": true,
82 | "semicolon": [
83 | "always"
84 | ],
85 | "triple-equals": [
86 | true,
87 | "allow-null-check"
88 | ],
89 | "typedef-whitespace": [
90 | true,
91 | {
92 | "call-signature": "nospace",
93 | "index-signature": "nospace",
94 | "parameter": "nospace",
95 | "property-declaration": "nospace",
96 | "variable-declaration": "nospace"
97 | }
98 | ],
99 | "typeof-compare": true,
100 | "unified-signatures": true,
101 | "variable-name": false,
102 | "whitespace": [
103 | true,
104 | "check-branch",
105 | "check-decl",
106 | "check-operator",
107 | "check-separator",
108 | "check-type"
109 | ],
110 | "directive-selector": [
111 | true,
112 | "attribute",
113 | "app",
114 | "camelCase"
115 | ],
116 | "component-selector": [
117 | true,
118 | "element",
119 | "app",
120 | "kebab-case"
121 | ],
122 | "use-input-property-decorator": true,
123 | "use-output-property-decorator": true,
124 | "use-host-property-decorator": true,
125 | "no-input-rename": true,
126 | "no-output-rename": true,
127 | "use-life-cycle-interface": true,
128 | "use-pipe-transform-interface": true,
129 | "component-class-suffix": true,
130 | "directive-class-suffix": true,
131 | "no-access-missing-member": true,
132 | "templates-use-public": true,
133 | "invoke-injectable": true
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true,
18 | "rxjs"
19 | ],
20 | "import-spacing": true,
21 | "indent": [
22 | true,
23 | "spaces"
24 | ],
25 | "interface-over-type-literal": true,
26 | "label-position": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-access": false,
32 | "member-ordering": [
33 | true,
34 | "static-before-instance",
35 | "variables-before-functions"
36 | ],
37 | "no-arg": true,
38 | "no-bitwise": true,
39 | "no-console": [
40 | true,
41 | "debug",
42 | "info",
43 | "time",
44 | "timeEnd",
45 | "trace"
46 | ],
47 | "no-construct": true,
48 | "no-debugger": true,
49 | "no-duplicate-super": true,
50 | "no-empty": false,
51 | "no-empty-interface": true,
52 | "no-eval": true,
53 | "no-inferrable-types": [
54 | true,
55 | "ignore-params"
56 | ],
57 | "no-misused-new": true,
58 | "no-non-null-assertion": true,
59 | "no-shadowed-variable": true,
60 | "no-string-literal": false,
61 | "no-string-throw": true,
62 | "no-switch-case-fall-through": true,
63 | "no-trailing-whitespace": true,
64 | "no-unnecessary-initializer": true,
65 | "no-unused-expression": true,
66 | "no-use-before-declare": true,
67 | "no-var-keyword": true,
68 | "object-literal-sort-keys": false,
69 | "one-line": [
70 | true,
71 | "check-open-brace",
72 | "check-catch",
73 | "check-else",
74 | "check-whitespace"
75 | ],
76 | "prefer-const": true,
77 | "quotemark": [
78 | true,
79 | "single"
80 | ],
81 | "radix": true,
82 | "semicolon": [
83 | "always"
84 | ],
85 | "triple-equals": [
86 | true,
87 | "allow-null-check"
88 | ],
89 | "typedef-whitespace": [
90 | true,
91 | {
92 | "call-signature": "nospace",
93 | "index-signature": "nospace",
94 | "parameter": "nospace",
95 | "property-declaration": "nospace",
96 | "variable-declaration": "nospace"
97 | }
98 | ],
99 | "typeof-compare": true,
100 | "unified-signatures": true,
101 | "variable-name": false,
102 | "whitespace": [
103 | true,
104 | "check-branch",
105 | "check-decl",
106 | "check-operator",
107 | "check-separator",
108 | "check-type"
109 | ],
110 | "directive-selector": [
111 | true,
112 | "attribute",
113 | "app",
114 | "camelCase"
115 | ],
116 | "component-selector": [
117 | true,
118 | "element",
119 | "app",
120 | "kebab-case"
121 | ],
122 | "use-input-property-decorator": true,
123 | "use-output-property-decorator": true,
124 | "use-host-property-decorator": true,
125 | "no-input-rename": true,
126 | "no-output-rename": true,
127 | "use-life-cycle-interface": true,
128 | "use-pipe-transform-interface": true,
129 | "component-class-suffix": true,
130 | "directive-class-suffix": true,
131 | "no-access-missing-member": true,
132 | "templates-use-public": true,
133 | "invoke-injectable": true
134 | }
135 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular Breadcrumb
2 |
3 | ## Installation
4 |
5 | ```shell
6 | npm install angular-crumbs --save
7 | ```
8 |
9 | #### 1. Import the `BreadcrumbModule`
10 | Import `BreadcrumbModule` in the NgModule of your application.
11 |
12 | ```typescript
13 | import {BrowserModule} from "@angular/platform-browser";
14 | import {NgModule} from '@angular/core';
15 | import {BreadcrumbModule} from 'angular-crumbs';
16 |
17 | @NgModule({
18 | imports: [
19 | BrowserModule,
20 | BreadcrumbModule
21 | ],
22 | bootstrap: [AppComponent]
23 | })
24 | export class AppModule {}
25 | ```
26 |
27 | #### 2. Set breadcumbs in `app.routes`
28 | ```javascript
29 | export const rootRouterConfig: Routes = [
30 | {path: '', redirectTo: 'home', pathMatch: 'full'},
31 | {path: 'home', ..., data: { breadcrumb: 'Home'}},
32 | {path: 'about', ..., data: { breadcrumb: 'About'}},
33 | {path: 'github', ..., data: { breadcrumb: 'GitHub'},
34 | children: [
35 | {path: '', ...},
36 | {path: ':org', ..., data: { breadcrumb: 'Repo List'},
37 | children: [
38 | {path: '', ...},
39 | {path: ':repo', ..., data: { breadcrumb: 'Repo'}}
40 | ]
41 | }]
42 | }
43 | ];
44 | ```
45 |
46 | #### 3. Update the markup
47 | - Import the `style.css` into your web page
48 | - Add ` ` tag in template of your application component.
49 |
50 | ## Demo [(live)](https://emilol.github.io/angular-crumbs)
51 |
52 | ## Customization
53 |
54 | ### Template Customization
55 |
56 | You can BYO template using the breadcrumb's ng-content transclude.
57 |
58 | #### bootstrap breadcrumb:
59 |
60 | ```html
61 |
62 |
63 |
64 |
65 | {{ route.displayName }}
66 |
67 | {{ route.displayName }}
68 |
69 |
70 |
71 | ```
72 |
73 | #### @angular/material breadcrumb
74 |
75 | ```html
76 |
77 |
78 | {{ route.displayName }}
79 | {{ route.displayName }}
80 |
81 |
82 | ```
83 |
84 | #### primeng breadcrumb
85 |
86 | ```html
87 |
88 | ```
89 | ```typescript
90 | export class AppComponent {
91 | breadcrumbs: MenuItem[];
92 |
93 | constructor(private breadcrumbService: BreadcrumbService) { }
94 |
95 | ngOnInit() {
96 | this.breadcrumbService.breadcrumbChanged.subscribe(crumbs => {
97 | this.breadcrumbs = crumbs.map(c => this.toPrimeNgMenuItem(c));
98 | });
99 | }
100 |
101 | private toPrimeNgMenuItem(crumb: Breadcrumb) {
102 | return { label: crumb.displayName, url: `#${crumb.url}`}
103 | }
104 | }
105 | ```
106 |
107 | ### Dynamic breadcrumbs
108 |
109 | Use `BreadcrumbService` to set the breadcrumb description dynamically. [See full demo example](https://github.com/emilol/angular-crumbs/blob/master/demos/demo-angular-six/src/app/shared/github/repo-detail/repo-detail.component.ts)
110 |
111 | ```typescript
112 | ngOnInit() {
113 | ...
114 | this.github
115 | .getRepoForOrg(this.org, this.repo)
116 | .subscribe(repoDetails => {
117 | ...
118 | this.breadcrumbService.changeBreadcrumb(this.route.snapshot, repoDetails.name);
119 |
120 | });
121 | ...
122 | }
123 | ```
124 |
125 | ### Dynamic page titles
126 |
127 | Use `BreadcrumbService` to subscribe to breadcrumb changes. [See full demo example](https://github.com/emilol/angular-crumbs/blob/master/demos/demo-angular-six/projects/bootstrap-demo/src/app/app.component.ts)
128 |
129 | ```typescript
130 | ngOnInit() {
131 | this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
132 | this.titleService.setTitle(this.createTitle(crumbs));
133 | });
134 | }
135 | ```
136 |
137 | # License
138 | [MIT](/LICENSE)
--------------------------------------------------------------------------------
/demos/demo-angular-six/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "demo-angular-six": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {},
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/demo-angular-six",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "src/tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.scss"
27 | ],
28 | "scripts": []
29 | },
30 | "configurations": {
31 | "production": {
32 | "fileReplacements": [
33 | {
34 | "replace": "src/environments/environment.ts",
35 | "with": "src/environments/environment.prod.ts"
36 | }
37 | ],
38 | "optimization": true,
39 | "outputHashing": "all",
40 | "sourceMap": false,
41 | "extractCss": true,
42 | "namedChunks": false,
43 | "aot": true,
44 | "extractLicenses": true,
45 | "vendorChunk": false,
46 | "buildOptimizer": true
47 | }
48 | }
49 | },
50 | "serve": {
51 | "builder": "@angular-devkit/build-angular:dev-server",
52 | "options": {
53 | "browserTarget": "demo-angular-six:build"
54 | },
55 | "configurations": {
56 | "production": {
57 | "browserTarget": "demo-angular-six:build:production"
58 | }
59 | }
60 | },
61 | "extract-i18n": {
62 | "builder": "@angular-devkit/build-angular:extract-i18n",
63 | "options": {
64 | "browserTarget": "demo-angular-six:build"
65 | }
66 | },
67 | "test": {
68 | "builder": "@angular-devkit/build-angular:karma",
69 | "options": {
70 | "main": "src/test.ts",
71 | "polyfills": "src/polyfills.ts",
72 | "tsConfig": "src/tsconfig.spec.json",
73 | "karmaConfig": "src/karma.conf.js",
74 | "styles": [
75 | "src/styles.css"
76 | ],
77 | "scripts": [],
78 | "assets": [
79 | "src/favicon.ico",
80 | "src/assets"
81 | ]
82 | }
83 | },
84 | "lint": {
85 | "builder": "@angular-devkit/build-angular:tslint",
86 | "options": {
87 | "tsConfig": [
88 | "src/tsconfig.app.json",
89 | "src/tsconfig.spec.json"
90 | ],
91 | "exclude": [
92 | "**/node_modules/**"
93 | ]
94 | }
95 | }
96 | }
97 | },
98 | "demo-angular-six-e2e": {
99 | "root": "e2e/",
100 | "projectType": "application",
101 | "architect": {
102 | "e2e": {
103 | "builder": "@angular-devkit/build-angular:protractor",
104 | "options": {
105 | "protractorConfig": "e2e/protractor.conf.js",
106 | "devServerTarget": "demo-angular-six:serve"
107 | },
108 | "configurations": {
109 | "production": {
110 | "devServerTarget": "demo-angular-six:serve:production"
111 | }
112 | }
113 | },
114 | "lint": {
115 | "builder": "@angular-devkit/build-angular:tslint",
116 | "options": {
117 | "tsConfig": "e2e/tsconfig.e2e.json",
118 | "exclude": [
119 | "**/node_modules/**"
120 | ]
121 | }
122 | }
123 | }
124 | },
125 | "material-demo": {
126 | "root": "projects/material-demo/",
127 | "sourceRoot": "projects/material-demo/src",
128 | "projectType": "application",
129 | "prefix": "app",
130 | "schematics": {},
131 | "architect": {
132 | "build": {
133 | "builder": "@angular-devkit/build-angular:browser",
134 | "options": {
135 | "outputPath": "dist/material-demo",
136 | "index": "projects/material-demo/src/index.html",
137 | "main": "projects/material-demo/src/main.ts",
138 | "polyfills": "projects/material-demo/src/polyfills.ts",
139 | "tsConfig": "projects/material-demo/tsconfig.app.json",
140 | "assets": [
141 | "projects/material-demo/src/favicon.ico",
142 | "projects/material-demo/src/assets"
143 | ],
144 | "styles": [
145 | "projects/material-demo/src/styles.css"
146 | ],
147 | "scripts": []
148 | },
149 | "configurations": {
150 | "production": {
151 | "fileReplacements": [
152 | {
153 | "replace": "projects/material-demo/src/environments/environment.ts",
154 | "with": "projects/material-demo/src/environments/environment.prod.ts"
155 | }
156 | ],
157 | "optimization": true,
158 | "outputHashing": "all",
159 | "sourceMap": false,
160 | "extractCss": true,
161 | "namedChunks": false,
162 | "aot": true,
163 | "extractLicenses": true,
164 | "vendorChunk": false,
165 | "buildOptimizer": true
166 | }
167 | }
168 | },
169 | "serve": {
170 | "builder": "@angular-devkit/build-angular:dev-server",
171 | "options": {
172 | "browserTarget": "material-demo:build"
173 | },
174 | "configurations": {
175 | "production": {
176 | "browserTarget": "material-demo:build:production"
177 | }
178 | }
179 | },
180 | "extract-i18n": {
181 | "builder": "@angular-devkit/build-angular:extract-i18n",
182 | "options": {
183 | "browserTarget": "material-demo:build"
184 | }
185 | },
186 | "test": {
187 | "builder": "@angular-devkit/build-angular:karma",
188 | "options": {
189 | "main": "projects/material-demo/src/test.ts",
190 | "polyfills": "projects/material-demo/src/polyfills.ts",
191 | "tsConfig": "projects/material-demo/tsconfig.spec.json",
192 | "karmaConfig": "projects/material-demo/karma.conf.js",
193 | "styles": [
194 | "projects/material-demo/src/styles.css"
195 | ],
196 | "scripts": [],
197 | "assets": [
198 | "projects/material-demo/src/favicon.ico",
199 | "projects/material-demo/src/assets"
200 | ]
201 | }
202 | },
203 | "lint": {
204 | "builder": "@angular-devkit/build-angular:tslint",
205 | "options": {
206 | "tsConfig": [
207 | "projects/material-demo/tsconfig.app.json",
208 | "projects/material-demo/tsconfig.spec.json"
209 | ],
210 | "exclude": [
211 | "**/node_modules/**"
212 | ]
213 | }
214 | }
215 | }
216 | },
217 | "material-demo-e2e": {
218 | "root": "projects/material-demo-e2e/",
219 | "projectType": "application",
220 | "architect": {
221 | "e2e": {
222 | "builder": "@angular-devkit/build-angular:protractor",
223 | "options": {
224 | "protractorConfig": "projects/material-demo-e2e/protractor.conf.js",
225 | "devServerTarget": "material-demo:serve"
226 | },
227 | "configurations": {
228 | "production": {
229 | "devServerTarget": "material-demo:serve:production"
230 | }
231 | }
232 | },
233 | "lint": {
234 | "builder": "@angular-devkit/build-angular:tslint",
235 | "options": {
236 | "tsConfig": "projects/material-demo-e2e/tsconfig.e2e.json",
237 | "exclude": [
238 | "**/node_modules/**"
239 | ]
240 | }
241 | }
242 | }
243 | },
244 | "bootstrap-demo": {
245 | "root": "projects/bootstrap-demo/",
246 | "sourceRoot": "projects/bootstrap-demo/src",
247 | "projectType": "application",
248 | "prefix": "app",
249 | "schematics": {},
250 | "architect": {
251 | "build": {
252 | "builder": "@angular-devkit/build-angular:browser",
253 | "options": {
254 | "outputPath": "dist/bootstrap-demo",
255 | "index": "projects/bootstrap-demo/src/index.html",
256 | "main": "projects/bootstrap-demo/src/main.ts",
257 | "polyfills": "projects/bootstrap-demo/src/polyfills.ts",
258 | "tsConfig": "projects/bootstrap-demo/tsconfig.app.json",
259 | "assets": [
260 | "projects/bootstrap-demo/src/favicon.ico",
261 | "projects/bootstrap-demo/src/assets"
262 | ],
263 | "styles": [
264 | "projects/bootstrap-demo/src/styles.css"
265 | ],
266 | "scripts": []
267 | },
268 | "configurations": {
269 | "production": {
270 | "fileReplacements": [
271 | {
272 | "replace": "projects/bootstrap-demo/src/environments/environment.ts",
273 | "with": "projects/bootstrap-demo/src/environments/environment.prod.ts"
274 | }
275 | ],
276 | "optimization": true,
277 | "outputHashing": "all",
278 | "sourceMap": false,
279 | "extractCss": true,
280 | "namedChunks": false,
281 | "aot": true,
282 | "extractLicenses": true,
283 | "vendorChunk": false,
284 | "buildOptimizer": true
285 | }
286 | }
287 | },
288 | "serve": {
289 | "builder": "@angular-devkit/build-angular:dev-server",
290 | "options": {
291 | "browserTarget": "bootstrap-demo:build"
292 | },
293 | "configurations": {
294 | "production": {
295 | "browserTarget": "bootstrap-demo:build:production"
296 | }
297 | }
298 | },
299 | "extract-i18n": {
300 | "builder": "@angular-devkit/build-angular:extract-i18n",
301 | "options": {
302 | "browserTarget": "bootstrap-demo:build"
303 | }
304 | },
305 | "test": {
306 | "builder": "@angular-devkit/build-angular:karma",
307 | "options": {
308 | "main": "projects/bootstrap-demo/src/test.ts",
309 | "polyfills": "projects/bootstrap-demo/src/polyfills.ts",
310 | "tsConfig": "projects/bootstrap-demo/tsconfig.spec.json",
311 | "karmaConfig": "projects/bootstrap-demo/karma.conf.js",
312 | "styles": [
313 | "projects/bootstrap-demo/src/styles.css"
314 | ],
315 | "scripts": [],
316 | "assets": [
317 | "projects/bootstrap-demo/src/favicon.ico",
318 | "projects/bootstrap-demo/src/assets"
319 | ]
320 | }
321 | },
322 | "lint": {
323 | "builder": "@angular-devkit/build-angular:tslint",
324 | "options": {
325 | "tsConfig": [
326 | "projects/bootstrap-demo/tsconfig.app.json",
327 | "projects/bootstrap-demo/tsconfig.spec.json"
328 | ],
329 | "exclude": [
330 | "**/node_modules/**"
331 | ]
332 | }
333 | }
334 | }
335 | },
336 | "bootstrap-demo-e2e": {
337 | "root": "projects/bootstrap-demo-e2e/",
338 | "projectType": "application",
339 | "architect": {
340 | "e2e": {
341 | "builder": "@angular-devkit/build-angular:protractor",
342 | "options": {
343 | "protractorConfig": "projects/bootstrap-demo-e2e/protractor.conf.js",
344 | "devServerTarget": "bootstrap-demo:serve"
345 | },
346 | "configurations": {
347 | "production": {
348 | "devServerTarget": "bootstrap-demo:serve:production"
349 | }
350 | }
351 | },
352 | "lint": {
353 | "builder": "@angular-devkit/build-angular:tslint",
354 | "options": {
355 | "tsConfig": "projects/bootstrap-demo-e2e/tsconfig.e2e.json",
356 | "exclude": [
357 | "**/node_modules/**"
358 | ]
359 | }
360 | }
361 | }
362 | },
363 | "primeng-demo": {
364 | "root": "projects/primeng-demo/",
365 | "sourceRoot": "projects/primeng-demo/src",
366 | "projectType": "application",
367 | "prefix": "app",
368 | "schematics": {},
369 | "architect": {
370 | "build": {
371 | "builder": "@angular-devkit/build-angular:browser",
372 | "options": {
373 | "outputPath": "dist/primeng-demo",
374 | "index": "projects/primeng-demo/src/index.html",
375 | "main": "projects/primeng-demo/src/main.ts",
376 | "polyfills": "projects/primeng-demo/src/polyfills.ts",
377 | "tsConfig": "projects/primeng-demo/tsconfig.app.json",
378 | "assets": [
379 | "projects/primeng-demo/src/favicon.ico",
380 | "projects/primeng-demo/src/assets"
381 | ],
382 | "styles": [
383 | "projects/primeng-demo/src/styles.scss"
384 | ],
385 | "scripts": []
386 | },
387 | "configurations": {
388 | "production": {
389 | "fileReplacements": [
390 | {
391 | "replace": "projects/primeng-demo/src/environments/environment.ts",
392 | "with": "projects/primeng-demo/src/environments/environment.prod.ts"
393 | }
394 | ],
395 | "optimization": true,
396 | "outputHashing": "all",
397 | "sourceMap": false,
398 | "extractCss": true,
399 | "namedChunks": false,
400 | "aot": true,
401 | "extractLicenses": true,
402 | "vendorChunk": false,
403 | "buildOptimizer": true
404 | }
405 | }
406 | },
407 | "serve": {
408 | "builder": "@angular-devkit/build-angular:dev-server",
409 | "options": {
410 | "browserTarget": "primeng-demo:build"
411 | },
412 | "configurations": {
413 | "production": {
414 | "browserTarget": "primeng-demo:build:production"
415 | }
416 | }
417 | },
418 | "extract-i18n": {
419 | "builder": "@angular-devkit/build-angular:extract-i18n",
420 | "options": {
421 | "browserTarget": "primeng-demo:build"
422 | }
423 | },
424 | "test": {
425 | "builder": "@angular-devkit/build-angular:karma",
426 | "options": {
427 | "main": "projects/primeng-demo/src/test.ts",
428 | "polyfills": "projects/primeng-demo/src/polyfills.ts",
429 | "tsConfig": "projects/primeng-demo/tsconfig.spec.json",
430 | "karmaConfig": "projects/primeng-demo/karma.conf.js",
431 | "styles": [
432 | "projects/primeng-demo/src/styles.css"
433 | ],
434 | "scripts": [],
435 | "assets": [
436 | "projects/primeng-demo/src/favicon.ico",
437 | "projects/primeng-demo/src/assets"
438 | ]
439 | }
440 | },
441 | "lint": {
442 | "builder": "@angular-devkit/build-angular:tslint",
443 | "options": {
444 | "tsConfig": [
445 | "projects/primeng-demo/tsconfig.app.json",
446 | "projects/primeng-demo/tsconfig.spec.json"
447 | ],
448 | "exclude": [
449 | "**/node_modules/**"
450 | ]
451 | }
452 | }
453 | }
454 | },
455 | "primeng-demo-e2e": {
456 | "root": "projects/primeng-demo-e2e/",
457 | "projectType": "application",
458 | "architect": {
459 | "e2e": {
460 | "builder": "@angular-devkit/build-angular:protractor",
461 | "options": {
462 | "protractorConfig": "projects/primeng-demo-e2e/protractor.conf.js",
463 | "devServerTarget": "primeng-demo:serve"
464 | },
465 | "configurations": {
466 | "production": {
467 | "devServerTarget": "primeng-demo:serve:production"
468 | }
469 | }
470 | },
471 | "lint": {
472 | "builder": "@angular-devkit/build-angular:tslint",
473 | "options": {
474 | "tsConfig": "projects/primeng-demo-e2e/tsconfig.e2e.json",
475 | "exclude": [
476 | "**/node_modules/**"
477 | ]
478 | }
479 | }
480 | }
481 | }
482 | },
483 | "defaultProject": "demo-angular-six"
484 | }
485 |
--------------------------------------------------------------------------------