Skip to content

Instantly share code, notes, and snippets.

@semagarcia
semagarcia / medium-wc-article--output-option-b.js
Created April 14, 2021 19:41
OPTION B: "Angular way" => Class (in Angular example, use this snippet inside AfterViewInit lifecycle hook)
// OPTION B: "Angular way" => Class
// In Angular example, use this snippet inside AfterViewInit lifecycle hook:
class MyAngularComponent implements AfterViewInit {
// Through @ViewChild decorator, Angular will get the first element matches selector in the DOM
@ViewChild('counter', { static: false }) counter;
ngAfterViewInit() {
// Angular-way
this.counter.nativeElement
@semagarcia
semagarcia / medium-wc-article--output-option-a.js
Created April 14, 2021 19:32
Option A: "standard way" => Class (in Angular example, use this snippet inside AfterViewInit lifecycle hook):
// OPTION A: "standard way" => Class
// In Angular example, use this snippet inside AfterViewInit lifecycle hook:
class MyAngularComponent implements AfterViewInit {
ngAfterViewInit() {
// Standard-way
document.querySelector('#clickCounter')
.addEventListener('counter-clicked', this.myCallbackFunction);
}
@semagarcia
semagarcia / medium-wc-article--output-example.html
Last active April 14, 2021 19:26
Output => data flow goes from the child (web component) to the parent
<!-- Template: web component inside an Angular component -->
<div>
<h1>I'm an Angular component</h1>
<click-counter id='clickCounter'></click-counter>
</div>
@semagarcia
semagarcia / medium-wc-article--input-example.html
Created April 14, 2021 19:24
Input => data flow goes from the parent (framework component) to its child (web component)
<!-- Template: Angular component containing web component -->
<div>
<h1>I'm an Angular component</h1>
<print-full-name
name="{{ user.name }}"
surname="{{ user.surname }}">
</print-full-name>
</div>
@semagarcia
semagarcia / medium-wc-article--tag-instantiation.html
Created April 14, 2021 19:13
Hello World Web Component example with plan JavaScript (without additional libraries)
<!-- HTML file -->
<my-web-component></my-web-component>
@semagarcia
semagarcia / medium-wc-article--hellow-world-template.html
Created April 14, 2021 19:12
Hello World Web Component example with plan JavaScript (without additional libraries)
<!-- HTML file -->
<template id="myTpl">
<h1>Hi, I am a WebComponent!</h1>
</template>
@semagarcia
semagarcia / medium-wc-article--hellow-world.js
Created April 14, 2021 19:10
Hello World Web Component example with plan JavaScript (without additional libraries)
<script>
// JavaScript code for creating "my-web-component" custom element
// using HTMLElement as base class from which to extend
customElements.define('my-web-component', class extends HTMLElement {
constructor() {
super();
// Find an HTML snippet (template used by WebComponent)
const template = document.querySelector('#myTpl');
const templateContent = template.content;
https://docs.google.com/presentation/d/1YWe46QRe5SHJzU_BP66AMWg3pHp-YC0VT_us11xOYbA/edit#slide=id.g62e0a832ab_2_110
# 1. Clone your fork:
git clone <your-forked-repo>.git
# 2. Add remote from original repository in your forked repository:
cd forked-repo
git remote add upstream <your-forked-repo>.git
git fetch upstream
# 3. Updating your forked repo from original one to keep up with their changes:
git pull upstream master
@semagarcia
semagarcia / generate-cert.sh
Created December 13, 2017 20:04
Generating a certificate
#! /bin/bash
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes