Identifying Internet Explorer 11 within Angular 5 to effectively manage and eliminate "property not found" alerts

While working on a custom directive that requires scroll position, I discovered that all major browsers support window.scrollY, except for IE11 which needs

document.documentElement.scrollTop
.

Therefore, I am attempting to check if the current browser is IE11:

  ngOnInit(){
    this.isIE11 = !!window.MSInputMethodContext && !!document.documentMode;// tslint:disable-line
    this.checkScrollPosition();
  }

However, I am encountering TypeScript errors stating that

property MSInputMethodContext doesn't exist on type Window
and
property documentMode doesn't exist on type Document
. Even though the code works fine in Chrome, Safari, and IE11.

1) Am I correct in assuming that this will work fine since TypeScript will be translated to pure JS where these properties will be accessible?

2) Should I suppress this warning (if so, how?), or should I try a different browser detection approach?

I have attempted to add the following lines, but with no success thus far:

//tslint:disable-line
//noinspection TypeScriptUnresolvedProperty

Answer №1

Consider using pageYOffset instead of scrollY. Although they are aliases of each other, pageYOffset has better support: https://developer.mozilla.org/it/docs/Web/API/Window/pageYOffset

If you prefer to stick with your current solution:

1) Yes, your assumption is correct.

2) You can silence the warning by adding a dummy cast:

!!(window as any).MSInputMethodContext && !!(document as any).documentMode;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on utilizing interpolation to transfer a value as an argument to a function

What is the correct way to insert the {{c.id}} argument into the function instead of hardcoding it as 32? <tr *ngFor="let c of myService.companyList"> <td>{{c.name}}</td> <td>{{c.email}}</td> <td>{{c.pass ...

Leveraging ng-repeat following an asynchronous $http request

I am currently diving into Angular (1.6.6), and I have a feeling that I might be overlooking something fundamental. By fetching JSON data from the database, I am able to populate a dropdown menu on ng-init successfully. Upon inspection using console.log() ...

Is there a way to automatically re-run Angular unit tests when changes are made, perhaps through the

Apologies, I am having trouble figuring out how to phrase or search for this. Are you familiar with the concept of having unit tests running in a console window and automatically rerunning whenever changes are made and saved? I am interested in adding a ...

Can someone assist me in creating mongoose models?

Currently, I am focused on managing products and categories These are the two types I have created: type Category = { parent: Category | null; // Is this acceptable? name: String; }; type Product = { categories: Category[]; name: String; ...

Mastering the art of Typescript typing

I am attempting to start the REST server for an Aries agent as outlined here: import { startServer } from '@aries-framework/rest' import { Agent } from '@aries-framework/core' import { agentDependencies } from '@aries-framework/nod ...

Tips for handling various HTTP requests until a response is received

For my application, I have a need to make multiple http calls before proceeding to create certain objects. Only after all the http requests have received responses from the servers can I process the results and construct my page. To handle this scenario, ...

Exploring the NextPage type in Next.js

Could someone provide an explanation of the NextPage type within a Next.js TypeScript project? Most sources mention that it is used for type assignment in Next.js, but I am curious about its practical purpose. When and why should we utilize this type? Wha ...

The proper method for organizing a nested array object - an obstacle arises when attempting to sort the array

I have a collection of data fetched from Web API 2.2 stored in an Angular array as objects. Each object represents a Client and includes properties like name, surname, and a collection of contracts assigned to that client. Here is the interface definition ...

"Guidance on setting up my input text box in Angular to allow for selection of required fields

I'm currently in the process of developing a form where all fields are required. My goal is to have the Next button move on to the subsequent form only if all required fields have been filled out. However, I seem to be encountering an issue where desp ...

Having trouble looping through an array in Angular 2?

I am currently using a FirebaseObjectObservable to retrieve the value of a property from my firebase database. The property can have multiple values, so I stored them in a local array variable. However, I ran into an issue while trying to iterate through ...

React development: How to define functional components with props as an array but have them recognized as an object

While trying to render <MyComponent {...docs} />, I encountered the following error: TypeError: docs.map is not a function Here's how I am rendering <MyComponent /> from a parent component based on a class: import * as React from &apo ...

You need to have an Angular project in order to use the serve command, however, the project definition could

I've been given a task that involves running the ng serve command in a specific folder. The folder structure I'm working with is as follows: ProjectFolder - > ClientApp - >Src -> dist ...

Exclude the extended type of generics in TypeScript

I'm encountering an issue with omit in typescript. Whenever I attempt to omit commandId from TMutationVariables, it triggers a TS error: TS2345: Argument of type 'Pick<TMutationVariables, Exclude<keyof TMutationVariables, "commandId">&g ...

Discover the magic of transforming user input into live asterisks using Angular2 and TypeScript

Currently I have a unique input field that transforms text into asterisks as the user types: `<h5>Answer</h5><span><a href="#" (click)="plainText(answer.value)">(show) <input type="text" #answer (keyup)="asterisk(answer.value) ...

Derive a generic intersection type by extracting various types from an array within a function argument

I am in the process of extracting a common type that combines the types of objects found within an array passed as an argument to a function. To better explain this concept, consider the following code: type Extension = { name: string, fields: { [k ...

Exploring the Power of Angular's Redux Implementation with Lazy Loading Strategy

Implementing Redux with Angular has been incredibly beneficial for me, but I am curious about how lazy loading can be incorporated alongside it. Can these two techniques work well together? ...

Feeling perplexed about distinguishing between Modules and Components in Angular 2

Hey everyone, I'm just starting out with Angular2 and I have a question about the concepts of @NgModule and @Component: Are they completely different in terms of concept, or are they similar with the main difference being that @NgModule acts more li ...

What is the reason behind Rollup flagging code-splitting issues even though I am not implementing code-splitting?

In my rollup.config.js file, I have only one output entry defined as follows: export default { input: './src/Index.tsx', output: { dir: './myBundle/bundle', format: 'iife', sourcemap: true, }, plugins: [ ...

Creating efficient React components with TypeScript and leveraging generic props

I’ve been working on understanding and resolving my issue with React components' generic props. I came across a code example in an article about using TypeScript with functional React components and generic props. Unfortunately, when trying to repli ...

What values are typically used in the "types" field of a package.json file?

As a newcomer in the realms of JS/TS, I am delving into creating an NPM package using TypeScript for educational purposes. To prepare the artifacts for registry upload, it's necessary to compile the TS files into JS files using the tsc command. Here i ...