The code encountered an issue with TS2554 error, as it was anticipating two arguments but was only provided with one when

Before, I utilized ViewChild like this:

@ViewChild("InternalMedia") localStream;
@ViewChild("emoji") mEmoji;

Everything was functioning well up until angular-7.x.

However, after updating to angular-8.x, the following error started popping up:

.../call_emoji/component.ts(41,4): error TS2554: Expected 2 arguments, but got 1.

Upon consulting https://angular.io/api/core/ViewChild, I made the change to:

@ViewChild("InternalMedia",{static:false}) remoteStream;

This resolved the issue. Still unsure about the purpose of the static parameter and how it should be configured to replicate the previous behavior?

angulartypescriptangular7viewchildangular8

Answer №1

When transitioning to Angular 8, it is important to manually declare whether a component is static or not.

@ViewChild(QuilldEditorComponent, {static: true}) quillEditorComponentInstance;

If you have any additional questions, feel free to ask or for more detailed information, please refer to this issue https://github.com/angular/angular-cli/issues/14553 or consult the official documentation https://angular.io/guide/static-query-migration

// query results available in ngOnInit
@ViewChild('foo', {static: true}) foo: ElementRef; 

OR

// query results available in ngAfterViewInit
@ViewChild('foo', {static: false}) foo: ElementRef;

Answer №2

As per the Angular documentation, static checks are used to determine whether query results should be resolved before or after change detection runs.

This option allows developers to specify if only static results should be returned. If not provided, the compiler will default to using query results to determine when query resolution occurs. Queries within nested views (e.g. *ngIf) will be resolved post-change detection, while others will be resolved pre-change detection.

This setting essentially controls the timing of element retrieval through queries. Setting it to false means the query will run after change detections, and true means it will run immediately.

For more details on why this option is important, refer to this Github issue.

If you want the previous behavior, ensure that static is set to false. However, if your component's view is not dynamic (i.e., does not use *ngIf), you can safely set it to true.

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

server running on node encountered an error due to a port that is already in use

The Server instance emitted an 'error' event at: at emitErrorNT (net.js:1340:8) at processTicksAndRejections (internal/process/task_queues.js:84:21) { code: 'EADDRINUSE', errno: 'EADDRINUSE', syscall: 'listen', addre ...

node.jsreactjstypescript

How to navigate to the bottom of a webpage with Angular 4 using TypeScript's onClick event

Within my component, I have a template that looks like the following. When this div is clicked, the intention is to scroll to the bottom of the page. `<section><div onclick='scrollDown()'>Goto Reports</div></section><d ...

angulartypescriptscroll

Executing a Prisma query with a selection

My Prisma models involve User, Car, and Reservation entities: model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image ...

reactjstypescriptnext.jsprisma

What is the best way to include a background image in an Angular selector?

I'm having trouble setting a background image for an Angular selector. Here's the code I'm using: <app-highway-card [ngStyle]="{'background-image':'url(https://cdn.pixabay.com/photo/2021/09/04/09/32/road-6597404__340.j ...

htmlcssangularbackground-image

Dealing with Overwhelmingly Large Angular 5 Components

I'm currently developing a project in Angular 5 and one of our component files is becoming quite large, reaching nearly a thousand lines and continuing to grow. This will eventually make it difficult to manage and understand. We are seeking advice on ...

typescriptangular5

Issues with routerLinkActive

On my page, I have a menu that uses the routerLinkActive attribute to add a green background when a link is active and grey when it's not. However, I'm facing an issue where the bg-success class is added but doesn't overwrite the bg-dark cla ...

angularbootstrap-4

Is it possible to have an interface, function, and variable all sharing the same name in a declaration?

Is it possible to have an interface, function, and variable all with the same name? For example, I would like to define the function as follows: declare function someName(...args: any[]); someName('foo'); The interface would look like this: ...

node.jstypescript

Is there a way to view the console in a released apk?

Currently working with Ionic and in need of exporting a release APK to be able to monitor the console for any potential issues. I am aware that using 'ionic cordova run --device' allows me to view the console, but it only shows a debug APK. Is t ...

typescriptcordovaionic-framework

Passing an object from an Angular application to a backend server in Node.js using the

I have a YAML file with the following structure: Layouts: - Name: Default Layout LayoutId : 1 ConfiguredSegments: LiveA : Height : 100 Id : LiveA Ref1A : ...

node.jsangularjsangularhttp

Trouble encountered with the implementation of setValue on placeholder

When I send the value for age, it is being treated as a date in the API that was built that way. However, when I use setValue to set the form value and submit the form, it also changes the placeholder text, which is not what I want. I would like the placeh ...

angulartypescript

Retrieving an Enum member based on its value in TypeScript

I am working with an enum called ABC: enum ABC { A = 'a', B = 'b', C = 'c', } In addition, I have a method named doSomething: doSomething(enum: ABC) { switch(enum) { case A : console.log(A); break; case ...

javascripttypescriptenums

How can ng-content be used to adjust the displayed content in Angular?

I am working with two components: hostComponent and textComponent. My goal is to project content inside textContent and make modifications based on other input properties. <app-text-component characterCount='5'> <span> Hello World ...

angularangular-content-projection

Invalid characters have been found in literals within the transpiled JavaScript output

In my TypeScript code, I have a field definition that is structured like this: languages: Array<{}> = [{ key: "fr", name: "français" }]; However, when the TypeScript file is compiled into JavaScript, the output ends up looking like this: this.lan ...

typescripttypescript1.8

The attribute 'randomUUID' is not found within the 'Crypto' interface

I attempted to utilize the crypto.randomUUID function in my Angular app version 13.1, however, it does not seem to be accessible. When trying to use it, I encountered this error: TS2339: Property 'randomUUID' does not exist on type 'Crypto ...

angulartypescriptpolyfills

There is an issue with the property 'updateModf' in the constructor as it does not have an initializer and is not definitely assigned

When working with an angular reactive form, I encountered an issue. After declaring a variable with the type FormGroup like this: updateModf:FormGroup; , the IDE displayed an error message: Property 'updateModf' has no initializer and is not def ...

angulartypescript

The error message "@graphql-eslint/eslint-plugin: problem with the "parserOptions.schema" configuration"

Our team is currently working on developing micro-services using NestJS with Typescript. Each of these services exposes a GraphQL schema, and to combine them into a single graph, we are utilizing a federation service built with NestJS as well. I recently ...

typescriptgraphqleslintgraphql-jsnestjs-config

Error in TypeScript: The type 'Color' cannot be assigned to the type '"default" | "primary" | "secondary"'

Currently, I am utilizing MUI along with typescript and encountering the following issue. It seems like I may be overlooking a fundamental concept here but unfortunately cannot pinpoint it. Error: Type 'Color' is not assignable to type '&quo ...

typescriptmaterial-ui

Error encountered in lodash.js in Angular 2 framework

I have been attempting to implement lodash for a datatable. Here are the steps I followed: First, I tried running npm install lodash, but encountered an error stating that the package could not be found After researching the issue, I attempted npm in ...

node.jsangularnpmlodash

The activation of [routerLinkActive] triggers an error related to the data.split function

In my lazy loaded module, I have implemented simple routing as shown below: <div id="nav"> <div class="nav-content"> <div class="nav-item" [routerLink]="'basic'" [routerLinkActive]="active-nav"> <span ...

angulartypescript

Sending parameters with a linked Get request leads to a 404 error page

Exploring how to interact with an external API using a TS/Express server. The user will choose a product, triggering a GET request to the server, which then queries the external API for pricing data. This is a project for fun and learning purposes, so ple ...

typescriptapirestexpress