title: ERROR TypeError: Cannot read property 'nativeElement' of undefined in angular 5
body: <p>I know I am not the first to ask this ,But I am sure about my issue is slight different from others .</p>
  
  <p>In my application once user delete the products from mycart I want to close the modal automatically .(Modal will shown after click on the mycart Icon).</p>
  
  <p>My code is working as I expected but I got the console errors.</p>
  
  <p>Error :</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'nativeElement' of undefined
            at AppComponent.closeModalIfNoCart (app.component.ts:107)
            at SafeSubscriber.eval [as _next] (app.component.ts:100)
            at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
            at SafeSubscriber.next (Subscriber.js:187)
            at Subscriber._next (Subscriber.js:128)
            at Subscriber.next (Subscriber.js:92)
            at MapSubscriber._next (map.js:85)
            at MapSubscriber.Subscriber.next (Subscriber.js:92)
            at FilterSubscriber._next (filter.js:90)
            at FilterSubscriber.Subscriber.next (Subscriber.js:92)</p>
  </blockquote>
  
  <p>app.component.html</p>
  
  <pre><code>     &lt;div *ngIf="mycart &amp;&amp; mycart.length" class="modal fade modalstyle" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header headerHeight text-white " style="background:rgb(0, 0, 0);font-weight:bold"&gt;
          &lt;h6 class="modal-title" id="exampleModalLabel"&gt;My Cart Items&lt;/h6&gt;
          &lt;button #closeModalBtn type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div *ngFor="let products of mycart;let i =index;"&gt;
            &lt;div class="container col-sm-12"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-sm-4 paddingforimage"&gt;
                  &lt;img [src]="products['ITEM_IMAGE_PATH']"&gt;
                &lt;/div&gt;
                &lt;div class="text-info col-sm-6"&gt;
                  &lt;span&gt;
                    &lt;h6&gt;{{products?.TOTAL_QTY}} &amp;times; {{products?.ITEM_PRICE}} &amp;#8377;&lt;/h6&gt;
                  &lt;/span&gt;
                  &lt;span&gt;
                    &lt;h6&gt;{{products?.ITEM_DESC}}&lt;/h6&gt;
                  &lt;/span&gt;
                  &lt;span&gt;
                    &lt;h6&gt;{{products?.TOTAL_AMT}} &amp;#8377;&lt;/h6&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-1 text-right"&gt;
                  &lt;button type="button" class="close closebtn" aria-label="Close" (click)="detele_My_Cart(products?.ITEM_CODE)"&gt;
                    &lt;span aria-hidden="true" (click)="detele_My_Cart(products?.ITEM_CODE)"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;hr&gt;
          &lt;/div&gt;
          &lt;div class=" container row col-sm-12"&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;strong&gt;SHIPPING&lt;/strong&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-6 text-right"&gt;0 &amp;#8377;&lt;/div&gt;
            &lt;hr&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;strong&gt;TOTAL&lt;/strong&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-6 text-right"&gt;{{my_Cart_Total_Amount}} &amp;#8377;&lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="container row col-sm-12" id="wrapper"&gt;
            &lt;button type="button" class="btn btn-success buttonSize" data-dismiss="modal" routerLink="/cartsummary"&gt;
              &lt;strong&gt;CHECK OUT&lt;/strong&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { DatePipe } from '@angular/common';
  import { CartdataService } from './services/cartdata.service';
  import { Observable } from 'rxjs/Rx';
  import 'rxjs/add/observable/interval';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  
  
  })
  export class AppComponent implements OnInit {
  
    default_Cart_Count: number = 0;
    my_Cart_Total_Amount: number;
    mycart: any;
    my_Cart_Total_Amount1: number;
    mycartupdate: any;
    @ViewChild('closeModalBtn') closeModalBtn: ElementRef;
  
    constructor(private CartdataService: CartdataService, private http: HttpClient) { }
  
    ngOnInit() {
      // other codes
    }
  
    detele_My_Cart(item_Code: any) {
      this.publicIp.v4().then(ip =&gt; {
        this.CartdataService.delete_My_Cart(ip, item_Code).subscribe(
          data =&gt; {
            this.mycart = data['Table']
            this.my_Cart_Total_Amount = data['Table1'][0]['TOTAL_AMOUNT']
  
            this.closeModalIfNoCart();
          });
      });
    }
  
    closeModalIfNoCart() {
      if (!this.mycart || !this.mycart.length)
        this.closeModalBtn.nativeElement.click();
    }
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;ECommerceWebsite&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"&gt;
    &lt;script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"&gt;&lt;/script&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;app-root&gt;&lt;/app-root&gt;
    &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;&lt;script&gt;
      $('a[data-slide="prev"]').click(function () { $('#myCarousel').carousel('prev'); });
      $('a[data-slide="next"]').click(function () { $('#myCarousel').carousel('next'); });
    &lt;/script&gt;
  
    &lt;script&gt;
      $('a[data-slide="prev"]').click(function () { $('#myCarousel1').carousel('prev'); });
      $('a[data-slide="next"]').click(function () { $('#myCarousel1').carousel('next'); });
    &lt;/script&gt;
  
    &lt;!-- &lt;script&gt;
      $(function () {
        $('#modal').modal(toggle)
      });
    &lt;/script&gt; --&gt;
  
    &lt;script&gt;
      $(document).ready(function () {
        $('#head__top').on('click', function () {
          $('#collapseExample').fadeToggle(300);
          $('#innerCollapse').hide();
        });
        $('#head__sub').on('click', function () {
          $('#innerCollapse').fadeToggle(300);
        });
      });
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>angular-cli.json</p>
  
  <pre><code>"styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "styles.css"
        ],
        "scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "../node_modules/bootstrap/dist/js/bootstrap.js"
        ]
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>"dependencies": {
      "@agm/core": "^1.0.0-beta.2",
      "@angular/animations": "^5.2.0",
      "@angular/common": "^5.2.0",
      "@angular/compiler": "^5.2.0",
      "@angular/core": "^5.2.0",
      "@angular/forms": "^5.2.0",
      "@angular/http": "^5.2.0",
      "@angular/platform-browser": "^5.2.0",
      "@angular/platform-browser-dynamic": "^5.2.0",
      "@angular/router": "^5.2.0",
      "angular-web-storage": "^2.0.0",
      "angular-webstorage-service": "^1.0.2",
      "auth0-js": "^9.3.1",
      "bootstrap": "^4.1.1",
      "core-js": "^2.4.1",
      "dateformat": "^3.0.3",
      "jquery": "^3.3.1",
      "jquery.js": "0.0.2-security",
      "popper.js": "^1.14.3",
      "public-ip": "^2.4.0",
      "rxjs": "^5.5.6",
      "zone.js": "^0.8.19"
    }
  </code></pre>
  
  <p>Image :</p>
  
  <p><a href="https://i.stack.imgur.com/1ead9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ead9.jpg" alt="enter image description here"></a>
  I could not find that were I did the mistakes .
  can anyone tell help me to solve this .</p>