@angular/core#ElementRef 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)
    // })
  }

// Lifecycle methods
  // ----------------------------------------------------------------------

  constructor(
    private hostElement: ElementRef,
    private outletService: OutletService,
    private componentUpdater: ComponentUpdater,
    private platform: PlatformService,
    private injector: Injector
  ) {}

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 el: ElementRef) {
    this.dice.sides = new Array(6).fill(0).map((_, index) => {
      let value = index + 1;
      return {
        value,
        dots: new Array(index + 1).fill(0),
      };
    });
    this.rollTransition = RollTransitions.TransitionOne;
    this.selectedSide = this.dice.sides[0];
  }

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);
    }
  }
}

manageSwipe(status: boolean, element: ElementRef, id: string, nextHandler: Function, prevHandler: Function): void {

      const handlers = this.getSwipeHandlers(id);

      // swipeleft and swiperight are available only if hammerjs is included
      try {
          if (status && !handlers) {
              this.swipeHandlers.set(id, [
                  this.renderer.listen(element.nativeElement, 'swipeleft', () => nextHandler()),
                  this.renderer.listen(element.nativeElement, 'swiperight', () => prevHandler())
              ]);
          } else if (!status && handlers) {
              handlers.map((handler) => handler());
              this.removeSwipeHandlers(id);
          }
      } catch (e) {}
  }

constructor(private el: ElementRef, private overlay: Overlay, private tooltipService: TooltipService) {
    const pos = this.overlay.position().flexibleConnectedTo(this.el);
    pos.withPositions([
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
        offsetY: -13
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
        offsetY: 15
      },
    ]);
    this.pos = pos;
  }

constructor(
    @Self() @Optional() public control: NgControl,
    @Optional()
    @Inject(forwardRef(() => LgCheckboxGroupComponent))
    private checkboxGroup: LgCheckboxGroupComponent,
    private domService: LgDomService,
    private errorState: LgErrorStateMatcher,
    @Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective,
    private hostElement: ElementRef,
  ) {
    this.selectorVariant = this.hostElement.nativeElement.tagName
      .split('-')[1]
      .toLowerCase();

    if (this.checkboxGroup) {
      return;
    }

    if (this.control != null) {
      this.control.valueAccessor = this;
    }
  }

constructor(host: ElementRef<HTMLElement>,
              private _routerOutlet: SciRouterOutletElement,
              private _overlay: OverlayRef) {
    this._overlay.backdropClick()
      .pipe(takeUntil(this._destroy$))
      .subscribe(() => {
        this._overlay.dispose();
      });
  }

constructor(
    @Self() @Optional() private control: NgControl,
    private errorState: LgErrorStateMatcher,
    @Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective,
    private domService: LgDomService,
    private renderer: Renderer2,
    private hostElement: ElementRef,
  ) {
    this.variant = this.hostElement.nativeElement.tagName
      .split('-')[1]
      .toLowerCase() as CheckboxGroupVariant;

    if (this.control != null) {
      this.control.valueAccessor = this;
    }
  }

constructor(host: ElementRef<HTMLElement>,
              formBuilder: FormBuilder,
              private _activatedRoute: ActivatedRoute,
              private _overlay: Overlay,
              private _injector: Injector) {
    this.form = formBuilder.group({
      [URL]: new FormControl('', Validators.required),
    });
    this.appEntryPoints = this.readAppEntryPoints();
  }

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}`,
    );
  }

@ViewChild('context_define_button', {static: true})
  public _contextDefineButton: ElementRef<HTMLButtonElement>;

@ViewChild('menu')
  _menu: ElementRef;

@ViewChild("parent") parent: ElementRef;

@ViewChild('appDrawer') appDrawer: ElementRef;

constructor(private el: ElementRef) {}

@ViewChild('emptyItem') emptyItem: ElementRef;

@ViewChild('svgContainer')
  svgContainer!: ElementRef;

constructor(private sanitization: DomSanitizer,
      private elementRef: ElementRef, private helperService: NgxGalleryHelperService) {}

@ViewChild('key', {read: ElementRef})
  private _keyElement: ElementRef<HTMLElement>;

// @ts-ignore
  @ViewChild('quotaInput') quotaInput: ElementRef

export function mockElementFactory(): ElementRef {
  return new ElementRef({ nativeElement: jasmine.createSpyObj("nativeElement", ["value"]) });
}

@ViewChild("closeBtn", { static: false }) public closeBtn: ElementRef;

constructor(private readonly el: ElementRef, private readonly zone: NgZone) {
  }

@ViewChild('shareLink') private linkElement: ElementRef;

constructor(formBuilder: FormBuilder, private _host: ElementRef<HTMLElement>) {
    this.form = formBuilder.group({
      [CSS_SIZE]: formBuilder.group({
        [WIDTH]: new FormControl('', Validators.pattern(/^\d+px$/)),
        [HEIGHT]: new FormControl('', Validators.pattern(/^\d+px$/)),
      }),
      [PREFERRED_SIZE]: formBuilder.group({
        [WIDTH]: new FormControl('', Validators.pattern(/^\d+px$/)),
        [HEIGHT]: new FormControl('', Validators.pattern(/^\d+px$/)),
      }),
      [USE_ELEMENT_SIZE]: new FormControl(false),
    }, {updateOn: 'blur'});

    this.form.get(USE_ELEMENT_SIZE).valueChanges
      .pipe(takeUntil(this._destroy$))
      .subscribe(checked => {
        this.reset();
        this.form.get(USE_ELEMENT_SIZE).setValue(checked, {onlySelf: true, emitEvent: false});
      });

    this.form.get(CSS_SIZE).valueChanges
      .pipe(takeUntil(this._destroy$))
      .subscribe(() => {
        setCssVariable(this._host, '--width', this.form.get(CSS_SIZE).get(WIDTH).value);
        setCssVariable(this._host, '--height', this.form.get(CSS_SIZE).get(HEIGHT).value);
      });

    this.form.get(PREFERRED_SIZE).valueChanges
      .pipe(takeUntil(this._destroy$))
      .subscribe(() => {
        const width = this.form.get(PREFERRED_SIZE).get(WIDTH).value;
        const height = this.form.get(PREFERRED_SIZE).get(HEIGHT).value;
        Beans.get(PreferredSizeService).setPreferredSize({
          minWidth: width,
          width: width,
          maxWidth: width,
          minHeight: height,
          height: height,
          maxHeight: height,
        });
      });
  }

@ViewChild('page', {static: false, read: ElementRef}) page: ElementRef;