Notification text message not working when created a component and used every where in the app

Question

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.

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(() => {
        this.clear();
      }, this.timeoutLimit);
    },
    clear() {
      document.getElementById('notificationPopup').style.display = 'none';
      this.isServiceError = false;
      this.timeoutLimit = this.normalTimeoutLimit;
    }
  };

  constructor() {}

  ngOnInit() {}
}

And the HTML is:

 <div class="notification-popup" id="notificationPopup">
  <span>{{ notification.text }}</span>
</div>

And I am using in the header.component.html

<app-notification></app-notification>

header.component.ts

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');

Now the popup notification comes up but the text 'Data is deleted' is not displayed.

components are not to be injected. Instead create all the functions in the child (do not use the notification object) and using viewchild you can call those functions. Check the duplicate :) — AT82, May 01 '19 at 13:29

score 0 · Answer 1 · answered May 01 '19 at 11:44

0

Should not this be ?

<app-notification [(toggled)]="username"></app-notification>

just

<app-notification [toggled]="username"></app-notification>

answered May 01 '19 at 11:44

Sajeetharan

216,225
63
350
396

I have updated the question. I guess you confused with @input. notification.text in html is not getting displayed. – Deamon May 01 '19 at 12:40

Notification text message not working when created a component and used every where in the app

1 Answers1