Facing issue while calling @viewchild in angular

Question

Hi guys i'm working with angular and want to call @viewChild in ts file but facing an error "Decorators are not valid here." cant find any specific solution for my problem

I have tried many links regarding this problem including angular documentation, stackoverflow, youtube but not able to find any appropriate solution to my problem

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-upload-card-details',
    templateUrl: './upload-card-details.component.html',
    styleUrls: ['./upload-card-details.component.css']
})
export class UploadCardDetailsComponent implements OnInit {
    @ViewChild(draganddropimage)
    constructor() {}

ngOnInit() {}
    }

HTML:Code
<div class="modal fade custom-modal-setting" id="drag-and-drop-image" #draganddropimage tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

score 2 · Accepted Answer · answered Sep 05 '19 at 08:20

2

From Angular 8, you need to add { static: true } in ViewChild

Try like this:

@ViewChild('draganddropimage', { static: true }) dragDropImageRef: ElementRef;

answered Sep 05 '19 at 08:20

Adrita Sharma

21,581
10
69
79

Mustapha Larhrouch · Answer 2 · 2019-09-05T08:26:49.923

0

You need to declare a variable and add the decorator to it :

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-upload-card-details',
    templateUrl: './upload-card-details.component.html',
    styleUrls: ['./upload-card-details.component.css']
})
export class UploadCardDetailsComponent implements OnInit {
    @ViewChild('draganddropimage')
    private draganddropimage: ElementRef; 

    constructor() {}

    ngOnInit() {}
    }
}

edited Sep 05 '19 at 08:26

answered Sep 05 '19 at 07:56

Mustapha Larhrouch

3,373
3
14
28

Hi @Mustapha thanks alot for reply but still its not working error im getting is **error TS2554: Expected 2 arguments, but got 1.** – Yasir Mehmood Sep 05 '19 at 08:18
I edited the answer. you must put the name of the viewChild as string `@ViewChild('draganddropimage')` – Mustapha Larhrouch Sep 05 '19 at 08:27
If you're using Angular 8 you need to add { static: true } Check this post https://stackoverflow.com/questions/56473899/error-ts2554-expected-2-arguments-but-got-1-with-viewchild – ilyas shabi Sep 05 '19 at 08:28

score 0 · Answer 3 · answered Sep 05 '19 at 07:57

0

I think you decorate constructor, try to set a name for @ViewChild(draganddropimage) draganddropimage

answered Sep 05 '19 at 07:57

Carnaru Valentin

1,690
17
27

score 0 · Answer 4 · answered Sep 05 '19 at 07:58

0

You need to import ElementRef and then use this snippet to get your template reference using ViewChild :

@ViewChild('draganddropimage') dragDropImageRef: ElementRef;

answered Sep 05 '19 at 07:58

ilyas shabi

194
1
7

Hi ilyas thanks for the reply but still not working getting **error TS2554: Expected 2 arguments, but got 1.** – Yasir Mehmood Sep 05 '19 at 08:15

AlexV · Answer 5 · 2020-04-11T14:07:51.143

0

Just fighting with the same problem. You need to put something between the decorator and the constructor:

export class SomeComponent implements OnInit {
  @ViewChild(SomeChildComponent, { static: true })

  someVariable: SomeChildComponent; // this row is the magic (otherwise you decorate the constructor)

  constructor() {}

edited Apr 11 '20 at 14:07

answered Apr 11 '20 at 13:59

AlexV

249
3
8

Facing issue while calling @viewchild in angular

5 Answers5