umairhm

@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

@mixin some-component-a {
    .some-component {
      display: inline;
    
      body[lang='fr'] & div {
        display: flex;
      }
    
      & div {
        display: block;

umairhm

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

umairhm

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

umairhm

<!-- Inline string value or an expression with a string value -->
<number-coercion numberOne="10" [numberTwo]="stringValue"></number-coercion>

umairhm

<!-- Expression with a number value or a class property -->
<number-coercion [numberOne]="10" [numberTwo]="numericValue"></number-coercion>

umairhm

import { Component, Input } from '@angular/core';

@Component({
  selector: 'number-coercion',
  template: `...`
})
export class NumberCoercionComponent  {
  @Input() numberOne: number;
  @Input() numberTwo: number;
}

umairhm

import { Component, ElementRef, Input } from '@angular/core';

@Component({
  selector: 'element-coercion',
  template: `...`
})
export class ElementCoercionComponent  {
  @Input() elementOne: Element | ElementRef;
  @Input() elementTwo: Element | ElementRef;
}

umairhm

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

umairhm

<!-- 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>