Skip to content

Commit cb48186

Browse files
valerisuleovalerisuleo
committed
angular: web components
1 parent 02f3e21 commit cb48186

File tree

182 files changed

+19993
-44470
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

182 files changed

+19993
-44470
lines changed

‎changeDetection/src/app/app.component.scss‎ renamed to ‎advanced-topic/ng-elements/.editorconfig‎

File renamed without changes.

‎home_work/zippy/.gitignore‎ renamed to ‎advanced-topic/ng-elements/.gitignore‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,42 @@
11
# See http://help.github.com/ignore-files/ for more about ignoring files.
22

3-
# compiled output
3+
# Compiled output
44
/dist
5-
/dist-server
65
/tmp
76
/out-tsc
7+
/bazel-out
88

9-
# dependencies
9+
# Node
1010
/node_modules
11+
npm-debug.log
12+
yarn-error.log
1113

1214
# IDEs and editors
13-
/.idea
15+
.idea/
1416
.project
1517
.classpath
1618
.c9/
1719
*.launch
1820
.settings/
1921
*.sublime-workspace
2022

21-
# IDE - VSCode
23+
# Visual Studio Code
2224
.vscode/*
2325
!.vscode/settings.json
2426
!.vscode/tasks.json
2527
!.vscode/launch.json
2628
!.vscode/extensions.json
29+
.history/*
2730

28-
# misc
29-
/.sass-cache
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
3034
/connect.lock
3135
/coverage
3236
/libpeerconnection.log
33-
npm-debug.log
34-
yarn-error.log
3537
testem.log
3638
/typings
3739

38-
# e2e
39-
/e2e/*.js
40-
/e2e/*.map
41-
42-
# System Files
40+
# System files
4341
.DS_Store
4442
Thumbs.db

‎advanced-topic/ng-elements/.vscode/extensions.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎advanced-topic/ng-elements/.vscode/launch.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "pwa-chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎advanced-topic/ng-elements/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"angular.enable-strict-mode-prompt": false
3+
}

‎advanced-topic/ng-elements/.vscode/tasks.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎advanced-topic/ng-elements/README.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# Angular Elements
2+
3+
4+
## What are they?
5+
6+
It's a feat. that allow us to turn our regular ***Angular** Components* into ***Web** Components*.
7+
8+
Now *WC* are basically custom HTML elements part of the DOM and the JS API and they are not related to Angular and can be used in other apps.
9+
10+
> They are also particulary useful when invoked in angular app: allow us to dynamically insert HTML code holding Angular Components **after** the angular app has been compiled and loaded.
11+
12+
13+
## Getting Started
14+
15+
- `ng new angular-elements`;
16+
- `npm i @angular/elements --save`;
17+
- `npm i @webcomponents/custom-elements --save`
18+
- go to `polyfill.ts`:
19+
20+
21+
```
22+
import '@webcomponents/custom-elements/src/native-shim';
23+
import '@webcomponents/custom-elements/src/custom-elements'
24+
25+
```
26+
27+
## Buiding Elements
28+
29+
1. Now that we are all set: `ng g c bootstrap-alert` and let's throw in some html:
30+
31+
```
32+
<div class="alert alert-primary" role="alert">
33+
{{ message }}
34+
</div>
35+
36+
```
37+
38+
2. In the `app.component.ts` let's create our element in 2 steps:
39+
40+
```
41+
constructor(injector: Injector) {
42+
// Convert `BootstrapAlertComponent` to a custom element.
43+
const AlertElement = createCustomElement(BootstrapAlertComponent, {
44+
injector,
45+
});
46+
// Register the custom element with the browser.
47+
customElements.define("alert-element", AlertElement);
48+
}
49+
```
50+
51+
> `Injector`: as we know angular use dependency injection and the injector is basically the tool that does the injection and the element under the hood can connect itself to our app.
52+
53+
> `customElements.define()` as we said it's a feature provide by JS and not by angular; here we define the tagname for our element `<alert-element><alert-element/>`
54+
55+
3. To verify it's working we can call our angular element inside the `index.html`
56+
57+
```
58+
<body>
59+
<app-root></app-root>
60+
<div class="container">
61+
<alert-element message="'My first AngularElements'"></alert-element>
62+
</div>
63+
</body>
64+
```
65+
66+
67+
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
83+
84+
85+
86+
87+
88+
89+
90+
91+
92+
93+
94+
95+
96+
97+
98+

‎advanced-topic/ng-elements/angular.json‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-elements": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/angular-elements",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": [
24+
"zone.js"
25+
],
26+
"tsConfig": "tsconfig.app.json",
27+
"inlineStyleLanguage": "scss",
28+
"assets": [
29+
"src/favicon.ico",
30+
"src/assets"
31+
],
32+
"styles": [
33+
"src/styles.scss"
34+
],
35+
"scripts": []
36+
},
37+
"configurations": {
38+
"production": {
39+
"budgets": [
40+
{
41+
"type": "initial",
42+
"maximumWarning": "500kb",
43+
"maximumError": "1mb"
44+
},
45+
{
46+
"type": "anyComponentStyle",
47+
"maximumWarning": "2kb",
48+
"maximumError": "4kb"
49+
}
50+
],
51+
"outputHashing": "all"
52+
},
53+
"development": {
54+
"buildOptimizer": false,
55+
"optimization": false,
56+
"vendorChunk": true,
57+
"extractLicenses": false,
58+
"sourceMap": true,
59+
"namedChunks": true
60+
}
61+
},
62+
"defaultConfiguration": "production"
63+
},
64+
"serve": {
65+
"builder": "@angular-devkit/build-angular:dev-server",
66+
"configurations": {
67+
"production": {
68+
"browserTarget": "angular-elements:build:production"
69+
},
70+
"development": {
71+
"browserTarget": "angular-elements:build:development"
72+
}
73+
},
74+
"defaultConfiguration": "development"
75+
},
76+
"extract-i18n": {
77+
"builder": "@angular-devkit/build-angular:extract-i18n",
78+
"options": {
79+
"browserTarget": "angular-elements:build"
80+
}
81+
},
82+
"test": {
83+
"builder": "@angular-devkit/build-angular:karma",
84+
"options": {
85+
"polyfills": [
86+
"zone.js",
87+
"zone.js/testing"
88+
],
89+
"tsConfig": "tsconfig.spec.json",
90+
"inlineStyleLanguage": "scss",
91+
"assets": [
92+
"src/favicon.ico",
93+
"src/assets"
94+
],
95+
"styles": [
96+
"src/styles.scss"
97+
],
98+
"scripts": []
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}

‎advanced-topic/ng-elements/concat.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const fs = require('fs-extra');
2+
const concat = require('concat');
3+
(async function build() {
4+
const files =[
5+
"dist/angular-elements/runtime.js",
6+
"dist/angular-elements/polyfills.js",
7+
"dist/angular-elements/main.js",
8+
]
9+
await fs.ensureDir('elements')
10+
await concat(files, 'elements/alert-elements.js')
11+
await fs.copyFile('dist/angular-elements/styles.css', 'elements/styles.css')
12+
})()

‎advanced-topic/ng-elements/elements/alert-elements.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)