How to use the @angular/core.ViewEncapsulation.None function in @angular/core

/**
 * Possible results of the {@link StarkConfirmDialogComponent} after being closed.
 *
 * - "ok": The user clicked on the "Ok" button
 * - "cancel": The dialog was cancelled by clicking on the "Cancel" button
 * - `undefined`: The dialog was cancelled either by clicking outside of dialog or by pressing the ESC key
 */
export type StarkConfirmDialogResult = "ok" | "cancel" | undefined;

/**
 * Confirmation dialog component to be opened via the Angular Material's {@link MatDialog} service
 */
@Component({
	selector: "stark-confirm-dialog",
	templateUrl: "./confirm-dialog.component.html",
	encapsulation: ViewEncapsulation.None,
	changeDetection: ChangeDetectionStrategy.OnPush,
	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
	host: {
		class: "stark-confirm-dialog"
	}
})
export class StarkConfirmDialogComponent {
	/**
	 * Class constructor
	 * @param dialogRef - Reference this dialog instance
	 * @param content - Content to be shown in the confirmation dialog (dynamically translated via the [@link TranslateService} service if the
	 * provided text is defined in the translation keys)
	 */
	public constructor(
		public dialogRef: MatDialogRef,
		@Inject(MAT_DIALOG_DATA) public content: StarkConfirmDialogContent

function endOfPeriod(period: CalendarPeriod, date: Date): Date {
  return {
    day: endOfDay,
    week: endOfWeek,
    month: endOfMonth
  }[period](date);
}

@Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'template.html',
  styleUrls: ['styles.css'],
  // this is a hack to get styles to apply to the inner component. Your app should just use a global stylesheet
  encapsulation: ViewEncapsulation.None
})
export class DemoComponent {
  view: CalendarView | CalendarPeriod = CalendarView.Month;

  viewDate: Date = new Date();

  events: CalendarEvent[] = [];

  minDate: Date = subMonths(new Date(), 1);

  maxDate: Date = addMonths(new Date(), 1);

  prevBtnDisabled: boolean = false;

  nextBtnDisabled: boolean = false;

} from '@angular/core';
import { ChangeDetection } from '@angular-package/change-detection';

// internal
import { PrismHoodClass } from './prism.class';
import { PrismService } from './prism.service';

/**
 * @export
 * @class PrismComponent
 * @extends {PrismHoodClass}
 * @implements {AfterViewInit}
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  providers: [ PrismService ],
  selector: 'ngx-prism',
  templateUrl: './prism.component.html'
})
@ChangeDetection(false, {
  async: true,
  callback: true,
  code: true,
  hooks: true,
  language: true,
  interpolation: true
})
export
  class PrismComponent
  extends PrismHoodClass
  implements

import { DateLocale } from './date-locale';
import { DateUtil } from './date-util';


const DAYS_PER_WEEK = 7;


/**
 * An internal component used to display a single month in the datepicker.
 * @docs-private
 */
