Angular Elements Study

An Angular 8 app that uses @angular/elements for lazy loading of images.

*** Note: to open web links in a new window use: ctrl+click on link**

Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

General info

• "Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way."

• @angular/elements do the following:

1. Optimize Lighthouse performance with Angular Elements
2. Maintain predictible component state
3. Expose public methods
4. Emit public events
5. Project content with slots

• Custom Elements are not supported by all browsers. They are supported by Chrome, Firefox, Opera, and Safari. They are available in other browsers by using polyfills.

Screenshots

Technologies

• Angular /core v8.0.0 and Angular CLI v8.0.1.
• @angular/elements v8.0.0
• rxjs v6.5.2 ReactiveX library for composing asynchronous & event-based programs by using observable sequences.
• firebase v6.1.0
• ChangeDetectionStrategy.OnPush
• ViewEncapsulation
• Node.js v12.3.1

Setup

• Run app using ng serve then navigate to http://localhost:4200/.

Code Examples

Features

• Updated to Angular 8.

• Lazy loading of images according to the users scroll position.

• Improved lighthouse score.

Status & To-Do List

• Status: Updated to Angular 8 and no dependency vulnerabilities. ng serve and ng build processes start but I get error: ERROR in Could not resolve module @angular/core

• To-Do:

1. Fix @angular/core problem & do npm install.
2. Add firestore keys using .env file
3. I ran a Chrome dev audit and it only passed 1 out of 5 tests. There are a number of improvements that can be made to pass all 5 tests.

Inspiration

• Fireship tutorial by Jeff Delaney: Angular Elements Advanced Techniques

• Academind: Angular 8 - What's New? What changed?

• Angular Update Guide

• Medium Tutorial by Alain Chautard: How to create Custom Angular Elements?

• fcc article by by Prateek Mishra: How to create Angular 6 Custom Elements and Web Components

Contact

Repo created by ABateman - feel free to contact me!