How can I get h2-header and manipulate with its value?

Issue

I have this code: .html:

<div *ngIf="isNotificationDisplayed" class="notification">
  <h2 align="center" class="set-margin" id="notification">Node was...!</h2>
  <h3 align="center">Press any key to hide it</h3>
</div>

and .ts:

import { Component, OnInit, HostListener } from '@angular/core';

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

  isNotificationDisplayed: boolean = false;
  notification: any = document.getElementById("notification");

  constructor() { }

  ngOnInit(): void {
  }

  @HostListener('document:keydown', ['$event'])
  handleKeyDownKeyboardEvent(e: KeyboardEvent) {
    if (e) {
      this.isNotificationDisplayed = false;
    }
  }

  isCreated(name: string) {
    this.notification.value = `Node ${name} was created!`;
    this.isNotificationDisplayed = true;
  }

  isUpdated(name: string) {
    this.notification.value = `Node ${name} was updated!`;
    this.isNotificationDisplayed = true;
  }

  isDeleted(name: string) {
    this.notification.value = `Node ${name} was deleted!`;
    this.isNotificationDisplayed = true;
  }
}

But every time I try to get h2-header, notification = null. And I don't know if it's possible to change h2 value in the same way as it's possible with Input.

Solution

You have to use innerHTML. As mentioned on MDN

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

Read more and see examples here.

Answered By - onrails