@angular/core#Renderer2 TypeScript Examples

export function setScreenPointFlex(point: DaBreakpoint, context: any, elementRef: ElementRef, renderer: Renderer2): void {
  let flexName;
  let flex;

  for (const tempPoint of DaBreakpoints) {
    flexName = 'daFlex' + firstLetterToUpperCase(tempPoint);
    flex = context[flexName] !== undefined ? context[flexName] : flex;
    if (tempPoint === point) {
      flex = flex === undefined ? context['daFlex'] : flex;
      break;
    }
  }

  renderer.setStyle(elementRef.nativeElement, 'flex', parseFlex(flex));
}

constructor(
    public toastCtrl: ToastController,
    private platform: Platform,
    private loadingCtrl: LoadingController,
    // private ngZone: NgZone,
    public route: Router,
    public activatedRoute: ActivatedRoute,
    public nav: NavController,
    private elementRef: ElementRef,
    private renderer: Renderer2,
    public modalCtrl: ModalController,
    public firestore: AngularFirestore,
    public navCtrl: NavController,
    // private dataService: DataService,
  ) { 
    // console.log('declared var:', google)

    // this.activateRoute.queryParams.subscribe((data: any) => {
    //   console.log("data.service:", data.service)
    //   this.service = data.service
    //   console.log("service1:", this.service)
    // })
  }

constructor(
    @Host() @Self() @Optional() private readonly matPag: MatPaginator,
    private readonly ViewContainer: ViewContainerRef,
    private readonly renderer: Renderer2
  ) {
    this.currentPage = 1;
    this.pageGapTxt = ['•••', '---'];
    this.showTotalPages = 3;
    this.checkPage = [0, 0, 0];
    // Display custom range label text
    this.matPag._intl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
      return length > 0 ? 'Showing ' + (startIndex + 1) + ' – ' + endIndex + ' of ' + length + ' records' : 'Showing 0 – 0 of 0 records';
    };
    // Subscribe to rerender buttons when next page and last page button is used
    this.matPag.page.subscribe((paginator: PageEvent) => {
      this.currentPage = paginator.pageIndex;
      this.matPag.pageIndex = paginator.pageIndex;
      this.initPageRange();
    });
  }

constructor(
    @Inject(ENV)
    private readonly env: typeof environment,
    private readonly settingsService: SettingsService,
    private readonly settingsQuery: SettingsQuery,
    private readonly walletsAccountsService: WalletsAccountsService,
    private readonly walletsAccountsQuery: WalletsAccountsQuery,
    private readonly walletsOperationsQuery: WalletsOperationsQuery,
    private readonly alertsLabelsService: AlertsLabelsService,
    private readonly horizonApisQuery: HorizonApisQuery,
    private readonly route: ActivatedRoute,
    @Inject(DOCUMENT)
    private readonly document: Document,
    private readonly renderer2: Renderer2,
    private readonly globalsService: GlobalsService,
    private readonly ngZone: NgZone,
    private readonly translateService: TranslateService,
  ) { }

export function setGridClass(context: any, elementRef: ElementRef, renderer: Renderer2): void {
  const breakpoints = ['Ms', 'Mm', 'Ml', 'Xs', 'Sm', 'Md', 'Lg', 'Xl'];
  const classPrefixMap: any = {
    daOffset: 'dl-offset-',
    daAlign: 'dl-align-items-',
    daJustify: 'dl-justify-content-',
    daAlignSelf: 'dl-align-self-',
    daOrder: 'dl-order-',
  };
  const tempClassMap: any = {};
  if (context.daSpan !== undefined) {
    const className = context.daSpan === 0 ? `dl-d-none` : `dl-col-${context.daSpan}`;
    tempClassMap[className] = true;
  }
  breakpoints.forEach((point) => {
    const sizeName = 'da' + point;
    point = point.toLowerCase();
    if (context[sizeName] !== undefined) {
      if (typeof context[sizeName] === 'number') {
        const className = context[sizeName] === 0 ? `dl-d-${point}-none` : `dl-col-${point}-${context[sizeName]}`;
        tempClassMap[className] = true;
      } else {
        const mergedProperty: any = context[sizeName] as DaMergedProperty;
        if (mergedProperty.hasOwnProperty('span')) {
          const className = mergedProperty['span'] === 0 ? `dl-d-${point}-none` : `dl-col-${point}-${mergedProperty['span']}`;
          tempClassMap[className] = true;
        }
        for (const prefix in classPrefixMap) {
          if (mergedProperty.hasOwnProperty(prefix.slice(2).toLowerCase())) {
            const className = classPrefixMap[prefix] + mergedProperty[prefix.slice(2).toLowerCase()];
            tempClassMap[className] = true;
          }
        }
      }
    }
  });

  for (const prefix in classPrefixMap) {
    if (context[prefix] !== undefined) {
      const className = classPrefixMap[prefix] + context[prefix];
      tempClassMap[className] = true;
    }
    breakpoints.forEach((point) => {
      const name = prefix + point;
      point = point.toLowerCase();
      if (context[name] !== undefined) {
        const className = classPrefixMap[prefix] + `${point}-${context[name]}`;
        tempClassMap[className] = true;
      }
    });
  }

  if (context.classMap) {
    for (const className in context.classMap) {
      if (context.classMap.hasOwnProperty(className)) {
        renderer.removeClass(elementRef.nativeElement, className);
      }
    }
  }

  context.classMap = { ...tempClassMap };
  for (const className in context.classMap) {
    if (context.classMap.hasOwnProperty(className) && context.classMap[className]) {
      renderer.addClass(elementRef.nativeElement, className);
    }
  }
}

