How to access DOM element in other component in Angular 6?

You can do it by sending events between directives via a custom service. A simple example would look something like this:

// my-service.component.ts
import { Injectable } from "@angular/core";
import { Subject } from "rxjs/index";

@Injectable()
export default class MyService {

    private messageSource = new Subject<string>();

    listener = this.messageSource.asObservable();

    send(message: string): void {
        this.messageSource.next(message);
    }
}

Your 'a' component will look something like this:

// a.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css']
})
export class AComponent implements OnInit {

  constructor(private myService: MyService) { }

  show() {
    // code to display hidden element in header component
    this.myService.send('some message');
  }
  ngOnInit() {
  }

}

and this is your header component:

// header.component.ts
@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: []
})
export class HeaderComponent implements OnDestroy {

    private serviceSubscription: Subscription;

    constructor(private myService: MyService) { 
        this.serviceSubscription = this.myService.listener.subscribe(message => {
            // TODO: Do whatever you want to do here to show the hidden element
        });
    }

    ngOnDestroy(): void {
        this.serviceSubscription.unsubscribe();
    }

}