CODEWITHSUNDEEP
angulartypescript
Charles L.
Charles L.

Reputation: 1970

Angular 7 viewchild throwing error and not recognizing modal

Im trying to use @viewchild and I keep getting an error:

import {Component, ElementRef, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ApiService} from '../../../api.service';
import { Category } from '../../../category';

@Component({
  selector: 'app-add-category',
  templateUrl: './add-category.component.html',
  styleUrls: ['./add-category.component.scss']
})
export class AddCategoryComponent {
  @Input() category = new Category();
  public id: string;

  constructor(private route: ActivatedRoute, private router: Router, private data: ApiService) {}
  onSubmit() {
    @ViewChild('submitModal') modal;
    this.id = this.route.snapshot.paramMap.get('id');
    this.category.company = '5c5392a3bc107f4452ee222f';
    this.data.postCategory(this.category).subscribe(data => {
      console.log(data);
    }, (err) => {
      console.log(err);
    });
  }
}

error:

Error TS1146: Declaration expected.

Im trying to grab a Dom element using @viewChild to then close a modal upon onSubmit()

Upvotes: 0

Views: 827

Answers (1)

Nithya Rajan
Nithya Rajan

Reputation: 4884

@ViewChild('submitModal') modal; is a property you declared a property inside a method, it wont work that way. you should declare a property outside of method and inside of your class

export class AddCategoryComponent {
  @Input() category = new Category();
  public id: string;
  @ViewChild('submitModal') modal; //declare properties inside class, outside methods

  constructor(private route: ActivatedRoute, private router: Router, private data: ApiService) {}
  onSubmit() {

    this.id = this.route.snapshot.paramMap.get('id');
    this.category.company = '5c5392a3bc107f4452ee222f';
    this.data.postCategory(this.category).subscribe(data => {
      console.log(data);
    }, (err) => {
      console.log(err);
    });
  }
}

Upvotes: 1

Related Questions