├── .angular-cli.json
├── .gitignore
├── angular-elements-labs.tgz
├── elements
├── elements.module.ts
├── index.html
├── main.ts
├── polyfills.ts
└── tsconfig.app.json
├── package-lock.json
├── package.json
├── readme.md
├── src
├── app
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── product-info-card.component.css
│ ├── product-info-card.component.html
│ └── product-info-card.component.ts
├── assets
│ └── .gitkeep
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── tsconfig.app.json
└── typings.d.ts
├── tsconfig.json
└── yarn.lock
/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "project": {
4 | "name": "ae"
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 | "name": "elements",
33 | "root": "elements",
34 | "main": "main.ts",
35 | "polyfills": "polyfills.ts",
36 | "outDir": "dist-elements"
37 | }
38 | ],
39 | "e2e": {
40 | "protractor": {
41 | "config": "./protractor.conf.js"
42 | }
43 | },
44 | "lint": [
45 | {
46 | "project": "src/tsconfig.app.json",
47 | "exclude": "**/node_modules/**"
48 | },
49 | {
50 | "project": "src/tsconfig.spec.json",
51 | "exclude": "**/node_modules/**"
52 | },
53 | {
54 | "project": "e2e/tsconfig.e2e.json",
55 | "exclude": "**/node_modules/**"
56 | }
57 | ],
58 | "test": {
59 | "karma": {
60 | "config": "./karma.conf.js"
61 | }
62 | },
63 | "defaults": {
64 | "styleExt": "css",
65 | "class": {
66 | "spec": false
67 | },
68 | "component": {
69 | "inlineStyle": true,
70 | "inlineTemplate": true,
71 | "spec": false
72 | },
73 | "directive": {
74 | "spec": false
75 | },
76 | "guard": {
77 | "spec": false
78 | },
79 | "module": {
80 | "spec": false
81 | },
82 | "pipe": {
83 | "spec": false
84 | },
85 | "service": {
86 | "spec": false
87 | }
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /dist-server
6 | /dist-elements
7 | /tmp
8 | /out-tsc
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # IDEs and editors
14 | /.idea
15 | .project
16 | .classpath
17 | .c9/
18 | *.launch
19 | .settings/
20 | *.sublime-workspace
21 |
22 | # IDE - VSCode
23 | .vscode/*
24 | !.vscode/settings.json
25 | !.vscode/tasks.json
26 | !.vscode/launch.json
27 | !.vscode/extensions.json
28 |
29 | # misc
30 | /.sass-cache
31 | /connect.lock
32 | /coverage
33 | /libpeerconnection.log
34 | npm-debug.log
35 | testem.log
36 | /typings
37 |
38 | # e2e
39 | /e2e/*.js
40 | /e2e/*.map
41 |
42 | # System Files
43 | .DS_Store
44 | Thumbs.db
45 |
--------------------------------------------------------------------------------
/angular-elements-labs.tgz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nrwl/playbook-angular-v6-elements-example/2ba86a10d9c2ddd632922d3723af62293a5dba26/angular-elements-labs.tgz
--------------------------------------------------------------------------------
/elements/elements.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { ProductInfoCardComponent } from '../src/app/product-info-card.component';
4 |
5 | @NgModule({
6 | imports: [BrowserModule],
7 | declarations: [ProductInfoCardComponent],
8 | entryComponents: [ProductInfoCardComponent]
9 | })
10 | export class ElementsModule {
11 | ngDoBootstrap() {
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/elements/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Partner Program
6 | Partner Program
10 | Storefront
8 | {{product?.description}}
3 | Buy Now
--------------------------------------------------------------------------------
/src/app/product-info-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'product-info-card',
5 | templateUrl: './product-info-card.component.html',
6 | styleUrls: ['./product-info-card.component.css']
7 | })
8 | export class ProductInfoCardComponent {
9 | @Input() product: Product;
10 | @Output() buy = new EventEmitter();
11 | }
12 |
13 | export interface Product {
14 | name: string;
15 | description: string;
16 | }
17 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nrwl/playbook-angular-v6-elements-example/2ba86a10d9c2ddd632922d3723af62293a5dba26/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Ae
6 |