How can we access child components in vanilla JavaScript without using ng2's @ViewChild or @ContentChild decorators?

Recently, I delved into the world of using ViewChildren and ContentChildren in Angular 2. It got me thinking - can these be implemented in ES6 without TypeScript annotations?

The TypeScript syntax, according to the official documentation, looks something like this:

@ViewChild(ItemDirective) viewChild: ItemDirective;

Alternatively, as discussed in a forum post:

// myVideo == #my-video
@ViewChild('myVideo') myVideo: any;

I noticed that the source code contains Metadata classes for ViewChild and other similar annotations. I have a feeling it might be possible to use them in plain JS as well. However, I'm not entirely sure how to go about it. Can someone provide some guidance on this matter?

typescriptangular

Answer №1

I believe that decorators should be compatible with ES6 / ES7 (including ES7 decorators along with ES6 itself). ES7 provides class and property decorators, allowing you to transpile the ViewChild decorator.

However, it's a different story for parameter decorators as they are not currently supported...

For more insight, check out this answer and its related comments:

  • Angular 2: How Should We Be Handling Dependency Injection with ES6/ES7?

You might also find this link helpful:

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

Lazy-loading modules in SSR Angular 8 applications are currently unspecified

I am currently in the process of setting up my Angular 8 application to work with server-side rendering (SSR). However, I am encountering some undefined errors in webpack when running my application using ng serve, especially with lazy-loaded modules. Ever ...

angulartypescriptwebpacklazy-loadingserver-side-rendering

Encountering the Selenium Webdriver HTTP error within an Angular 4 project

ERROR Detected Issue found in: ./node_modules/selenium-webdriver/http/index.js Module not found: Error: Unable to locate 'http' in 'C:\Users\aprajita.singh\Documents\Angular 4\Auto-Trender-Project\node_modules ...

angularseleniumselenium-webdriver

Tips for changing the background color depending on the value

I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To v ...

htmlcssangular

Issue encountered with the signature provided for a Safe API POST request

Watch this demonstration video of the issue at hand: I have created a signer using my Metamask Private Key and generated a signature from it as shown below: const signer = new ethers.Wallet(PRIVATE_KEY as string, provider) const safeInstance = new ethers. ...

typescriptnext.jsgnosis-safe

Searching for similar but not identical results using Knex.js

I am seeking a solution to retrieve similar posts without including the post itself. Here is my approach: export async function getSimilars(slug: string) { const excludeThis = await getBySlug(slug) const posts = await knex('posts') .whe ...

javascriptnode.jstypescriptpostgresqlknex.js

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

htmlangular

Preventing a page refresh in Angular 2 on an ASPX page: Strategies for success

The use of the pagemethod is successful, but I encountered an issue with the webmethod causing the page to refresh, which defeats the purpose of using Angular 2. Is there a way to prevent the form from refreshing the page? index.aspx <body> &l ...

asp.netangularpagemethods

Angular: the xhrRequest is failing to be sent

I am facing an issue with a service function that handles an HTTP post request. The request does not get sent for some reason. However, when I add a subscription to the post method, the request is successfully executed. In other services that have the sam ...

angulartypescript

Generating a collection of objects using arrays of deeply nested objects

I am currently working on generating an array of objects from another array of objects that have nested arrays. The goal is to substitute the nested arrays with the key name followed by a dot. For instance: const data = [ id: 5, name: "Something" ...

javascriptarraystypescript

Dropdown with no selected option

Having some trouble with the p-dropdown element in Angular5 and primeng library. Specifically, when dealing with a large entity called Consignment that has multiple fields, I notice that the selected values on several p-dropdown elements (in this case, the ...

angulardropdownprimeng

Tips on how child component can detect when the object passed from parent component has been updated in Angular

In the child component, I am receiving an object from the parent component that looks like this: { attribute: 'aaaa', attribute2: [ { value }, { value }, { value }, ] } This object is passed to th ...

javascriptangulartypescript

What causes TypeScript's ReadonlyArrays to become mutable once they are transpiled to JavaScript?

Currently, I am in the process of learning Typescript by referring to the resources provided in the official documentation. Specifically, while going through the Interfaces section, I came across the following statement: TypeScript includes a special t ...

javascripttypescript

Introduction to React with Typescript: Greeting the World

I am attempting to create a Hello World React application with Typescript. Below is the code I have written. Method 1 works without any issues, but method 2 throws an error. Method 1 - TypeScriptComponent.tsx import React from 'react' import Re ...

javascriptreactjstypescriptwebpack

Contrasting behaviors between CURL and http.get when dealing with CORS restrictions

It's really starting to frustrate me: Command line: $ curl -X GET "cloudant/url" --header "Authorization: Basic YWRtaW46cGFzcw==" --header "Content-Type: application/x-www-form-urlencoded; charset=UTF-8" { "response": "OK" } Using Angular 2 ...

httpangularcors

Angular SwitchMap is a powerful operator that allows you

I am currently utilizing the mat-table component from angular material, in conjunction with pagination features. Whenever a user inputs text into the search field, a filter method is activated to send the text, page size, and current page to the backend f ...

angulartypescriptdebouncingswitchmap

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

Whenever I attempt to call getHistoryData() from the HTML, an error message "ERROR TypeError: Cannot set property 'id' of undefined" appears. export class Data { id : string ; fromTime : any ; toTime : any ; deviceType : string ...

htmlangulartypescript

Issue with RouterLink functionality in Angular 6

While following a Brad Traversy tutorial on coding, I implemented the instructions exactly as given. Below is my 'app.module.ts' file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/c ...

node.jsangularnpmrouterlinkangular-cli-v6

Discover the power of native script's two-way data binding in your classes

Is there a way to implement two-way binding in Nativescript? Here is my attempt: The variable CompModel is set to "FA I Test". I am looking for a solution where the data can be bound both ways - initially displaying the value "FA I Test" at the class lev ...

angularnativescripttypescript2.0angular2-nativescript

Protecting a client's encryption key

I was given the task of enhancing the security of a website that utilizes Angular v15 + JWT. The first step was to alter the login POST-request (HTTPS) from this format: /api/login?username=user_name&password=pass123 to this format: /api/login?credent ...

angularcryptojswebsecurity

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged. &l ...

cssangularng-bootstrap