title: Notification text message not working when created a component and used every where in the app
body: <p>I have created a component as below. the component is to show notification but due to some issue the component content is not getting displayed. Not able to figure out what I am missing.</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-notification',
    templateUrl: './notification.component.html',
    styleUrls: ['./notification.component.css']
  })
  export class NotificationComponent implements OnInit {
  
    notification = {
      text: '',
      timeoutLimit: 7000,
      serviceErrorTimeoutLimit: 10000,
      normalTimeoutLimit: 7000,
      assignedToTimeout: {},
      isServiceError: false,
      error(message: string) {
        this.show('#bd362f', message);
      },
      serviceError(message: string) {
        this.isServiceError = true;
        this.timeoutLimit = this.serviceErrorTimeoutLimit;
        this.show('#bd362f', message);
      },
      success(message: string) {
        this.show('#16ad14', message);
      },
      info(message: string) {
        this.show('#278ac3', message);
      },
      warning(message: string) {
        this.show('#e0af00', message);
      },
      show(color: string, message: string) {
        this.text = message;
        this.toggled;
        clearTimeout(this.assignedToTimeout);
        document.getElementById('notificationPopup').style.backgroundColor = color;
        document.getElementById('notificationPopup').style.display = 'block';
        this.assignedToTimeout = setTimeout(() =&gt; {
          this.clear();
        }, this.timeoutLimit);
      },
      clear() {
        document.getElementById('notificationPopup').style.display = 'none';
        this.isServiceError = false;
        this.timeoutLimit = this.normalTimeoutLimit;
      }
    };
  
    constructor() {}
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p>And the HTML is:</p>
  
  <pre><code> &lt;div class="notification-popup" id="notificationPopup"&gt;
    &lt;span&gt;{{ notification.text }}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I am using in the header.component.html</p>
  
  <pre><code>&lt;app-notification&gt;&lt;/app-notification&gt;
  </code></pre>
  
  <p>header.component.ts</p>
  
  <pre><code>import { NotificationComponent } from '../common/components/notification/notification.component';
  
  constructor(
      private notification: NotificationComponent
    ) {
      //   this.productCodesList=this.productCodesList1;
      this.selectedProductCode == '20201';
      //   this.productCodesList=this.productCodesList1;
      this.vehicleTypeList = this.twoWheelertype;
      this.selectedType = 'KFZK120';
      this.getVehicleMake();
    }
  
  this.notification.notification.success('Data is deleted');
  </code></pre>
  
  <p>Now the popup notification comes up but the text 'Data is deleted' is not displayed. </p>