Skip to content

Instantly share code, notes, and snippets.

View umairhm's full-sized avatar
🎯
Focusing

Umair Hafeez umairhm

🎯
Focusing
View GitHub Profile
@umairhm
umairhm / input.scss
Created February 18, 2021 23:01
Generated by SassMeister.com.
@mixin if-direct-parent($parent-selectors) {
$current-sequences: &;
$new-sequences: ();
@each $parent-selector in $parent-selectors {
@each $sequence in $current-sequences {
$current-selector: nth($sequence, -1);
$prepended-selector: join($parent-selector, $current-selector);
$new-sequence: set-nth($sequence, -1, $prepended-selector);
$new-sequences: append($new-sequences, $new-sequence, comma);
@umairhm
umairhm / input.scss
Created February 18, 2021 21:35
Generated by SassMeister.com.
@mixin some-component-a {
.some-component {
display: inline;
body[lang='fr'] & div {
display: flex;
}
& div {
display: block;
@umairhm
umairhm / Dockerfile
Last active January 14, 2021 17:03
Bundling multiple SPAs in one Docker image and using nginx to serve them
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*
COPY dist/apps usr/share/nginx/html
EXPOSE 80
import { Component, Input } from '@angular/core';
import { coerceNumberProperty } from '@angular/cdk/coercion'; // NEW IMPORT
@Component({
selector: 'number-coercion',
template: `...`
})
export class NumberCoercionComponent {
// In the following code, `@Input numberOne` will NOT work with strict type checking
// But we'll make the `@Input numberTwo` to work with strict type checking as well
<!-- Inline string value or an expression with a string value -->
<number-coercion numberOne="10" [numberTwo]="stringValue"></number-coercion>
<!-- Expression with a number value or a class property -->
<number-coercion [numberOne]="10" [numberTwo]="numericValue"></number-coercion>
import { Component, Input } from '@angular/core';
@Component({
selector: 'number-coercion',
template: `...`
})
export class NumberCoercionComponent {
@Input() numberOne: number;
@Input() numberTwo: number;
}
import { Component, ElementRef, Input } from '@angular/core';
@Component({
selector: 'element-coercion',
template: `...`
})
export class ElementCoercionComponent {
@Input() elementOne: Element | ElementRef;
@Input() elementTwo: Element | ElementRef;
}
import { Component, ElementRef, Input } from '@angular/core';
import { coerceElement } from '@angular/cdk/coercion'; // NEW IMPORT
@Component({
selector: 'element-coercion',
template: ``
})
export class ElementCoercionComponent {
// In the following code, `@Input elementOne` will NOT work with strict type checking
// But we'll make the `@Input elementTwo` to work with strict type checking as well
<!-- Assuming that 'htmlElement' is a class property that returns a native HTML element -->
<!-- Assuming that 'elementRef' is a class property that returns an instance of ElementRef -->
<element-coercion
[elementOne]="htmlElement"
[elementTwo]="elementRef"
></element-coercion>