UPDATE:

ElementRef and fixing my syntax solved the issue in the title. The main problem I'm running into now is that I still can't change the textContent with this code

ngAfterViewInit() { this.product1.nativeElement.textContent = this.productList[0].productName; }

Chrome's inpect tool is giving me an error saying that it can't get productName of undefined, even though the intended value of productName of undefined can be displayed in the app using interpolation with the very same array in the very same files that are rejecting the code above. I would just do it that way, but I need the array indexes to be dependent on what element the user clicks and the only approach I know is JavaScript functions. I'm trying to get the above line of code to work before I start on those.

I don't understand how it can be undefined and still 'selectively' do what its told. Well, I can kind of understand. It's probably because I'm messing up.

Original question:

I'm currently working on one of the final steps of an angular project I'm doing to learn MEAN stack. The project is basically a product list where product names and details for each product are taken from a noSQL database. The product names are put in elements on a ProductComponent to make a clickable list, and based on what product name/html element the user clicks, details exclusive to that product will be displayed by the ProductdetailComponent.

In my studying, I've found that ViewChild is the way to do this. However, as the title says, I cannot seem to reference the nativeElement property.

I want to change the textcontent of the div that has #product1 on productdetailponent.html, but before I can do that, I have to manage to access the element. I'm appreciative of any help. Here is what I think is the relevant code, and the error is:

ERROR in src/app/productdetail/productdetailponent.ts(42,27): error TS2339: Property 'nativeElement' does not exist on type 'ProductdetailComponent'.

productdetailponent.ts

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { DataService } from '../data.service';
import { Product } from '../product';

@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetailponent.html',
  styleUrls: ['./productdetailponent.css'],
  providers: [ DataService ]
})

export class ProductdetailComponent implements OnInit, AfterViewInit {
  @ViewChild(ProductdetailComponent) product1: ProductdetailComponent;
  productList: Product[]=[];
  constructor(private dataService: DataService) { }

  getProduct(){
    this.dataService.getproductList()
    .subscribe(
      products => {
        this.productList = products;
      }
    )
  };

  ngOnInit() {
    this.getProduct();
  }

  ngAfterViewInit() {
    console.log(this.product1.nativeElement);
  }
}

productdetailponent.html

<div class="topnav" id="myTopnav">
    <a href="home">Home</a>
    <a href="products">Products</a>
    <a class="active" href="#">Product Detail</a>
</div>   

<p>
  productdetail works!
</p>

<div id="product" #product1 > No </div>

My aim is to make that "No" display as something else.