@Component({
  moduleId: module.id,
  selector: 'md2-month-view',
  templateUrl: 'month-view.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Md2MonthView implements AfterContentInit {
  /**
   * The date to display in this month view (everything other than the month and year is ignored).
   */
  @Input()
  get activeDate() { return this._activeDate; }
  set activeDate(value) {
    let oldActiveDate = this._activeDate;
    this._activeDate = this._locale.parseDate(value) || this._util.today();
    if (!this._util.isSameMonthAndYear(oldActiveDate, this._activeDate)) {
      this._init();
    }
  }
  private _activeDate = this._util.today();

import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {ICodeKataUnitProgress} from '../../../../../../shared/models/progress/ICodeKataProgress';

@Component({
  selector: 'app-code-kata-progress',
  templateUrl: './code-kata-progress.component.html',
  styleUrls: ['./code-kata-progress.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CodeKataProgressComponent implements OnInit {

  @Input() progress: ICodeKataUnitProgress;

  constructor() { }

  ngOnInit() {
  }

}

import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';
import {AtEvents} from "atomic-ui";
import {GlobalService} from '../../../shared/global/golbal.service';

@Component({
    selector: 'doc-navigator',
    templateUrl: './doc-navigator.component.html',
    styleUrls: ['./doc-navigator.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [GlobalService]
})
export class DocNavigatorComponent implements OnInit {

    @ViewChild('layoutMain') layoutMain;

    constructor(private router: Router, private globalService: GlobalService, private atEvents: AtEvents) {
    }

    ngOnInit(): void {
        this.atEvents.publish('layoutRef', this.layoutMain);
        this.globalService.layoutRef = this.layoutMain;
    }

}

//todo: poder usar una ml-header distinta en cada pagina (como en ionic)
//todo: hacer de ml un modulo en vez de un namespace para poder importar funciones individuales

import {Component, ElementRef, Renderer2, ViewEncapsulation, Input, Directive, ChangeDetectionStrategy}
  from "@angular/core";
import MdlLayout from "./mdlLayoutClass";
import * as ml from "../../lib/mlLib";

@Component({
selector: 'ml-layout',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['mlLayout.css', '../ripple/mlRipple.css'],
host: {class: 'mdl-layout mdl-layout__container'},
encapsulation: ViewEncapsulation.None,
template: '',
moduleId: module.id,
})
export class MlLayout {

  @Input() background: string;
  mdlLayout: MdlLayout;
  constructor(private host: ElementRef){}

  ngAfterViewInit() {
    if(ml.isDefined(this.background)){
      this.host.nativeElement.style.background = `url('${this.background}') 0 0 / cover`;
      const mlContent: HTMLElement = document.querySelector('ml-content') as HTMLElement;
      mlContent && (mlContent.style.backgroundColor = 'transparent');
    }
    this.mdlLayout = new MdlLayout(this.host.nativeElement);

* but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Alfresco. If not, see .
 */

import { Component, Input, ViewEncapsulation } from '@angular/core';
import { ContentActionRef } from '@alfresco/adf-extensions';
import { AppExtensionService } from '../../../extensions/extension.service';

@Component({
  selector: 'app-toolbar-menu-item',
  templateUrl: 'toolbar-menu-item.component.html',
  encapsulation: ViewEncapsulation.None,
  host: { class: 'app-toolbar-menu-item' }
})
export class ToolbarMenuItemComponent {
  @Input()
  actionRef: ContentActionRef;

  constructor(private extensions: AppExtensionService) {}

  runAction() {
    if (this.hasClickAction(this.actionRef)) {
      this.extensions.runActionById(this.actionRef.actions.click);
    }
  }

  private hasClickAction(actionRef: ContentActionRef): boolean {
    if (actionRef && actionRef.actions && actionRef.actions.click) {

provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NgxIpComponent),
  multi: true
};

export const ADDRESS_CONTROL_VALIDATORS: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => NgxIpComponent),
  multi: true
};

@Component({
  selector: 'ngx-ip',
  templateUrl: './ngx-ip.component.html',
  styleUrls: ['./ngx-ip.component.css'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ ADDRESS_CONTROL_VALUE_ACCESSOR, ADDRESS_CONTROL_VALIDATORS ],
  animations: [
    trigger('copyAnim', [
      transition('void => *', [
        style({
          transform: 'translateY(-100%)'
        }),
        animate('0.25s')
      ]),
      transition('* => void', [
        animate('0.25s', style({
          transform: 'translateY(-100%)'
        }))
      ])
    ]),

* @license
 * Copyright Alibaba.com All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'nz-card-loading',
  exportAs: 'nzCardLoading',
  templateUrl: './nz-card-loading.component.html',
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
      nz-card-loading {
        display: block;
      }
    `
  ]
})
export class NzCardLoadingComponent {
  constructor(elementRef: ElementRef, renderer: Renderer2) {
    renderer.addClass(elementRef.nativeElement, 'ant-card-loading-content');
  }
}