constructor(
    private iconRegistry: LgBrandIconRegistry,
    @Inject(DOCUMENT) private document: any,
    private renderer: Renderer2,
    private hostElement: ElementRef,
  ) {
    this.renderer.addClass(
      this.hostElement.nativeElement,
      `lg-brand-icon--${this._size}`,
    );
  }

constructor(
    private el: ElementRef,
    private file: File,
    private renderer: Renderer2,
    private platform: Platform,
    private webview: WebView) {
    this.tag = this.el;
    if (!window['IonMediaCache']) {
      window['IonMediaCache'] = {};
    }
    if (this.isMobile) {
      fromEvent(document, 'deviceready').pipe(first()).subscribe(res => {
        this.initCache();
      });
    } else {
      this.initCache();
    }
  }

constructor(
		private restService: RestService,
		private renderer: Renderer2,
		private router: Router,
		private route: ActivatedRoute,
		private appService: AppService,
		private dataService: DataService,
		public themingService: ThemingService
	) { }

constructor(
    overlay: Overlay,
    viewContainerRef: ViewContainerRef,
    elRef: ElementRef<HTMLInputElement>,
    renderer: Renderer2,
    cdr: ChangeDetectorRef,
    ngZone: NgZone,
    @Optional()
    @Host()
    private readonly ngControl: NgControl,
  ) {
    super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
    this.type = TooltipType.Plain;
    this.trigger = TooltipTrigger.Manual;
    this.position = 'bottom start';
    this.hideOnClick = true;
  }

constructor(
    public element: ElementRef,
    public router: Router,
    public renderer: Renderer2,
    @Optional()
    @Inject(LINK_ACTIVE_OPTIONS)
    private defaultActiveOptions: LinkActiveOptions,
    @Optional() private link: LinkTo
  ) {}

constructor(
    private api: ApiService,
    private setup: SetupService,
    private theme: ThemeService,
    private router: Router,
    private renderer: Renderer2,
    private activatedRoute: ActivatedRoute) {

    this.theme.init(renderer);
  }

constructor(private elRef: ElementRef, private renderer: Renderer2) {
    const icon = `<svg class="np-icon" viewBox="0 0 24 24">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
        </svg>`;
    const blockUi = this.renderer.createElement("div");
    this.renderer.addClass(blockUi, "np-blockui");
    blockUi.innerHTML = icon;
    this.element = this.renderer.createElement("div");
    this.renderer.addClass(this.element, "np-blockui-backdrop");
    this.renderer.appendChild(this.element, blockUi);
  }

constructor(
    public globalData: GlobalData,
    public elementRef: ElementRef<HTMLElement>,
    private socket: Socket,
    private overlay: Overlay,
    private renderer: Renderer2,
    private platform: Platform,
    private injector: Injector,
    private destroyer: Destroyer,
  ) { }

constructor(
    private renderer: Renderer2,
    private apiService: ApiService,
    private settingsService: SettingsService,
    private cdRef: ChangeDetectorRef
  ) {
    super();
    this.searchForm = new FormGroup({
      searchField: new FormControl(''),
    });
  }

constructor(
    private route: ActivatedRoute,
    private avaService: AvaService,
    private userAuthService: UserAuthService,
    private formBuilder: FormBuilder,
    private router: Router,
    private el: ElementRef,
    private renderer2: Renderer2,
    private UnZipService: UnZipService,
    public env: EnvironmentsService,
    private toolService: ToolService,
    private s3Service: S3Service,
  ) {
    this.user = this.userAuthService.loggedUser().email;
    this.route.queryParams.subscribe((params) => {
      this.projectId = params['id'];
      this.projectName = params['name'];
      this.routeFrom = params['from'];
      this.projectType = params['projectType'];
      this.categoryList = params['categoryList'];
      this.regression = params['regression'];
    });

    this.userQuestionUpdate.pipe(debounceTime(400), distinctUntilChanged()).subscribe((value) => {
      if (value != '') {
        this.checkName(value);
      } else {
        this.nameExist = false;
      }
    });
  }

constructor(private element: ElementRef, private renderer: Renderer2, private  domCtrl: DomController) {
  }

private renderer: Renderer2;

constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    renderer.addClass(elementRef.nativeElement, 'banner');
  }

constructor(private elementRef: ElementRef, private router: Router, private renderer: Renderer2) {
    this.currentUrl = this.router.url;
  }

constructor(private renderer: Renderer2, private hostElement: ElementRef) {
    this.variant = 'generic';
  }

private renderer: Renderer2;

constructor(private renderer: Renderer2, private cdRef: ChangeDetectorRef) {}

constructor(private renderer: Renderer2) {}

constructor(
    private renderer: Renderer2,
    private viewContainer: ViewContainerRef,
    private compiler: Compiler,
    private injector: Injector,
    private factoryResolver: ComponentFactoryResolver,
    private _changeDetectorRef: ChangeDetectorRef) {
  }

constructor(cdr: ChangeDetectorRef, private readonly renderer: Renderer2) {
    super(cdr);
  }

public constructor(
		private readonly el: ElementRef<HTMLElement>,
		private readonly renderer: Renderer2) {
	}

public init(renderer: Renderer2) {
        this.renderer = renderer;
        this.updateMode();
    }

constructor(private markdownService: MarkdownService, 
                private router: Router, 
                private renderer: Renderer2,
                public route: ActivatedRoute,
                private viewportScroller: ViewportScroller) {}

constructor(
    private renderer2: Renderer2,
    @Inject(DocumentWrapper) private doc: DocumentWrapper,
    @Inject(PLATFORM_ID) private platformId: any
  ) {}