title: angular4 Error- cannot read property parentnode of null and 'querySelector' not working
body: <p>Getting error- Cannot read property 'parentNode' of null at htDashboardComponent.activeTab. I have mentioned in the code where error is occuring.
  The problem as far as I recognise:</p>
  
  <pre><code> this.setActive([
                 tabsEl.querySelector(`#${id}`),
                  tabsEl.querySelector(`[href="#${id}"]`).parentNode   
                          ]);
  </code></pre>
  
  <p><code>is not setting 'active' class initially at  &lt;li class="tab-link" *ngFor="let tab of tabsdata;let i = index;"&gt; &lt;/li&gt;</code> <code>at tab.component.html</code> and 
  at</p>
  
  <pre><code>&lt;div id="tab-1" class="tab-content rmpm" role="tabpanel"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However, <code>clicking on tab is displaying &lt;div id="tab-1" class="tab-content rmpm" role="tabpanel"&gt;&lt;/div</code> <code>contents and other 'tab' contents as well respectively.</code></p>
  
  <h2>jsondata.json</h2>
  
  <pre><code>{
      "tabsdata": ["o", "hhh", "Sph", "Custh", "Fieh", "Audh", "Digih"]
  }
  </code></pre>
  
  <h2>tab.component.html</h2>
  
  <pre><code>&lt;ul class=" nav nav-tabs " role="tablist"&gt;
      &lt;li class="tab-link" *ngFor="let tab of tabsdata;let i = index;"&gt;
          &lt;a (click)="tabsUL($event)" href="#tab-{{i+1}}" role="tab"&gt;{{tab}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, <code>instead of passing  tabsData=[] and using service to get tabsData from  jsondata.json in tab.component.ts</code> , 
      if we directly pass 
       <code>tabsdata = ["o", "hhh", "Sph", "Custh", "Fieh", "Audh", "Digih"];</code> the code works.</p>
  
  <h2>tab.component.ts</h2>
  
  <pre><code>@Component({
        selector: 'app-tab',
        templateUrl: './tab.component.html',
      })
            @Input() tabsdata: any;
            @Output() loadEvent = new EventEmitter&lt;any&gt;();
  
    tabsUL(param1): any {
      this.loadEvent.emit({ param1 });
    }
  </code></pre>
  
  <h2>htDashboard-Component.component.html</h2>
  
  <pre><code>///////////////////////////////////////////////////////////////////////
   &lt;app-tab [tabsdata]='tabsData' (loadEvent)=loadEvtabsUL($event)&gt;&lt;/app-tab&gt;
  ///////////////////////////////////////////////////////////////////////
  
       &lt;div class="col-xs-12 rmpm"&gt;
              &lt;div class="tabs tabsMenu" #tabs&gt;
          &lt;/div&gt;
          &lt;/div&gt;
         &lt;div id="tab-1" class="tab-content rmpm" role="tabpanel"&gt;
      &lt;/div&gt;
       &lt;div id="tab-2" class="tab-content" role="tabpanel"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <h2>htDashboard-Component.component.ts</h2>
  
  <pre><code>//tabsdata = ["o", "hhh", "Sph", "Custh", "Fieh", "Audh", "Digih"];  --&gt;no error
  tabsData  = [];          ---&gt; creating error
       // tab content show handle starts here
           @ViewChild('err') err: ElementRef;
          constructor(private el: ElementRef, public jsonDataService: 
             DataOrMethodCallService) {
                        this.el = el;
                         }
          ngOnInit() {
          this.jsonDataService.getdata().subscribe(
            res=&gt; {
              this.loadData(res)
              }, err =&gt; {
             console.log(err);
              });
  
        }
          ngAfterViewInit() {
            this.activeTab('tab-1');            // set active tabcontent as 'tab-1';
                }
             loadEvtabsUL = ($event) =&gt; {
              this.tabsUL($event.param1);
                    }
          loadData(res){
      this.tabsData = res['tabsdata'];
      }            
                tabsUL(event): void {
                 let tab_id = event.target.hash.replace('#', '');
                 this.activeTab(tab_id);
                  event.preventDefault();
                            }
  
                  activeTab(id) {
                   let tabsEl = this.tabs.nativeElement;
                    this.removeActive(tabsEl.querySelectorAll('.active'));
                     this.setActive([
                     tabsEl.querySelector(`#${id}`),
                      tabsEl.querySelector(`[href="#${id}"]`).parentNode   //here error
                              ]);
  
                            }
  
              setActive(elems) {
                  elems.forEach((el) =&gt; {
                       el.className += ' active';
                        });
                         }
  
                   removeActive(elems) {
                     elems.forEach((el) =&gt; {
                     el.className = el.className.replace(' active', '');
                       });
                       }
  </code></pre>