Установить свойство кнопки в javascript

Задайте для setTimeout 0, это приведет к немедленному запуску обнаружения угловых изменений, и при обнаружении изменений будет отображаться ваш элемент DOM.

button_ABCD_tapped(){ 
    this.is_ABCD = true;
    setTimeout(() => {
        document.getElementById("ABCD_Buttons_A").style.background = "#6E6E6E";
        document.getElementById("ABCD_Buttons_B").style.background = "#6E6E6E";
        document.getElementById("ABCD_Buttons_C").style.background = "#E6E6E6";
        document.getElementById("ABCD_Buttons_D").style.background = "#6E6E6E";
    }, 0)        
}

См. Этот пример: https://stackblitz.com/edit/angular-yejpkw?file=src%2Fapp%2Fapp.component.ts

В функции click установите желаемый цвет в переменную:

this.buttonColor = "#6E6E6E"

В вашем HTML вы можете привязать этот цвет следующим образом:

  <button class = "ABCD_Buttons" [style.background] = "buttonColor">D</button>    

Таким образом, вам не нужно иметь дело с DOM

вместо этого вы можете использовать ngClass, например

  <button class = "ABCD_Buttons" *ngIf = "is_ABCD" [ngStyle] = "{'background':is_ABCD? '#6E6E6E' : 'red' } (click) = "myFunction('D')" id = "ABCD_Buttons_D">D</button>

Есть несколько проблем с вашим кодом.

1. Кнопки не будут доступны сразу после того, как вы установите для элемента видимость div значение true. Вам нужно будет проверить это внутри обработчика перехвата жизненного цикла ngAfterViewChecked.

2. Вы не должны напрямую обращаться к DOM с помощью document.getElementById, так как это считается анти-шаблоном. Вместо этого вы должны использовать Renderer2.

3. Конечный тег вашего div - <\div>. Когда должен был быть </div>

Имея в виду оба этих решения, я бы посоветовал вот что:

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  is_ABCD;

  @ViewChild('ABCD_Buttons_A') buttonA: ElementRef;
  @ViewChild('ABCD_Buttons_B') buttonB: ElementRef;
  @ViewChild('ABCD_Buttons_C') buttonC: ElementRef;
  @ViewChild('ABCD_Buttons_D') buttonD: ElementRef;

  constructor(private renderer: Renderer2) {}

  button_ABCD_tapped(){
    this.is_ABCD = true;
  }

  ngAfterViewChecked() {
    this.buttonA && this.renderer.setStyle(this.buttonA.nativeElement, 'background', 'red');
  }

  myFunction() {

  }

}

И шаблон

<button
  type = "button"
  class = "button_searchtype"
  (click) = "button_ABCD_tapped()"
  id = "button_ABCD">
  ABCD
</button>

<div *ngIf = "is_ABCD" class = "ABCD">
        <h3>Choose a letter</h3>
        <button class = "ABCD_Buttons" (click) = "myFunction('A')" #ABCD_Buttons_A>A</button>
        <button class = "ABCD_Buttons" (click) = "myFunction('B')" #ABCD_Buttons_B>B</button>
        <button class = "ABCD_Buttons" (click) = "myFunction('C')" #ABCD_Buttons_C>C</button>
        <button class = "ABCD_Buttons" (click) = "myFunction('D')" #ABCD_Buttons_D>D</button>
</div>

Образец StackBlitz.