title: Angular issue: Property 'nativeElement' does not exist on type 'ProductdetailComponent'
body: <p><strong>UPDATE:</strong></p>
  
  <p>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 </p>
  
  <p><code>ngAfterViewInit() { 
    this.product1.nativeElement.textContent = this.productList[0].productName; 
  }</code></p>
  
  <p>Chrome's inpect tool is giving me an error saying that it can't get <code>productName of undefined</code>, even though the intended value of <code>productName of undefined</code> 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. </p>
  
  <p>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.</p>
  
  <p><strong>Original question:</strong></p>
  
  <p>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 <code>ProductComponent</code> 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 <code>ProductdetailComponent</code>.</p>
  
  <p>In my studying, I've found that <code>ViewChild</code> is the way to do this. However, as the title says, I cannot seem to reference the <code>nativeElement</code> property.</p>
  
  <p>I want to change the textcontent of the div that has <code>#product1</code> on <code>productdetail.component.html</code>, 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:</p>
  
  <pre><code>ERROR in src/app/productdetail/productdetail.component.ts(42,27): error TS2339: Property 'nativeElement' does not exist on type 'ProductdetailComponent'.
  </code></pre>
  
  <p><strong>productdetail.component.ts</strong></p>
  
  <pre><code>import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
  import { DataService } from '../data.service';
  import { Product } from '../product';
  
  @Component({
    selector: 'app-productdetail',
    templateUrl: './productdetail.component.html',
    styleUrls: ['./productdetail.component.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 =&gt; {
          this.productList = products;
        }
      )
    };
  
    ngOnInit() {
      this.getProduct();
    }
  
    ngAfterViewInit() {
      console.log(this.product1.nativeElement);
    }
  }
  </code></pre>
  
  <p><strong>productdetail.component.html</strong></p>
  
  <pre><code>&lt;div class="topnav" id="myTopnav"&gt;
      &lt;a href="home"&gt;Home&lt;/a&gt;
      &lt;a href="products"&gt;Products&lt;/a&gt;
      &lt;a class="active" href="#"&gt;Product Detail&lt;/a&gt;
  &lt;/div&gt;   
  
  &lt;p&gt;
    productdetail works!
  &lt;/p&gt;
  
  &lt;div id="product" #product1 &gt; No &lt;/div&gt;
  </code></pre>
  
  <p>My aim is to make that "No" display as something else.</p>